/0923-paris-js-p2-apiCars

Primary LanguageJavaScriptMIT LicenseMIT

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 or pnpm, adapt the config/cli in package.json
  • Run command npm install (or equivalent using yarn or pnpm)
  • Create environment files (.env) in both backend and frontend: 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, or pnpm.

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