Update Dev Environment Setup Guide

Dev Environment Setup Guide.md

@@ -2,58 +2,71 @@
 
 ## Prerequisites
 - [VS Code](https://code.visualstudio.com/download)
+- [git](https://git-scm.com/downloads)
 - [NodeJS](https://nodejs.org/en/) >= v14.2.0
 - npm >= v6.14.4
 - npx >= v6.14.4
-- Python 3
+- [Python](https://www.python.org/downloads/) >= 3.7
+
 
 ## Setup
-**Note:** webqueue2 uses npm and  create-react-app to manage itself. You can learn more about npm [here](https://nodesource.com/blog/an-absolute-beginners-guide-to-using-npm/) and create-react-app [here](https://create-react-app.dev/docs/getting-started/).
+- The webqueue2 API uses `gunicorn` as a WSGI server and this does not run on Windows. If you're developing on Windows, look into Ubuntu on [WSL2](https://docs.microsoft.com/en-us/windows/wsl/wsl2-index) or use a virtual machine.
+
+- webqueue2 uses npm and  create-react-app to manage itself. You can learn more about npm [here](https://nodesource.com/blog/an-absolute-beginners-guide-to-using-npm/) and create-react-app [here](https://create-react-app.dev/docs/getting-started/).
 
+---
 
-### Step 1: Create and enter a project directory
-```bash
-mkdir project-dir && cd project-dir
+### Step 1: Close the Reposistory
+```
+git clone https://github.itap.purdue.edu/ECN/webqueue2.git
 ```
+**Note:** github.itap.purdue.edu is only accessible on Purdue's campus or via the [AnyConnect webvpn](https://webvpn.purdue.edu/).
 
-### Step 2: Close the Reposistory
-```bash
-git clone https://github.rcac.purdue.edu/ECN/webqueue2.git
+### Step 2: Move to the project directory
+```
+cd webqueue2
 ```
 
 ### Step 3: Install npm Packages
-```bash
+```
 npm install
 ```
 
 #### Using npm
-There are three built in npm scripts that come from create-react-app:
+There are four npm scripts included in this project:
 
-1. `npm run start`: This will start a local development server on [localhost:3000](http://localhost:3000) and launch your default browser at that address. As you save changes in /public and/or /src you'll see your changes in the browser.
+- `npm run start`: This will start a local development server on [localhost:3000](http://localhost:3000) and launch your default browser at that address. As you save changes in /public and/or /src you'll see your changes in the browser. (API requests are automatically proxied to the API server.)
 
-1. `npm run build`: This will build a static version of the site in /build ready to be placed in the document root of any web server.
+- `npm run start-api`: This will start a local WSGI server on [localhost:5000](http://localhost:5000) to access the API. **Note:** You will need to add Python to your PATH variable.
 
-1. `npm run test`: This will run any tests (using the [Jest](https://jestjs.io/) tester). There are currently no defined tests.
+- `npm run build`: This will build a static version of the site in /build ready to be placed in the document root of any web server.
 
-1. `npm run eject`: <span style="background-color: #fff394">**THIS IS NON-REVERSABLE**</span>: This will abstract all of the build environment settings and make them available to you. See the [create-reacte-app docs on ejecting](https://create-react-app.dev/docs/available-scripts#npm-run-eject) for more information.
+- `npm run test`: This will run any tests (using the [Jest](https://jestjs.io/) tester). There are currently no defined tests.
 
 ### Step 4: Setup Python for API
 Go to the API directory
-```bash
+```
 cd api/
 ```
 
+Create Python virtual environment
+```
+python3 -m venv venv
+```
+
 Activate the Python virtual environment
-```bash
+```
 source venv/bin/activate
 ```
 
 Install Python requiements
-```bash
+```
 pip install -r requirements.txt
 ```
 
-### Step 5: Configure VS Code
+**Note:** You can deactivate the Python virtual environment by running `deactivate`.
+
+### Step 5: Install VS Code extentions
 
 #### Installing Plugins
 - [ES Lint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) for JavaScript linting
@@ -65,7 +78,30 @@ Optionally:
 - [Remote - SSH](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-ssh) for directly editing files on remote machine
 - [Markdown Preview GitHub Styling](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-preview-github-styles) for previewing Markdown as it will appear on GitHub
 
-#### Configuring Environemnt
-- Python will need some workspace and debugger configuration to work. See [Getting Started with Python in VS Code](https://code.visualstudio.com/docs/python/python-tutorial) for more info.
-- Remote - SSH will requires hosts to be added to your SSH config file. See [this guide](https://linuxize.com/post/using-the-ssh-config-file/) for more info.
-- ES Lint, Babel JavaScript and Markdown Preview GitHub Styling will work without further configuration
+## Configuring Environemnt
+ES Lint, Babel JavaScript and Markdown Preview GitHub Styling will work without further configuration
+
+### Step 1: Configure VS Code's Python Extension
+Create a folder called .vscode in the project root
+```
+mkdir .vscode
+```
+
+Create a file in the .vscode folder called settings.json
+```
+nano .vscode/settings.json
+```
+
+Add the path to the virtual environment Python interpreter
+```
+{
+	"python.pythonPath": "./api/venv/bin/python3"
+}
+```
+For more information on the Python extension and details on how to use the debugger see: [Getting Started with Python in VS Code](https://code.visualstudio.com/docs/python/python-tutorial) for more info.
+
+### Step 2: Configure Python Docstring Generator
+In Settings > Extensions> Python Docstring Generator set the Custom Template Path to `./docstring-format.mustache`
+
+### Step 3 (Optional): Configure Remote - SSH Plugin
+Remote - SSH will requires hosts to be added to your SSH config file. See [this guide](https://linuxize.com/post/using-the-ssh-config-file/) for more info.