Branch
View and test your backend routes right from your code editor!
Report Bug
·
Request Feature
·
Install
Table of Contents
- About Branch
- Installation
- Our Extension
- The Team
- Acknowledgements
About Branch
Branch is a unique & convenient backend route visualization tool built directly into VS Code! With Branch, you can:
-
View your app's routes without leaving your editing
environemnt
-
Dynamically adjust which portion of the route you wish to view
-
Create, edit, and execute http requests to your server
directly from the extension
- View returning data in an easy to read format
Branch functions best when conventional syntax standards and best practices are used. This includes:
-
Saving all server files inside a server directory
-
Saving port number in a port variable. Alternatively, you
can use port 3000 or 8080 directly
-
Using traditional routes (GET, POST, PUT, DELETE)
Installation
To use Branch, you will first need to ensure that
RipGrep
(a command line search tool) is installed on your machine. To check to see what version of RipGrep is installed on your
machine, enter the following in your terminal.
$ rg --version
We recommend that you use version 13.0.0 or newer.
For MacOS X Homebrew users, install ripgrep by entering the
following into your terminal:
$ brew install ripgrep
For Debian & Ubuntu users, install ripgrep by entering the
following into your terminal:
$ curl -LO https://github.com/BurntSushi/ripgrep/releases/download/13.0.0/ripgrep_13.0.0_amd64.deb
$ sudo dpkg -i ripgrep_13.0.0_amd64.deb
For all other users, install rdocspgrep by navigating to the RipGrep repo and finding your configuration.
Once you have ripGrep installed on your machine, it is time to
install the Branch extension into VSCode. Click here or at the top of this page to navigate to the VisualStudio Marketplace. From there, click install and follow the prompts.
Our Extension
Accessing the Extension
To access the extension, open the app you wish to test as
you normally would in VSCode. Now open the Command Palette
by pressing control (command on a mac) F1 and selecting Branch: Start
Using the Branch View
The Branch view consists of four primary sections:
-
**Route Tree** : This
is the interactive visual representation of your routes.
Each route that can be expanded upon will be indicated
by a blue circle. Simply click on that circle to see the route expanded. When selecting an endpoint (GET, POST, etc...), Branch
will begin filling out the appropriate query fields
below.
-
Query Fields: Here
you can determine the query parameters that you need.
The URL section will begin to auto-populate when you
click on an endpoint in the Route Tree above.
Additionally, the appropriate button and input field for
your query type will highlight. For more detailed information on query types, see our detailed docs.
-
Request Body Field: Here, you will see the request body when you are generating a POST or PUT request.
If you enter incorrect data, click the X button to clear
the field and restart building your query.
-
Response Object: This is where the results of your query will be
displayed.
The Team
Acknowledgements
This section is a WIP, check back with us later!
