It's important to understand the big piocture of what we are trying to do with this. The diagram below shows the path http requests come in from the browser when trying to get data from the web app. If we don't understand this overall path and what we are trying to achieve, we risk getting stuck cargo coding bits and pieces from various tutorials and don't really know how to fix issues/keep up to date.
Before getting into this, make sure you completely understand this https://flaviocopes.com/http-request/
With each step, be very careful to ensure it is repeatable and designed to pull in the latest LTS (long term support) version of the dependancies. No good needing to update the docker configuration each time a new version of node, nginx, your choosen linux distro comes out.
-
Get React running with a stand alone server as per https://create-react-app.dev/docs/deployment/
-
Make sure react and express still talk to each other
-
Make a list of the URL patterns which are being served from your backend app (i.e. URLs should start with patterns like
/api/*and/images/*). This is so we can create routing rules to know if requests from the browser should go to the front end or the back end. -
Get nginx running as a reserve proxy. Basically nginx is your butler, that http requests on port 80 (the default http port), and looks at the URL, if it is
/api*or/images*, directs the request to the backend (i.e. express), otherwise send it to the front end (i.e. react). -
Get nginx, react and express all running in a docker container.
-
Deploy the latest code to AWS, build and run the container and check it's getting served up on port 80. Ensure port 80 is open.
- Lint your code!
- Code review from hell.
- Run over https...using letsencrypt to handle SSL certificates.
- Make work with Auth0
- Use postgres to manage your data
- Add unit (Jest) and acceptance tests (Nightwatch)
- Get your first coding job!
- Host images in S3
