react-express-template

The application runs inside a docker container, and uses:

• Node.js with TypeScript language

• eslint to analyze code

• Nodemon to automatically update the server

• Express backend

• React frontend

• Mongodb database

• Tailwind CSS for styles

• CORS for safe Cross-origin resource sharing via a whitelist

• Docker for deployment

Environmental variables such as ports are stored in .env

Docker

To build the docker container run

npm run buildfront 
docker build -t example-microservice . 

And then run the container, it will take some time the first time

docker run -dp 3001:3001 -p 3002:3002 example-microservice

You can then connect to localhost:3001 to access the backend and localhost:3002 to connect to frontend. It will take a while (1 minute) to load the forntend.

Stop the container

docker ps 
docker stop <CONTAINER_ID>

See logs

docker ps 
docker logs <CONTAINER_ID>

---

Testing

You need npm installed, then run npm install to Install required dependencies. If It asks to install more packages during the first build, just say yes.

To run the backend

npm run startback

To run the frontend

npm run startfront

Run Both

npm run start

---

Production

To build for Production, run

npm run buildfront 
npm run production

---

Project structure

• backend/: everything backend
  • routes/: folder containing a file for each route
  • server.ts: the main server script
• build/: production app generate after npm run startbuild
• dist/: needed for typescript
• public/: all static data needed to run the application
• src/: source code
  • components/: react's components
  • assets/: assets for frontend such as images
  • index.tsx: main react file

A list of all the commands I used to make this template can be found in commands/ Tested on Archlinux, linux kernel 6.7.6

TODO

• Base project + Express
• Typescript and eslint
• React
• React error handling
• Docker
• CORS
• Environmental Variables