Code Monkey home page Code Monkey logo

postcode's Introduction

Postcode

API client for VS code 📦


Postcode is a Visual Studio Code extension that can be used to create and test simple and complex HTTP/s requests, as well as view responses. You can find the extension available here.


Release: 1.3.3

Highlighted Features

  • Intuitive UI/UX similar to Postman fitting seamlessly with any VSCode theme
  • Supports GraphQL requests
  • Supports code snippet generation from requests

Quick start

Step 1. Install the Postcode extension for Visual Studio Code
Step 2. Click on the Postcode icon in the side panel OR run the following command Postcode: Create Request
Step 3 Create or test your HTTP/s requests and hit Send to see the responses

Commands

Command Description
Postcode: Create Request Opens a new Postcode tab to create and test requests

Issues, feature requests, and contributions

Issues

  • If you come across a problem with the extension, please file an issue
  • For list of known issues, please check the issues tab

Feature requests

  • Find planned features for future releases marked as feature under issues tab.
  • For new feature requests, please file an issue

Contributions

Contributions are always welcome!

Running the extension locally for development

  1. Clone the repository and install dependencies by running yarn install
  2. Press F5 to open a new window with your extension loaded.
  3. Run your command from the command palette by pressing (Ctrl+Shift+P or Cmd+Shift+P on Mac) and typing Postcode: Create Request.

Folder structure

  • package.json - this is the manifest file in which you declare your extension and command. The plugin registers a command and defines its title and command name. With this information VS Code can show the command in the command palette.
  • webview: folder where you will find entire React code
  • src/extension.ts: this is the main file where you will provide the implementation of your command. The file exports one function, activate, which is called the very first time your extension is activated (in this case by executing the command). Inside the activate function we call registerCommand. We pass the function containing the implementation of the command as the second parameter to registerCommand.

Making changes

  • You can relaunch the extension from the debug toolbar after changing code in src/extension.ts.
  • You can also reload (Ctrl+R or Cmd+R on Mac) the VS Code window with your extension to load your changes.

Related

  • Read the launch blog post on Medium
  • Featured #11 Product of the day on Product Hunt
  • Featured in Trending this week on Visual Studio Code Marketplace

postcode's People

Contributors

mrsauravsahu avatar mukundan314 avatar rohinivsenthil avatar thuoe avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

postcode's Issues

Allow use of arbitrary HTTP method

Some web browsers (with Fetch API) support arbirary HTTP method except 'CONNECT'(reserved) and 'TRACE'(blocked in purpose), some web servers (with Servlet API) support arbirary HTTP method except 'CONNECT' (not implemented) and 'TRACE' (disabled by default).

The HTTP method select box of Postcode contains 7 options, I cannot use arbitrary HTTP methods which I can use with Fetch API, like WebDAV's methods, or custom methods.

To support input of arbitraty HTTP method, one approach is to make the select box editable, e.g. in HTML you can change something like <select name="method"> with <input type="text" name="method" datalist="httpMethods"><datalist id="httpMethods">.

B.T.W:

The RAW format select box of Postcode contains only 4 options, I cannot send arbitrary data formats (content types) which I can send with Fetch API, like 'application/csp-report'.

I'm a Postman user, nowdays Postman becomes unfriendly to my GPU, it comes with various issues: blackscreen/stuck, so I'm looking for a lightweight solution, maybe it's Postcode.

Authorization not working

Hi,

I tested the extension with a GET API requiring basic auth.
I set the credentials in the "Authorization" tab, and selected the "Basic Auth" option.
Unfortunately it did not work.

It worked instead if I put directly the Authorization header in the header section.

I have not checked if the same problem happens with the bearer token authentication (but it could be quite likely).

Regards.

POST with form-data body is missing a boundary

When sending a POST request with a form-data body, the Content-Type header just contains "multipart/form-data" and thus is missing a boundary.
This results into no form data to be found by the server.

Expected result:
A request with a Content-Type like: "multipart/form-data; boundary=--------------------------636776427956514692483101" is sent.

UI is small

The UI is pretty small. The fonts being thin are not visible properly on a large window.

Either changing the fonts to a bolder variant, or increasing the size of the app based on editor font size could be two solutions.

The other actionable buttons are fine but the input font is illegible.

Here is a screenshot for reference:

Screenshot 2021-08-16 at 2 35 40 PM

Feature Requests: Openvsx support

Hello,
I found this extension while searching for alternatives to Thunder client and I was wondering if it would be possible for this project to support publishing to openvsx so that it can be used with coder workspaces.

Binary files do not upload correctly

I was using the library for some simple testing, and got a very obscure issue with binary files not uploading correctly. It looks like they are sent wrongly encoded on the request side.

A simple test case in Node.js:

const fs = require("fs");
const express = require("express");

const app = express();
app.use("/", (req, res) => {
  const writeStream = fs.createWriteStream(req.query.filename || "output.txt");
  req.pipe(writeStream);
  res.send();
});
app.listen(2342);

This creates a HTTP app on port 2342 that writes the body of any request to the filename given as a query parameter, e.g. http://localhost:2342/?filename=uploaded.zip means saving the file to uploaded.zip in the app dir.

If I upload a .zip file like the attached test.zip as a "binary" file via Postcode (latest version, installed today), and try to open the resulting uploaded.zip, it will be invalid.

The same flow works as intended in Postman.

Attachments:

test.zip

automatically encode url for none supported character

As saying in #49, if there are Chinese characters or any characters need to be urlencoding in the params, postcode can't send requests properly, we have to encode the characters manually to send the proper request. It's not convenient.

Add a responsive horizontal layout

The current layout is a bit crowded on the vertical side

image

If we compare it to a similar extension, it has a horizontal layout, which makes much easier to use

image

Feature Requests: URL, Response bar, Side bar

The following are few features that I feel would be great if included in postcode:

  • Automatically append http:// to the beginning of the URL if not already exists: I often type localhost:3000 on the first try and then append http:// to the beginning on figuring out that something is wrong. Postman by default does this and gives a better user experience. I suppose this is the issue addressed in #31.
  • Height adjustable Response-bar: Opening a terminal below the response bar makes it too small. It would be great if the height is adjustable by dragging it.
  • Ability to see previous requests: This might seem a little far-fetched, but listing the previous requests in the currently empty sidebar would be great.

PS: I have been using postcode for a while and I think that it has the potential to be the goto extension for all API testing. I feel just a few things are missing that are needed for a better user experience.

Wrong header "Connection" value

Hi,

I have noticed this behavior:

  1. If I post with header "Connection", the corresponding header is sent (OK)
  2. If I post with unchecked "Connection" header, the header is nevertheless sent with value close (wrong). In this case it should not be sent, or at least sent with a correct default value, which changed from HTTP1.0 and HTTP1.1 and HTTP2:

Regards

Save requests

Currently you can't save any requests, would be nice to save collections

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.