build(react): set up Docker image for prod and dev #2675
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
increases developer friction, containers should remain backend-only, frontend can be started separately and still work due to proxy.
prevents warnings being treated as errors
not needed for React branch for now
text debt... too many places in our codebase uses devDependencies...
The backend uses CSP to prevent inline scripts in HTMLs. By default, Create React App will embed the runtime script into index.html during the production build. When set to false, the script will not be embedded and will be imported as usual. This will allow express to load the script as usual
This reverts commit dc2d815.
artifacts from the past, ended up not dockerizing the client
# Conflicts: # frontend/config-overrides.js # package.json
mantariksh
reviewed
Sep 2, 2021
| @@ -0,0 +1,86 @@ | |||
| os: linux | |||
There was a problem hiding this comment.
actually why not take this opportunity to use GA for deployment? if not we'll have to migrate again in future
There was a problem hiding this comment.
this is just copy pasted from the old code; still waiting on @tshuli for the GA portion, didn't want to supersede his work
mantariksh
reviewed
Sep 2, 2021
mantariksh
reviewed
Sep 2, 2021
mantariksh
approved these changes
Sep 2, 2021
This was referenced Sep 6, 2021
This was referenced Oct 4, 2022
Merged
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Problem
This PRs sets up the Docker containers for both prod and dev.
Development mode
In development mode, docker-compose only builds the backend dependencies such as the server, localstack, and the database.
Since client should (ideally) be completely separate from the server, we can start the frontend independently from the server. This allows for better DX in terms of hot reloading, not needing to rebuild the Docker image when we update npm packages, etc.
To start the server, run Docker as per normal with
npm run devin the root folder (or just docker-compose up)To start the client, go into
/frontendand runnpm start.To view the client, go to
localhost:3000. Even though our server will be running onlocalhost:5000, there is aproxyparameter infrontend/package.json(courtesy of create-react-app) that will proxy all API calls on 3000 to port 5000 automatically. This only happens on development mode.Production mode
Dockerfile.production has been modified to work and build correctly.
Whilst doing so, encountered a couple of obstacles, such as the styleSrc CSP headers needing to be
'unsafe-inline'due to the usage of emotion. This may be temporary if we want to run a postbuild script that adds a template variable for a nonce into the built index.html that create-react-app creates.Closes #1904