NGINX w/ Static Files (React Vite)

This is a demo of a single-container app that follows a professional and a production-grade CI/CD workflow using NGINX as a prodcution server to serve static SPA React app files generated by Vite.

The deployment workflow below will run every time we open a pull request from a feature branch into main branch. GitHub Action will start the tests, and if tests pass the code will be automatically deployed to an AWS ElasticBeanstalk application.

Production Grade CI/CD Workflow:

Development Phase

• Changes made on a feature branch and pushed to GitHub.
• Then a Pull Request is created to merge our changes into main.
• Development server is used to run the app in development mode on our local machines.

Testing Phase

• Tests run in a CI server like Travis CI or GitHub Actions.
• Once tests pass, we move to the next phase. If they fail, developers redo their changes and open a new PR.

Production Phase

• New code is merged into main to production
• NGINX is the production server responsible for serving the Vite React app.

Tools of The Trade

Docker was used in production to build the container in AWS ElasticBeanstalk, while Docker Compose was used locally during development along with Docker volumes to synchronise changed files and .

• AI-generated tests
• Default SPA React app generated by Vite
• NGINX Docker image