jstemplate-demo

This project uses Harmonia. Harmonia is a framework meant to serve as a foundation for every project following the React-Express-MySQL stack, as learned in Wild Code School. It's pre-configured with a set of tools which'll help students produce industry-quality and easier-to-maintain code, while staying a pedagogical tool.

Setup & Use

Windows users: be sure to run these commands in a git terminal to avoid issues with newline formats:

git config --global core.eol lf
git config --global core.autocrlf false

• In VSCode, install plugins Prettier - Code formatter and ESLint and configure them
• Clone this repo, enter it
• Run command npm install
• Create environment files (.env) in both server and client: you can copy .env.sample files as starters (don't delete them)

Available Commands

• db:migrate : Run the database migration script
• db:seed : Run the database seed script
• dev : Starts both servers (client + server) in one terminal
• dev:client : Starts the React client
• dev:back : Starts the Express server
• lint : Runs validation tools (will be executed on every commit, and refuse unclean code)

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 server will be accessible. The root path "/" will redirect to the dist folder of your client. In order to allow that, please uncomment the line as explained in server/src/app.js (Line 102). Because the server will also serve the client, the global variable VITE_SERVER_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 your repo. During the build of the projet (docker-entry.sh), the node migrate.js command is executed in the server. If you want to seed automaticaly your database using the seed.js script, replace the cd ./server && node ./bin/migrate.js && node index.js by cd ./server && node ./bin/migrate.js && node ./bin/seed.js && node index.js

About public assets (pictures, fonts...)

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

About Specific Environment Variables (e.g., Email)

Students should use the template provided in the *.env.sample* file as <PROJECT_NAME><SPECIFIC_NAME>=<THE_VARIABLE>.

⚠️ Warning: The PROJECT_NAME should match the one used in the Git public variable.

To add it during deployment, follow these 2 steps:

• Add the following variable to the docker-compose.prod.yml file (as shown in the example: PROJECT_NAME_SPECIFIC_NAME: ${PROJECT_NAME_SPECIFIC_NAME}).
• Connect to your server via SSH. Open the global .env file in Traefik (nano ./traefik/data/.env). Add the variable with the correct value and save the file.
• Afterward, you can initiate automatic deployment. Docker will not refresh during this process.

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.