diff --git a/Dev Environment Setup Guide.md b/Dev Environment Setup Guide.md index dce5e06..ca7a484 100644 --- a/Dev Environment Setup Guide.md +++ b/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`: **THIS IS NON-REVERSABLE**: 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 \ No newline at end of file +## 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. \ No newline at end of file