# Virtual Box Setup Instructions ## Getting started 1. Follow the instructions to run the Lubuntu Virtual Machine on Vbox as seen on the guide in [WebCMS](https://webcms3.cse.unsw.edu.au/COMP9900/22T1/resources/71194). 2. Clone the git repository or transfer the project directory into the virtual machine using your own method. 3. Enter the project directory with `cd capstone-project-3900-w11b-meerkats` ## Setting up the backend 1. Enter the backend directory with `cd backend` 2. Run `sudo apt install python3-pip` to **install pip** 3. Set up and run the **virtual environment** - Run `pip3 install virtualenv` to install virtual environment module - Run `python3 -m virtualenv venv/` to set up the virtual environment - Run`source venv/bin/activate` to start the virtual envrionemt 4. Run `pip3 install -r requirements.txt` to install required modules 5. Run `bash runFlask.sh backend` to start the flask server ## Setting up the frontend 1. Create a new terminal window (the backend server should still be running in the other window) 2. Enter the project directory again, and change to the frontend directory using `cd frontend` 2. Change to the frontend directory 2. Run `sudo apt install nodejs` to **install Node** 3. **Upgrade** to the latest version of Node - Run `sudo apt install curl` to install curl - Run `curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash` to install nvm (node version manager) - Run `source ~/.bashrc` to recognise the changes - Run `nvm install --lts` to upgrade to the latest version of Node 4. Run `npm install` to **install all dependencies** for the React project 5. Run `npm start` to **start the development server** 6. If a browser doesn't open automatically, open it manually and visit the following URL: http://localhost:3000/ 8. View the app in a **mobile screen size** (since target users will likely be on mobile) - At the localhost page from before, right click anywhere on the page and click 'Inspect element' in the dropdown - Click on the phone icon located at the top of the dev tools - Open the devices dropdown at the top middle (it starts with 'Responsive' by default), and click on 'iPhone 11 Pro Max' - You can alternatively drag the edges to resize it manually