WildCodeSchool / js-template-fullstack

pedagogical template for React-Express-MySQL projects

Concept

This template is meant to serve as a foundation for every P2/P3 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

Project Initialization

• 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 backend and frontend: 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 (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)

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 your 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.