Getting Started Dev

Development Setup

1. Clone the repo git clone https://github.com/BuchholzTim/Whitebird.git.

MongoDB

1. Navigate to the docker folder in the project. There are two folders whitebird_dev and whitebird_prod. For development we only need the whitebird_dev. For development purposes we only need a running MongoDB.

2. In the whitebird_dev folder you can find a docker-compose.yml. You can customize the parameter in that file for your need or use the default values.

3. To start the application just use docker-compose up -d to run the MongoDB.

4. Our project structure is parted in two folders frontend and backend.

Frontend

1. Navigate to the frontend folder cd frontend.

2. Install the dependencies with yarn install.

3. Copy .env.bak to .env in the same folder and change its contents to match your configuration:

   # Backend Server Location
   API_URL='http://backend:3001/' # the ip and the port of api of our backend
   SOCKET_URL='http://backend:3002/' # the ip and the port of the socket in our backend
   
   # Frontend Host
   FRONTEND_HOST='http://localhost:40000' # the ip and the port needed for for the link shown to share a whiteboard

4. Run the frontend with yarn dev.

5. The frontend is now reachable under http://localhost:3000

Backend

1. Install the dependencies with yarn install.

2. Run the backend with yarn start:dev.

3. Copy .env.bak to .env in the src/config-folder and change its contents to match your configuration:

   # ---------------------- MONGO DB ---------------------------
   mongo_uri=mongodb://root:asdasd@mongodb  # the db connection string
   mongo_dbname=backend  # the name of our mongodb
   
   
   # -------------------- APP SETTINGS -------------------------
   app_backend_port=3001  # the port of our backend
   app_joincode_length=8  # the length of our joincodes
   

4. The API-Swagger documentation is now reachable under http://localhost:3001/api.

Used Development Tools

Package Manager:

• Yarn -> You can still use npm. But we decided to use yarn as it produces a cleaner output and generally seems to be faster than npm. Though, if you decide to go with npm you might need to change some things regarding the Dockerfiles, which we won't cover here.

VSCode Extensions for developing:

required:

• Prettier -> Code Formatting
• ESLint -> Code Linting
• Vetur -> Typescript Server for Vue

recommended:

• Env -> Highlighting .env-Files