Branch

View and test your backend routes right from your code editor!


Report Bug · Request Feature · Install

Table of Contents

1. About Branch
2. Installation
3. Our Extension
4. The Team
5. 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:

1. 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.

2. 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.

3. 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.

4. Response Object: This is where the results of your query will be displayed.

The Team

• Foster Sullivan | LinkedIn | GitHub
• Chase Benjamin | LinkedIn | GitHub
• Zach Hall | LinkedIn | GitHub
• Jason Goldman| LinkedIn | GitHub

Acknowledgements

This section is a WIP, check back with us later!