Setting up the Development Environment

Clone the Attribution Backend Repository

1. Download and install SmartGit

2. Navigate to https://bitbucket.org/yardcardiff/ in the browser, and locate the attribution-backend repository.

   

3. Click on 'Clone' at the top right-hand side of the screen, and copy the given URL:

   

4. In SmartGit, go to Repository -> Clone, and paste the URL into the 'Repository URL' field under 'Remote Repository'.

   

   • Be sure to remove the 'git clone' command from the beginning of the copied URL.

5. Press 'Next' twice, choose a path for the local directory, for example D:\attribution-backend, then press 'Finish'.

6. You will now have a local copy of the repository in your chosen local directory.

7. At this time, our most up-to-date branch is the development branch, as opposed to master. You will need to check out this branch before continuing. In SmartGit, find the development branch in the branch browser (you'll find it under origin/development) and right click. Select Check Out from the context menu.

8. You should now see something similar to the following in SmartGit.

   

Vagrant

1. Download and install Vagrant and Oracle VM Virtualbox.

2. Open the repository in a text editor (such as VSCode), and create a file called .backend.yml in the project root (in the same location as Vagrantfile), containing the following (ask your manager for the correct credentials):

   backend_database:
       protocol: tcp
       address: db address
       name: db name
       port: port
       user: username
       pass: password
   your_email: email address
   your_password: password of your choice
   

3. Open your Terminal/Command Prompt, and navigate to your repository (e.g. cd D:\attribution-backend).

4. Type the command vagrant up. This will create and start a Vagrant development environment for the project. If successful, you will be able to view the environment in Oracle VM Virtualbox:

   

5. Once the Vagrant development environment has finished setting up, you can navigate into it via ssh with the command vagrant ssh

Debugging

The Django development server should start automatically when the Vagrant development server is started. If you need to check whether the Django development server is running, you can type the command sudo journalctl -u backend (ssh into the Vagrant development environment first).

Changes to Vagrantfile

If you make any changes to the Vagrantfile, such as adjusting the ports, you will need to restart the backend with the command sudo service backend restart after you have ran vagrant reload.

React

1. Navigate to the React/dashboard folder inside of your local repository cd D:\attribution-backend\react\dash

2. Ensure Node.js and required dependencies are installed¹

3. Run NPM install using npm i

4. Run NPM start using npm start

5. You should be able to access dashboard using http://localhost:3000

6. You can login into the http://localhost:3000 with the email and password that you set in the .backend.yml file as your_email and your_password.

Screenshot of the login page

Common Problems

Unable to login or 502 response in the console while logging in

This usually means that the backend/Django service has crashed and needs to be restarted. You can do this by logging into the vagrant box vagrant ssh and restarting the service sudo service backend restart.

Symlink error while npm install

When you try to run npm install from Vagrant terminal, you might face syscall symlink error. To troubleshoot this error open up any CLI terminal as a administrator and run vagrant up and then do vagrant ssh into your VM. Finally run npm install to install node packages.

---

1. You may also need to install Python 2.7 to install certain packages (node-sass). Also ensure that both are added to your system path. ↩