Skip to content

Commit f2d9bbf

Browse files
Gene Connollygconnolly
Gene Connolly
authored and
gconnolly
committed
add deployments to readme
1 parent 29d215f commit f2d9bbf

File tree

2 files changed

+88
-50
lines changed

2 files changed

+88
-50
lines changed

‎README.md

Lines changed: 33 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,9 @@
33
<a href="https://unpkg.com/#/">UNPKG</a>, and <a href="https://pages.github.com/">GitHub Pages</a></h2>
44
<p>Immutable Web Apps are composed of two concepts:</p>
55
<ul>
6-
<li><b>Immutable Assets:</b> Static assets (javascript, CSS, images) that are hosted at a permanent, versioned,
7-
long-term browser cached location and that do not contain any environment-specific configuration.</li>
6+
<li><b>Immutable Assets:</b> Static assets (javascript, CSS, images) that do not contain any environment-specific
7+
configuration and are hosted at a permanent, versioned,
8+
long-term browser cached location.</li>
89
<br />
910
<li><b>Deployment Manifest:</b> An <code>index.html</code> that is unique to the environment and not cached by the
1011
browser. It contains environment-specific configuration, references to the versioned immutable assets, and meta
@@ -15,21 +16,21 @@
1516
<li><b><a href="https://www.npmjs.com/">npm</a>:</b> The software registry stores the the static assets in
1617
versioned, immutable packages.</li>
1718
<br />
18-
<li><b><a href="https://unpkg.com/#/">UNPKG</a>:</b> The CDN makes all assets of the package on npm addressable
19+
<li><b><a href="https://unpkg.com/#/">UNPKG</a>:</b> The CDN makes all assets of the packages on npm addressable
1920
over https
2021
and globally available.</li>
2122
<br />
2223
<li><b><a href="https://pages.github.com/">GitHub Pages</a>:</b> This static hosting site supports easy
23-
configuration of DNS and Certificates, has great integration with GitHub (obviously), and has a short TTL for
24+
configuration of DNS and HTTPS, has great integration with GitHub (obviously), and has a short TTL for
2425
browser caching</li>
2526
</ul>
26-
<h2><i>This site is hosted using npm, UNPKG, and GitHub Pages!</i></h2>
27+
<h2><i>This Immutable Web App is hosted using npm, UNPKG, and GitHub Pages!</i></h2>
2728
<h3>Project Structure</h3>
2829
<p>The git repository <a href="https://github.com/ImmutableWebApps/unpkg-immutable-example">unpkg-immutable-example</a>
2930
is split into two critical branches:
3031
<ul>
3132
<li><a href="https://github.com/ImmutableWebApps/unpkg-immutable-example/tree/default"><code>default</code></a>
32-
is where the Angular project is maintained. It was generated from Angular CLI and is generally maintained like
33+
is where the Angular project is maintained. It was generated from Angular CLI and is maintained like
3334
any other static web application.</li>
3435
<br />
3536
<li><a href="https://github.com/ImmutableWebApps/unpkg-immutable-example/tree/master"><code>master</code></a> is
@@ -38,17 +39,35 @@ is split into two critical branches:
3839
</ul>
3940
<h3>Project Lifecycle</h3>
4041
<h4>Building</h4>
41-
<p>Developing this web application is the same as any other. Features are built and tested locally, commits and
42+
<p>Developing this web application is the same as any other Angular project. Features are built and tested locally, commits and
4243
pull requests advance the state of the codebase. When a stable version of the app is ready to be deployed, the
4344
assets are rendered to the <code>/dist</code> folder using <code>npm run build</code> and new version of the
4445
project is published to npm using <code>npm publish</code>. The assets become available on <a href="https://unpkg.com/@immutablewebapps/unpkg-immutable-example@0.0.1/">UNPKG</a>.</p>
4546
<h4>Deploying</h4>
46-
<p>With the new version of the assets available on UNPKG, we can trigger an <i>atomic</i> deployment by
47+
<p>With the new version of the assets available on UNPKG, an <i>atomic</i> deployment can be triggered by
4748
switching to the <code>master</code> branch and updating <code>404.html</code> with the new references to project
48-
assets via UNPKG as well as any related changes to environment variables. Once the commit is made, GitHub Pages
49+
assets via UNPKG and any related changes to environment variables. Once the commit is made, GitHub Pages
4950
deployment is triggered and the new version of the web application is available.</p>
50-
<h4>Deploying to Another Environment</h4>
51-
<p>Setup another <a href="https://github.com/ImmutableWebApps/unpkg-immutable-deployment">Github Pages repository</a>,
52-
add a <a href="https://github.com/ImmutableWebApps/unpkg-immutable-deployment/blob/master/404.html"><code>404.html</code></a>,
53-
and <a href="https://immutablewebapps.org/unpkg-immutable-deployment/">another deployment of the app</a> is
54-
created!</p>
51+
<h2><i>Deployments!</i></h2>
52+
<p>With our Immutable Web App hosted by npm/UNPKG and without any environment-specific configuration, deployments
53+
are cheap and reliable! Let's deploy <code>index.html</code> to wherever it is easiest to setup DNS and HTTPS!</p>
54+
<h3>Deploy to another Github Pages repository</h3>
55+
<p><i>and let's change the version!</i></p>
56+
<ul>
57+
<li>Create a <a href="https://github.com/new">new Github repo</a></li>
58+
<li><a href="https://help.github.com/articles/configuring-a-publishing-source-for-github-pages/">Configure the
59+
repo as a publishing source for Github Pages</a></li>
60+
<li>Commit the <code>index.html</code> as a <a href="https://help.github.com/articles/creating-a-custom-404-page-for-your-github-pages-site/">custom
61+
<code>404</code> page</a></li>
62+
<li><a href="https://immutablewebapps.org/unpkg-immutable-deployment"><b><i>Deployed!</i></b></a></li>
63+
</ul>
64+
<h3>Deploy to Netlify</h3>
65+
<p><i>and let's change some environment variables!</i></p>
66+
<ul>
67+
<li><a href="https://app.netlify.com/">Create a Netlify account</a></li>
68+
<li>Run <code>npm i -g netlify-cli</code></li>
69+
<li>Run <code>netlify login</code></li>
70+
<li>Create a folder for the <code>index.html</code></li>
71+
<li>Run <code>netlify deploy</code></li>
72+
<li><a href="https://immutablewebapps.netlify.com"><b><i>Deployed!</i></b></a></li>
73+
</ul>

