MAKE SENSE

Concept

This project is the result of 8 weeks of hard work of 4 students developers for the french association Make Sense. It's an online platform reserved to Make Sense's employees so they can share ideas to improve the organization in any way.

Setup & Use

Project Initialization

• Clone this repo, enter it
• Run command npm install
• Create environment files (.env) in both backend and frontend: you can copy .env.sample files as starters
• Run npm run dev in your terminal

Available Commands

• dev : Starts both servers (frontend + backend) in one terminal
• dev-front : Starts the React frontend server
• dev-back : Starts the Express backend server
• lint : Runs validation tools (will be executed on every commit, and refuse unclean code)

TEMPLATE FAQ

Tools

• Concurrently : Allows for several commands to run concurrently in the same CLI
• Husky : Allows to execute specific commands that trigger on git events
• Vite : Alternative to Create-React-App, packaging less tools for a more fluid experience
• ESLint : "Quality of code" tool, ensures chosen rules will be enforced
• Prettier : "Quality of code" tool as well, focuses on the styleguide
• _ Airbnb Standard_ : One of the most known "standards", even though it's not officially linked to ES/JS

Deployment with Traefik

⚠️ Prerequisites : You must have installed and configured Traefik on your VPS beforehand. https://github.com/WildCodeSchool/vps-traefik-starter-kit/

For deployment, you have to go to secrets → app actions on the github repo to insert via New repository secret :

• SSH_HOST : IP address of your VPS
• SSH_USER : SSH login to your VPS
• SSH_PASSWORD : SSH connection password to your VPS

And a public variable from the tab /settings/variables/actions :

• PROJECT_NAME : the name of the project used to create the subdomain.

⚠️ Warning : underscores are not allowed. They can cause trouble with the let's encrypt certificate

Use this same tab to add the other environment variables required for the project if any.

Only the backend will be accessible. The root path "/" will redirect to the dist folder on your frontend. In order to allow that, please uncomment the line as explain on backend/src/app.js (Line 102). Because the backend will serve the front, the global variable VITE_BACKEND_URL will be set with an empty string.

Your url will be https://${PROJECT-NAME}.${subdomain}.wilders.dev/.

About the database

The database is automaticaly deployed with the name of the repo. During the build of the projet (docker-entry.sh), the node migrate.js command is executed in the backend. If you want to seed automaticaly your database using the seed.js script, replace the command build on you backend/package.json by node migrate.js && node seed.js.

About public assets (pictures, fonts...)

Don't use any public folder on your frontend. This folder won't be accessible online. You may move your public assets in the backend/public folder. Prefer static assets when possible.

About Logs

If you want to access the logs of your online projet (to follow the deployement or to watch any bug error), connect to your VPS (ssh user@host). Then, go on your specific project and run  docker compose logs -t -f.