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
- If you are using
yarn
orpnpm
, adapt theconfig/cli
inpackage.json
- Run command
npm install
(or equivalent usingyarn
orpnpm
) - Create environment files (
.env
) in bothbackend
andfrontend
: you can copy.env.sample
files as starters (don't delete them)
Before you start
- To ensure compatibility and prevent conflicts, please consistently employ a single package manager:
npm
,yarn
, orpnpm
.
Available Commands
db:migrate
: Run the database migration scriptdb:seed
: Run the database seed scriptdev
: Starts both servers (frontend + backend) in one terminaldev-front
: Starts the React frontend serverdev-back
: Starts the Express backend serverlint
: 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 for frontend.
The backend subdomain will be automatically created with the suffix -backend. The global variable VITE_BACKEND_URL will be automatically created and pre-filled on the basis of this information.
Use this same tab to add the other environment variables required for the project if any.