Getting Started Dev

Development Setup

We recommend the following tools to develop.

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://localhost:3001/' # the ip and the port of api of our backend
   SOCKET_URL='http://localhost:3002/' # the ip and the port of the socket in our backend
   
   # Frontend Host
   FRONTEND_HOST='http://localhost:3000' # 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:

# ---------------------- MONGODB ----------------------------
MONGO_URI=mongodb://root:asdasd@localhost # the db connection string
MONGO_DBNAME=backend # the name of our mongodb

# -------------------- APP SETTINGS -------------------------
APP_BACKEND_PORT=3001 # the port of our backend
APP_SOCKET_PORT= # the port of our socket - If you want the Socket to run on the same Port (which is required by some providers like Heroku), just leave this empty>
APP_JOINCODE_LENGTH=8 # the length of the join-codes
   

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