‎src/app/app.component.html

Lines changed: 55 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -2,55 +2,74 @@
22
<h1>{{ title }}</h1>
33
<h2>Hosting an <a href="https://immutablewebapps.org">Immutable Web App</a> with <a href="https://www.npmjs.com/">npm</a>,
44
<a href="https://unpkg.com/#/">UNPKG</a>, and <a href="https://pages.github.com/">GitHub Pages</a></h2>
5-
<p>Immutable Web Apps are composed of two concepts:</p>
6-
<ul>
7-
<li><b>Immutable Assets:</b> Static assets (javascript, CSS, images) that are hosted at a permanent, versioned,
8-
long-term browser cached location and that do not contain any environment-specific configuration.</li>
5+
<p>Immutable Web Apps are composed of two concepts:</p>
6+
<ul>
7+
<li><b>Immutable Assets:</b> Static assets (javascript, CSS, images) that do not contain any environment-specific
8+
configuration and are hosted at a permanent, versioned,
9+
long-term browser cached location.</li>
910
<br />
1011
<li><b>Deployment Manifest:</b> An <code>index.html</code> that is unique to the environment and not cached by the
11-
browser. It contains environment-specific configuration, references to the versioned immutable assets, and meta
12-
data.</li>
13-
</ul>
14-
<p>Using a combination of npm, UNPKG, and Github Pages covers nearly all of these requirements!</p>
15-
<ul>
12+
browser. It contains environment-specific configuration, references to the versioned immutable assets, and meta
13+
data.</li>
14+
</ul>
15+
<p>Using a combination of npm, UNPKG, and Github Pages covers nearly all of these requirements!</p>
16+
<ul>
1617
<li><b><a href="https://www.npmjs.com/">npm</a>:</b> The software registry stores the the static assets in
17-
versioned, immutable packages.</li>
18+
versioned, immutable packages.</li>
1819
<br />
19-
<li><b><a href="https://unpkg.com/#/">UNPKG</a>:</b> The CDN makes all assets of the package on npm addressable
20-
over https
21-
and globally available.</li>
20+
<li><b><a href="https://unpkg.com/#/">UNPKG</a>:</b> The CDN makes all assets of the packages on npm addressable
21+
over https
22+
and globally available.</li>
2223
<br />
2324
<li><b><a href="https://pages.github.com/">GitHub Pages</a>:</b> This static hosting site supports easy
24-
configuration of DNS and Certificates, has great integration with GitHub (obviously), and has a short TTL for
25-
browser caching</li>
26-
</ul>
27-
<h2><i>This site is hosted using npm, UNPKG, and GitHub Pages!</i></h2>
28-
<h3>Project Structure</h3>
29-
<p>The git repository <a href="https://github.com/ImmutableWebApps/unpkg-immutable-example">unpkg-immutable-example</a>
25+
configuration of DNS and HTTPS, has great integration with GitHub (obviously), and has a short TTL for
26+
browser caching</li>
27+
</ul>
28+
<h2><i>This Immutable Web App is hosted using npm, UNPKG, and GitHub Pages!</i></h2>
29+
<h3>Project Structure</h3>
30+
<p>The git repository <a href="https://github.com/ImmutableWebApps/unpkg-immutable-example">unpkg-immutable-example</a>
3031
is split into two critical branches:
3132
<ul>
32-
<li><a href="https://github.com/ImmutableWebApps/unpkg-immutable-example/tree/default"><code>default</code></a>
33-
is where the Angular project is maintained. It was generated from Angular CLI and is generally maintained like
33+
<li><a href="https://github.com/ImmutableWebApps/unpkg-immutable-example/tree/default"><code>default</code></a>
34+
is where the Angular project is maintained. It was generated from Angular CLI and is maintained like
3435
any other static web application.</li>
35-
<br />
36-
<li><a href="https://github.com/ImmutableWebApps/unpkg-immutable-example/tree/master"><code>master</code></a> is
36+
<br />
37+
<li><a href="https://github.com/ImmutableWebApps/unpkg-immutable-example/tree/master"><code>master</code></a> is
3738
configured to serve the GitHub Pages site. It only contains a single file <a href="https://github.com/ImmutableWebApps/unpkg-immutable-example/blob/master/404.html"><code>404.html</code></a>.
3839
This single file is served for every request made to the GitHub Pages site.</li>
3940
</ul>
4041
<h3>Project Lifecycle</h3>
4142
<h4>Building</h4>
42-
<p>Developing this web application is the same as any other. Features are built and tested locally, commits and
43-
pull requests advance the state of the codebase. When a stable version of the app is ready to be deployed, the
44-
assets are rendered to the <code>/dist</code> folder using <code>npm run build</code> and new version of the
45-
project is published to npm using <code>npm publish</code>. The assets become available on <a href="https://unpkg.com/@immutablewebapps/unpkg-immutable-example@0.0.1/">UNPKG</a>.</p>
43+
<p>Developing this web application is the same as any other Angular project. Features are built and tested locally, commits and
44+
pull requests advance the state of the codebase. When a stable version of the app is ready to be deployed, the
45+
assets are rendered to the <code>/dist</code> folder using <code>npm run build</code> and new version of the
46+
project is published to npm using <code>npm publish</code>. The assets become available on <a href="https://unpkg.com/@immutablewebapps/unpkg-immutable-example@0.0.1/">UNPKG</a>.</p>
4647
<h4>Deploying</h4>
47-
<p>With the new version of the assets available on UNPKG, we can trigger an <i>atomic</i> deployment by
48-
switching to the <code>master</code> branch and updating <code>404.html</code> with the new references to project
49-
assets via UNPKG as well as any related changes to environment variables. Once the commit is made, GitHub Pages
50-
deployment is triggered and the new version of the web application is available.</p>
51-
<h4>Deploying to Another Environment</h4>
52-
<p>Setup another <a href="https://github.com/ImmutableWebApps/unpkg-immutable-deployment">Github Pages repository</a>,
53-
add a <a href="https://github.com/ImmutableWebApps/unpkg-immutable-deployment/blob/master/404.html"><code>404.html</code></a>,
54-
and <a href="https://immutablewebapps.org/unpkg-immutable-deployment/">another deployment of the app</a> is
55-
created!</p>
48+
<p>With the new version of the assets available on UNPKG, an <i>atomic</i> deployment can be triggered by
49+
switching to the <code>master</code> branch and updating <code>404.html</code> with the new references to project
50+
assets via UNPKG and any related changes to environment variables. Once the commit is made, GitHub Pages
51+
deployment is triggered and the new version of the web application is available.</p>
52+
<h2><i>Deployments!</i></h2>
53+
<p>With our Immutable Web App hosted by npm/UNPKG and without any environment-specific configuration, deployments
54+
are cheap and reliable! Let's deploy <code>index.html</code> to wherever it is easiest to setup DNS and HTTPS!</p>
55+
<h3>Deploy to another Github Pages repository</h3>
56+
<p><i>and let's change the version!</i></p>
57+
<ul>
58+
<li>Create a <a href="https://github.com/new">new Github repo</a></li>
59+
<li><a href="https://help.github.com/articles/configuring-a-publishing-source-for-github-pages/">Configure the
60+
repo as a publishing source for Github Pages</a></li>
61+
<li>Commit the <code>index.html</code> as a <a href="https://help.github.com/articles/creating-a-custom-404-page-for-your-github-pages-site/">custom
62+
<code>404</code> page</a></li>
63+
<li><a href="https://immutablewebapps.org/unpkg-immutable-deployment"><b><i>Deployed!</i></b></a></li>
64+
</ul>
65+
<h3>Deploy to Netlify</h3>
66+
<p><i>and let's change some environment variables!</i></p>
67+
<ul>
68+
<li><a href="https://app.netlify.com/">Create a Netlify account</a></li>
69+
<li>Run <code>npm i -g netlify-cli</code></li>
70+
<li>Run <code>netlify login</code></li>
71+
<li>Create a folder for the <code>index.html</code></li>
72+
<li>Run <code>netlify deploy</code></li>
73+
<li><a href="https://immutablewebapps.netlify.com"><b><i>Deployed!</i></b></a></li>
74+
</ul>
5675
</div>

0 commit comments

Comments
 (0)