deploy: Update js and css with hashes in filenames #240
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
|
firebase-deployment for f53b5e3 |
camh-
reviewed
Jan 10, 2024
Update js and css with hashes in filenames on deployment so that we can have
very long (1 year) cache expiry. If the contents of the file change so will
the hashes and the hashed filenames.
In order for JS files to import correct hashed JS modules, generate importmap
in HTML, e.g.:
<script type="importmap">
{
"imports": {
"./module/editor.js": "./module/editor.11738c78.js",
}
}
</script>
This import statement in index.js
import Editor from "./module/editor.js"
will then load the correct version of editor.js.
This commit is complete with regards to creating hashed filenames, however
there is still work left to do to account for relative CSS and JS file
references in HTML files, such as "../../css/index.css".
Finally, pull it all together by marking file paths matching "**/*.*.@
(js|css)", i.e. JS and CSS filenames with a hash in their path as maximum
cacheable with a 1 year expiry in firebase.json.
Cache-control: max-age=31536000 headers can be observed on
(preview) deployments.
Link: https://jakearchibald.com/2016/caching-best-practices/
Link: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap
Issue: evylang/todo#45
camh-
reviewed
Jan 10, 2024
.github/workflows/cicd.yaml
Outdated
| runs-on: ubuntu-latest | ||
| environment: stage | ||
| steps: | ||
| - uses: actions/checkout@v3 |
There was a problem hiding this comment.
cool. i snuck it into the last commit.
Makefile
Outdated
| # BASEURL needs to be in the environment so that `e2e/playwright.config.js` | ||
| # can see it when the `e2e` target is called. | ||
| export BASEURL = https://evy.dev | ||
| # The firebase-deploy script sets BASEURL to the deployment URL on GitHub CI. | ||
| SERVEDIR_PORT ?= 8080 |
There was a problem hiding this comment.
needs an export for servedir to see this var
Run e2e tests against preview deployment on PRs and against https://evystage.dev, then https://evy.dev on merge to master. When run on CI the firebase_deploy script sets BASEURL_PREFIX environment variables in the GITHUB_ENV environment, e.g.: BASEURL_APEX=https://evy-lang-stage--dev-mtnwzsbm.web.app BASEURL_DISCORD=https://evy-lang-stage-discord--dev-pap726z0.web.app BASEURL_DOCS=https://evy-lang-stage-docs--dev-62qb1rk7.web.app BASEURL_LEARN=https://evy-lang-stage-learn--dev-txkb2kn8.web.app BASEURL_PLAY=https://evy-lang-stage-play--dev-t9r8zjux.web.app `make e2e` then picks them up and runs the end-to-end tests against them. `make e2e` run locally will use http://localhost:8080 be default. Update `make serve` to serve on http://localhost:8080 by default. Update github workflows to run e2e tests in separate step and deploy and e2e step in separate job, in parallel to ci.
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.
Update js and css with hashes in filenames on deployment so that we can have
very long (1 year) cache expiry. If the contents of the file change so will
the hashes and the hashed filenames.
In order for JS files to import correct hashed JS modules, generate importmap
in HTML, e.g.:
This import statement in index.js
will then load the correct version of
editor.js.This PR is complete with regards to creating hashed filenames, however
there is still work left to account for relative CSS and JS file
references in HTML files, such as
"../../css/index.css".Finally, pull it all together by marking file paths matching
"**/*.*.@(js|css)", i.e. JS and CSS filenames with a hash in theirpath as maximum cacheable with a 1 year expiry in
firebase.json.Cache-control: max-age=31536000headers can be observed on(preview) deployments.
Add e2e testing against last deployed URL on CI and move deployment
and e2e into separate job.
Link: https://jakearchibald.com/2016/caching-best-practices/
Link: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap
Issue: evylang/todo#45
There is a deployment on https://evystage.dev that shows the hashed filenames,
the importmap and the long expiry Cache-control header.