Documentation
Overview
Branch is an extension for VSCode which allows developers to view and test their backend routes within Express or Oak frameworks.
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 ripgrep by navigating to the link below and following the associated instructions.
- RipGrep Docs -Once you have ripGrep installed on your machine, it is time to install the Branch extension into VSCode. Click HERE or on the install link at the top right of this page to navigate to the VisualStudio Marketplace. From there, click install and follow the prompts.
Instructions
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. This will open the Branch view, and you are ready to go.
Using the Branch view:
The Branch view consists of four primary sections:
- A - Route Tree
- B - Query Fields
- C - Request Body Field
- D - Response Object
- A - 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.
- B- 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.
- GET: After clicking the GET circle above you will see the GET button highlight, and the URL field auto-populate with partial data. NOTE: If a parameter is not required for your request, it will bypass the query field altogether and display results in the Response Object.
To complete the query, replace the placeholder text with your desired target parameter. Then click the highlighted GET button. Your results will populate in the Response Object. - DELETE: After clicking the DELETE circle above you will see the DELETE button highlight, and the URL field autopopulate with partial data.
To complete the query, replace the placeholder text with the target parameter you wish to delete. Then click the highlighted DELETE button.
CAUTION: If you are working with a live database, running delete with Branch is permanant. Be sure you really wish to do this before clicking DELETE. - POST: After clicking the POST circle above you will see the POST button highlight. However, the URL field will NOT populate as it is not necessary for this type of request.
Using the Key & Value fields, enter the appropriate data per your middleware needs. As you enter each pair and click Add To Body, it will populate in the Request Body Field to the right. When you have entered all the necessary parameters, click the POST button to complete your query. - PUT: After clicking the PUT circle above you will see the PUT button highlight, and the URL field autopopulate with partial data.
To complete the query, replace the placeholder text with the target parameter you wish to modify. Now individually enter any key/value pairs necessary to the fields below.
As you enter each pair and click Add To Body, it will populate in the Request Body Field to the right. When you have entered all the necessary parameters, click the PUT button to complete your query.
- GET: After clicking the GET circle above you will see the GET button highlight, and the URL field auto-populate with partial data. NOTE: If a parameter is not required for your request, it will bypass the query field altogether and display results in the Response Object.
- C- 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.
IMPORTANT: This section will remain empty when building GET or DELETE queries. - D - Response Object: This is where the results of your query will be displayed.
If your query returns an object, it will auto-populate here. If your query only returns a status code, that status code will be displayed instead.
Troubleshooting
If you are experiencing issues when using Branch, consider the following:
| Problem | Solution(s) |
|---|---|
| The tree doesn't populate at startup | - Make sure you only have one instance of Branch running. - Restart your VSCode. |
| Route tree is present but only displays a single node | - Make sure your server files are stored in a directory titled "server". - Make sure your "server" directory is in the root of your VSCode workspace. |
| Route tree has one or more blank nodes | - Branch's scraper operates by searching your code for "app.get" and then reads the remainder of the line. Ensure that your route information written in a single line. |
| Route tree incorrectly displays multiple routes for a single node | - This is a known bug that we are currently working on fixing. We welcome feedback and ideas to resolve this bug. |
Chocolate Cake Recipe
Because every website is better if it has a chocolate cake recipe!
2/3 cup butter - softened
1-2/3 cups sugar
3 large eggs - room temperature
2 cups all-purpose flour
2/3 cup baking cocoa
1-1/4 teaspoons baking soda
1 teaspoon salt
1-1/3 cups 2% milk
Confectioners' sugar or favorite frosting
In a bowl, cream butter and sugar until light and fluffy, 5-7 minutes. Add eggs, 1 at a time, beating well after each addition. In a seperate bowl, combine flour, cocoa, baking soda and salt. Add dry mixture to creamed mixture alternately with milk, beating until smooth after each addition. Pour batter into a greased and floured 13x9-in. baking pan.
Bake at 350° for 35-40 minutes, or until a toothpick inserted in center comes out clean. Cool completely on a wire rack. When cake is cool, dust with confectioners' sugar or top with your favorite frosting.
Nutrition Facts
1 piece: 257 calories, 10g fat (6g saturated fat), 67mg cholesterol, 368mg sodium, 38g carbohydrate (23g sugars, 1g fiber), 4g protein.