Immutable Web App with npm, UNPKG, and GitHub PagesHosting an
Immutable Web Apps are composed of two concepts:
- Deployment Manifest: An
index.htmlthat is unique to the environment and not cached by the browser. It contains environment-specific configuration, references to the versioned immutable assets, and meta data.
Using a combination of npm, UNPKG, and Github Pages covers nearly all of these requirements!
- npm: The software registry stores the the static assets in versioned, immutable packages. Perfect for managing the immutable assets!
- UNPKG: The CDN makes all assets of the packages on npm addressable over https and globally available. Perfect for delivering the immutable assets!
- GitHub Pages: This static hosting site supports easy configuration of DNS and HTTPS, has great integration with GitHub (obviously), and has a short TTL for browser caching. Perfect for serving the deployment manifest!
This Immutable Web App is hosted using npm, UNPKG, and GitHub Pages!
The git repository unpkg-immutable-example is split into two critical branches:
defaultis where the Angular project is maintained. It was generated from Angular CLI and is maintained like any other static web application.
masteris configured to serve the GitHub Pages site. It only contains a single file
404.html. This single file is served for every request made to the GitHub Pages site.
Developing this web application is the same as any other single-page app node project. Features are built
and tested locally, commits and
pull requests advance the state of the codebase. When a stable version of the app is ready to be deployed,
assets are rendered to the
/dist folder using
npm run build and new version of
project is published to npm using
npm publish. The assets become available on UNPKG.
With the new version of the assets available on UNPKG, an atomic deployment can be triggered by
switching to the
master branch and updating
404.html with the references to the
assets and any changes to environment variables. Once the commit is is pushed to the GitHub repository,
deployment is triggered and the new version of the web application is available.
With our Immutable Web App hosted by npm/UNPKG and without any environment-specific configuration,
are cheap and reliable! Let's deploy
index.html to wherever it is easiest to setup DNS and
Deploy to another Github Pages repository
and let's change the version!
- Fork unpkg-immutable-deployment
- Configure the repo as a publishing source for Github Pages
- Modify the
404.htmlto point to a different version
Deploy to Netlify
and let's change some environment variables!
git clone https://github.com/ImmutableWebApps/unpkg-immutable-deployment
- Create a Netlify account
npm i -g netlify-cli
and configure it however you want! Try loading up some older versions!