This repository has been archived by the owner on Mar 27, 2023. It is now read-only.
Integrate Webpack for Javascript builds #18
Closed
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
Make docker development great again
type=text/javascript has not been required in a long time already. Time to stop using it
If really necessary could be done a lot more elegantly than this.
This way it will later be possible to remove the bind mount in production and keep it in dev.
Forgot to save before commit..
4 tasks
|
@Baschdl this now based on easier-deploy branch |
maltezacharias
added
the
blocked
|
Waiting for #21 to be merged |
Co-authored-by: Kevin Yuan <[email protected]>
Co-authored-by: Kevin Yuan <[email protected]>
Co-authored-by: Kevin Yuan <[email protected]>
5 tasks
Frontend container is only necessary for development and once during build of the production container. As we no longer have bind mounts in the production container to the code outside we don't need to be able to recreate javascript bundle files at runtime. These should be generated once when building the image and committed to the docker image. Moving the Dockerfile to the top-level allows for multi-stage builds of the backend container enabling us to use a throwaway frontend container to build a bundle and include this in the final backend container for a streamlined production setup. The separate frontend dockerfile is still included as this will allow us to use it for local development and also possibly with a further override file for bind mounting in a mixed development in production environment setup.
Removing the necessity for a frontend container for webpack. Instead uses a multi-stage build and creates an intermediary container in which the javascript bundles are built. The created bundles are copied to the backend docker during the build process and indexed. For production frontend containers are no longer necessary and there are no start-up-order issues anymore. For development a frontend container is still used, as webpack will watch and rebuild the bundle in development mode as soon as a file is changed. Co-authored-by: Kevin Yuan <[email protected]>
maltezacharias
removed
the
blocked
|
Will recreate this on a new branch for improved reviewability |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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.
Fixes #17, builds on #21
General idea
Adds new Build process for Javascript
This PR implements a new way to handle Javascript resources in the application.
Javascript modules are written inside /frontend/src. A bundle is created for every module found directly in the src folder.
Django is enhanced with the webpack-loader, that provides a render bundle tag, which automatically loads the created bundles.
Production mode
During Docker build (docker-compose -f docker-compose.yml -f docker-compose.prod.yml up --build) an intermediate frontend container is created, webpack is run, bundles are created and copied over to the final backend container. This way the finished container already has the bundles inside the image and no frontend container is needed.
Development mode
A frontend docker container is provided in the override file (used by docker-compose up --build) and continues to run a webpack instance, which watches for file-changes in the frontend/src folder. When changes are detected the JS bundles are rebuilt automatically