How to Develop Locally

This article will walk you through how to set up and develop Jobs Board locally.

Setting Up

Clone the jobs-board repo.
git clone https://github.com/csesoc/jobs-board.git
Download Docker Desktop from https://www.docker.com/products/docker-desktop/

Starting up the Frontend

Navigate to /frontend and run install the dependencies.
cd frontend/ yarn install
Start up the frontend
yarn run dev
You should see this:
Open a browser and navigate to http://localhost:8080/ . You should be able to see this:

If you want to see changes that you’ve made to the frontend without needing to start up the backend using docker,

Look at the page that you are working on. In this example, I’ll use the CompanyAddJobPage as a reference.
Notice which template the page is using. For this page, it’s using the StudentViewTemplate.
Navigate to StudentViewTemplate and scroll down to the javascript portion of the code.
Change the route to the CompanyAddJobPage URL.
Once that’s done, you can proceed to start up the frontend as shown in the previous section above and navigate to the CompanyAddPage URL

Starting up the Backend

Navigate into the backend folder.
cd backend/
You will need to have a .env file in the root of the backend folder (ie: in /backend). Start by creating one.
Modify the .env file to include the postgreSQL related data.
NODE_ENV=development SERVER_PORT=8080 DB_HOST=db DB_PORT=5432 DB_USER=postgres DB_PASSWORD=mysecretpassword DB_NAME=postgres
Start up the database by navigating into /backend and booting up docker.
docker compose up -d db
Open 2 more terminals and run:
# 1st terminal cd ../frontend/ yarn run dev # 2nd terminal yarn run serve

Make sure that the apiRoot in /frontend/config/config.ts points to the local instance.

Starting up Tests

Navigate to the root of the project (ie: /) and run:
docker-compose build docker-compose up db/ api/ tests

2. Use the logs in the terminal or the Docker Desktop GUI to check your tests.

The reason docker is used when testing is because we're given a guarantee that the conditions are exactly the same every time and because it emulates what the behaviour will be on prod running in the container - which there are difference

How to Run Docker for Development Work

Ensure that you are signed into Docker.
Navigate to your .env file (should be in the root of the repository) and add the following:

NODE_ENV=development
SERVER_PORT=8080

3. Navigate to config.ts and ensure that apiRoot points to the local instance.

 // apiRoot: "https://jobsboard.csesoc.unsw.edu.au/api",
 apiRoot: "http://127.0.0.1:8080"

4. Navigate to root and run

$ docker-compose build
$ docker-compose up [container_1] [container_2] [container_3] ...

5. If you made minimal changes and want to start docker up with minimal fuss,

$ docker-compose up --build [container_1] [container_2] [container_3] ...

6. Hopefully, everything should be up and running smoothly.

Since our migration from mySQL to postgreSQL, there are instances where the db container loads at a slower speed compared to the api. This will cause the api to crash and exit. If this is the case, don’t panic, give it a few seconds and either docker-compose up api or press start on the api container in the Docker GUI. Or if you see a line in the logs that say the db is ready for connections, then that’s your cue to start up the api again.

How to Run Docker for Production Work

Only use this section if you are working on a function that needs the mail queue initialised.

This assumes that you are using Gmail as the test account when trying to send emails.

Ensure that your 2-FA for Gmail is enabled.
Generate an App Password by following this https://support.google.com/mail/answer/185833?hl=en (Focus on the “Create & Use App Passwords” section).
Navigate to the docker-compose.yml file and add this in under the api environment:

  - NODE_ENV=production
  - SERVER_PORT=8080
  - JOBS_BOARD_API_URL=http://127.0.0.1:8080
  - MAIL_SMTP_SERVER=smtp.gmail.com
  - MAIL_SMTP_SERVER_PORT=465
  - MAIL_USERNAME=<REPLACE WITH YOUR EMAIL ADDRESS>
  - MAIL_PASSWORD=<REPLACE WITH YOUR APP PASSWORD FROM STEP 2>

4. Navigate to

config.ts and ensure that this line is uncommented and comment out the actual apiRoot

 // apiRoot: "https://jobsboard.csesoc.unsw.edu.au/api",
 apiRoot: "http://127.0.0.1:8080"

5. Navigate to

mail.ts and set line 54 to true

const transportOptions = {
  host: process.env.MAIL_SMTP_SERVER,
  port: parseInt(process.env.MAIL_SMTP_SERVER_PORT, 10),
  secure: true, <========= Set this to true
  auth: {
    user: process.env.MAIL_USERNAME,
    pass: process.env.MAIL_PASSWORD,
  },
  requireTLS: true,
};

Jobsboard