Cassiopee-Bureau-Mobile / website

Website created with NextJS to handle JupyterHub and OpenVPN services with users

Installation

Requirements

Software

• Docker
• Git
• Python3

Email

To send emails, you need to have a gmail account well configured.

• You need to have a gmail account. The email will be used as EMAIL_USER in the .env file.

• Create a gmail project on the google cloud platform.

  • You can follow this tutorial to configure your gmail account up to the part where it switches to the Email Engine website.
    • Details:
      • You need to create a project on the google cloud platform.
      • Go to APIs & Services > Credentials. (You will need to create a project if you don't have one)
      • Then, you need to create an OAuth 2.0 Client ID.
      • Get your Client ID, EMAIL_CLIENT_ID in the .env file.
      • Get your Client Secret, EMAIL_CLIENT_SECRET in the .env file.

• Then you need to get an app password.

  • For this, you need to go to your google account settings.
  • Then, you need to go to the security tab.
  • Activate the two-step verification.
  • You need to go to the app password section.
  • You need to generate a password for the app. (Select other and give it a name), will be used as EMAIL_PASSWORD in the .env file.

Configuration

$ git clone https://github.com/Cassiopee-Bureau-Mobile/website --recurse-submodules

Then you need to update the ansible submodule to the latest version.

$ cd website
$ git submodule update --remote --merge

Then you need to create a .env file in the docker folder.

$ cd docker
$ nano .env

You need to fill the .env file with the following information:

#Secrets
POSTGRES_PASSWORD=your_password (you can generate it with openssl rand -hex 32)
NEXTAUTH_SECRET=your_secret (you can generate it with openssl rand -hex 32)

# SSL
HOST=example.com

# Email
EMAIL_USER=
EMAIL_CLIENT_ID=
EMAIL_CLIENT_SECRET=
EMAIL_PASSWORD=

SSL

You will need to have a SSL certificate to deploy the application. You need to generate a certificate and a key for your website (for example example.com) and put them in the docker/ssl folder, with the name:

• example.com.crt
• example.com.key

Deploy

$ docker compose -f docker-compose.yml -f docker-compose.prod.yml build
$ docker compose -f docker-compose.yml -f docker-compose.prod.yml up -d

Try those with sudo if you got a permission error.

Setup the database

Try those with sudo if you got a permission error, especially for the docker exec commands.

$ docker exec -it cassiopee-frontend /bin/sh
$ npm run deploy
$ ./node_modules/.bin/ts-node --compiler-options {\"module\":\"CommonJS\"} prisma/prod-seed.ts ADMIN-PASSWORD-TO-CHANGE

The first command will open a shell inside the container. The second command will deploy the database. The third command will seed the database with the admin user. You need to change the password.

Debug

Logs

You can view the logs of ansible inside the logs folder.

Development

Requirements

Software

• Docker
• Ansible

Configuration

$ git clone https://github.com/Cassiopee-Bureau-Mobile/website --recurse-submodules

Then you need to update the ansible submodule to the latest version.

$ cd website
$ git submodule update --remote --merge

Then you need to create a .env file in the docker folder and in the frontend folder.

$ cd docker
$ nano .env

You need to fill the .env file with the following information:

#Secrets
POSTGRES_PASSWORD=your_password (you can generate it with openssl rand -hex 32)
NEXTAUTH_SECRET=your_secret (you can generate it with openssl rand -hex 32)

If you want you can add the following information:

# Email
EMAIL_USER=
EMAIL_CLIENT_ID=
EMAIL_CLIENT_SECRET=
EMAIL_PASSWORD=

But it's not necessary, you will be juste be warn that you can't send email and the email will be saved in the logs folder under the folder email.

Then copy the .env file in the frontend folder.

$ cp .env ../frontend

SSL

You will need to follow the instrcutions inside Readme-SSL to setup your computer to use own signed certificates. You will find the deployed development website under the domain safeofficeanywhere.dev.

Start the development environment

You can start the development environment with the following command:

$ ./DeployDocker.sh

In case you need to reset the database, simply do :

$ cd frontend
$ npm run reset-db

To monitor the database, you can use the following command:

$ cd frontend
$ npx prisma studio

Follow Readme-Frontend to have more information about the frontend.

Test the application

Only a few tests have been written for the moment, but you can run them with the following command:

$ cd frontend
$ npm run test

Code quality

You can run the linter with the following command:

$ cd frontend
$ npm run lint

You can run the formatter with the following command:

$ cd frontend
$ npm run format