Organized for Deployment
A model of how you can set up your project for development, testing & deployment.
Contents
General
Configuration
This application reads the secrets from a .env file at the root of this project. A secret is something you don't want to commit to a public repository. The password for your database for instance. A node package dotenv is used to read and parse this file and provides an interface we can use.
Create a file called .env to the root.
DB_HOST=YOUR_IP_OR_DOMAIN
DB_NAME=YOUR_DATABASE_NAME
DB_USER=YOUR_DATABASE_USER
DB_PASSWORD=YOUR_DATABASE_USER_PASSWORD
JWT_SECRET=A_JWT_SECRET_A_RANDOM_STRING_OF_CHARACTERS
DB_HOST A domain or IP the host of your database.
DB_NAME The name of your database. The application will connect to this database.
DB_USER User used to authenticate to the database. Typically a user called root is created in MySQL. Although it is not recommend to use that user in production.
JWT_SECRET Within the app a standard called JWT is used to manage authorization. This requires a random complicated password like string to sign tokens.
Development
Getting started
Make sure you configure your secrets in line with your development environment. See the configuration section.
Install backend dependencies.
npm install
Install frontend dependencies
yarn install
Database
Your application will need to persist data. The interaction with the database is abstracted by an ORM (Object role modelling) called Sequalize .
Make sure you configure your secrets in line with your development environment. See the configuration section.
You can create the database and tables by running the sync.js script.
node api/scripts/sync.js
Optionally you can seed the tables with some test data by running:
node api/scripts/seed.js
API (Backend)
To develop just the API separately from the frontend run:
npm run dev-apiThis will run your api as though it were part of the full live project. All routes will be have api/ appended before them and a get request to / will return the string "frontend"
Client (Frontend)
To develop just the frontend separately from the API run:
npm run dev-clientDISCLAIMER! this will only work if you have set up a mock-api
Full App
You can also develop the frontend and API in parallel by running:
npm run devThis script will run the frontend and backend on separate ports, the backend on localhost:5000 with nodemon. The frontend will be run using create-react-app's start script, redirecting all API calls to localhost:5000.
Deployment
The main index.js in this directory is for deployment. It provides access to your api behind /api and statically serves the client from /client/build. You can copy-paste this file directly, there should be need to modify it for your project.
In order for your project to run on Heroku, the main package.json needs a start command. This is already taken care of for you.
Mock
To mock deployment on your local machine you can run these commands. The app will build and run the same as it will on Heroku to help you troubleshoot your deployed project locally.
npm run heroku-postbuild
npm run startGetting started
Create a Heroku account and install the Heroku cli. Verify the installation with
heroku statusInitialize Heroku inside the project folder by using:
heroku createNote it is likely you want to create the app with some options, a useful for the project.
Manual
You can deploy your project from your local machine by pushing to the Heroku master repository.
git push heroku master
Testing
To locally execute your tests, run the following commands
Frontend
cd client
npm install
npm run test:watchBackend
cd api
npm install
npm run test:watchContinuous integration
Test run on each commit on the master branch using Github actions. The configuration can be found in .github/workflows/node.js.yml.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent