Skip to content

Commit 53c7da5

Browse files
author
Gene Connolly
committed
Add instructions for running locally
1 parent 8c29887 commit 53c7da5

File tree

2 files changed

+108
-72
lines changed

2 files changed

+108
-72
lines changed

README.md

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,15 @@
1414
<p>Using a combination of npm, UNPKG, and Github Pages covers nearly all of these requirements!</p>
1515
<ul>
1616
<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>
17+
versioned, immutable packages. <i>Perfect for managing the immutable assets!</i></li>
1818
<br />
1919
<li><b><a href="https://unpkg.com/#/">UNPKG</a>:</b> The CDN makes all assets of the packages on npm addressable
2020
over https
21-
and globally available.</li>
21+
and globally available. <i>Perfect for delivering the immutable assets!</i></li>
2222
<br />
2323
<li><b><a href="https://pages.github.com/">GitHub Pages</a>:</b> This static hosting site supports easy
2424
configuration of DNS and HTTPS, has great integration with GitHub (obviously), and has a short TTL for
25-
browser caching</li>
25+
browser caching. <i>Perfect for serving the deployment manifest!</i></li>
2626
</ul>
2727
<h2><i>This Immutable Web App is hosted using npm, UNPKG, and GitHub Pages!</i></h2>
2828
<h3>Project Structure</h3>
@@ -35,18 +35,18 @@ is split into two critical branches:
3535
<br />
3636
<li><a href="https://github.com/ImmutableWebApps/unpkg-immutable-example/tree/master"><code>master</code></a> is
3737
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>.
38-
This single file is served for every request made to the GitHub Pages site.</li>
38+
This single file is <a href="https://help.github.com/articles/creating-a-custom-404-page-for-your-github-pages-site/">served for every request</a> made to the GitHub Pages site.</li>
3939
</ul>
4040
<h3>Project Lifecycle</h3>
4141
<h4>Building</h4>
42-
<p>Developing this web application is the same as any other Angular project. Features are built and tested locally, commits and
42+
<p>Developing this web application is the same as any other single-page app node project. Features are built and tested locally, commits and
4343
pull requests advance the state of the codebase. When a stable version of the app is ready to be deployed, the
4444
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>
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/">UNPKG</a>.</p>
4646
<h4>Deploying</h4>
4747
<p>With the new version of the assets available on UNPKG, an <i>atomic</i> deployment can be triggered 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 and any related changes to environment variables. Once the commit is made, GitHub Pages
48+
switching to the <code>master</code> branch and updating <code>404.html</code> with the references to the new project
49+
assets and any changes to environment variables. Once the commit is is pushed to the GitHub repository, GitHub Pages
5050
deployment is triggered and the new version of the web application is available.</p>
5151
<h2><i>Deployments!</i></h2>
5252
<p>With our Immutable Web App hosted by npm/UNPKG and without any environment-specific configuration, deployments
@@ -71,3 +71,13 @@ is split into two critical branches:
7171
<li>Run <code>netlify deploy</code></li>
7272
<li><a href="https://immutablewebapps.netlify.com"><b><i>Deployed!</i></b></a></li>
7373
</ul>
74+
<h3>Deploy Locally</h3>
75+
<p><i>and configure it however you want! Try loading up some <a href="https://github.com/ImmutableWebApps/unpkg-immutable-example/releases">older versions!</a></i></p>
76+
<ul>
77+
<li><code>git clone
78+
https://github.com/ImmutableWebApps/unpkg-immutable-deployment.git</code></li>
79+
<li><code>cd unpkg-immutable-deployment</code></li>
80+
<li><code>npm i -g ecstatic</code></li>
81+
<li><code>ecstatic</code> (<a href="https://www.npmjs.com/package/ecstatic">ecstatic</a> is a simple static file server)</li>
82+
<li><a href="http://0.0.0.0:8000"><b><i>Deployed!</i></b></a></li>
83+
</ul>

src/app/app.component.html

Lines changed: 90 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,101 @@
11
<div [style.background-color]="color">
2-
<h1>{{ title }}</h1>
3-
<h2>Hosting an <a href="https://immutablewebapps.org">Immutable Web App</a> with <a href="https://www.npmjs.com/">npm</a>,
4-
<a href="https://unpkg.com/#/">UNPKG</a>, and <a href="https://pages.github.com/">GitHub Pages</a></h2>
2+
<h1>{{ title }}</h1>
3+
<h2>Hosting an <a href="https://immutablewebapps.org">Immutable Web App</a> with <a href="https://www.npmjs.com/">npm</a>,
4+
<a href="https://unpkg.com/#/">UNPKG</a>, and <a href="https://pages.github.com/">GitHub Pages</a></h2>
55
<p>Immutable Web Apps are composed of two concepts:</p>
66
<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>
10-
<br />
11-
<li><b>Deployment Manifest:</b> An <code>index.html</code> that is unique to the environment and not cached by the
12-
browser. It contains environment-specific configuration, references to the versioned immutable assets, and meta
13-
data.</li>
7+
<li><b>Immutable Assets:</b> Static assets (javascript, CSS, images) that do not contain any
8+
environment-specific
9+
configuration and are hosted at a permanent, versioned,
10+
long-term browser cached location.</li>
11+
<br />
12+
<li><b>Deployment Manifest:</b> An <code>index.html</code> that is unique to the environment and not cached by
13+
the
14+
browser. It contains environment-specific configuration, references to the versioned immutable assets, and
15+
meta
16+
data.</li>
1417
</ul>
1518
<p>Using a combination of npm, UNPKG, and Github Pages covers nearly all of these requirements!</p>
1619
<ul>
17-
<li><b><a href="https://www.npmjs.com/">npm</a>:</b> The software registry stores the the static assets in
18-
versioned, immutable packages.</li>
19-
<br />
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>
23-
<br />
24-
<li><b><a href="https://pages.github.com/">GitHub Pages</a>:</b> This static hosting site supports easy
25-
configuration of DNS and HTTPS, has great integration with GitHub (obviously), and has a short TTL for
26-
browser caching</li>
20+
<li><b><a href="https://www.npmjs.com/">npm</a>:</b> The software registry stores the the static assets in
21+
versioned, immutable packages. <i>Perfect for managing the immutable assets!</i></li>
22+
<br />
23+
<li><b><a href="https://unpkg.com/#/">UNPKG</a>:</b> The CDN makes all assets of the packages on npm
24+
addressable
25+
over https
26+
and globally available. <i>Perfect for delivering the immutable assets!</i></li>
27+
<br />
28+
<li><b><a href="https://pages.github.com/">GitHub Pages</a>:</b> This static hosting site supports easy
29+
configuration of DNS and HTTPS, has great integration with GitHub (obviously), and has a short TTL for
30+
browser caching. <i>Perfect for serving the deployment manifest!</i></li>
2731
</ul>
2832
<h2><i>This Immutable Web App is hosted using npm, UNPKG, and GitHub Pages!</i></h2>
2933
<h3>Project Structure</h3>
3034
<p>The git repository <a href="https://github.com/ImmutableWebApps/unpkg-immutable-example">unpkg-immutable-example</a>
31-
is split into two critical branches:
32-
<ul>
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
35-
any other static web application.</li>
36-
<br />
37-
<li><a href="https://github.com/ImmutableWebApps/unpkg-immutable-example/tree/master"><code>master</code></a> is
38-
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>.
39-
This single file is served for every request made to the GitHub Pages site.</li>
40-
</ul>
41-
<h3>Project Lifecycle</h3>
42-
<h4>Building</h4>
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>
47-
<h4>Deploying</h4>
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>
35+
is split into two critical branches:
36+
<ul>
37+
<li><a href="https://github.com/ImmutableWebApps/unpkg-immutable-example/tree/default"><code>default</code></a>
38+
is where the Angular project is maintained. It was generated from Angular CLI and is maintained like
39+
any other static web application.</li>
40+
<br />
41+
<li><a href="https://github.com/ImmutableWebApps/unpkg-immutable-example/tree/master"><code>master</code></a>
42+
is
43+
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>.
44+
This single file is <a href="https://help.github.com/articles/creating-a-custom-404-page-for-your-github-pages-site/">served
45+
for every request</a> made to the GitHub Pages site.</li>
46+
</ul>
47+
<h3>Project Lifecycle</h3>
48+
<h4>Building</h4>
49+
<p>Developing this web application is the same as any other single-page app node project. Features are built
50+
and tested locally, commits and
51+
pull requests advance the state of the codebase. When a stable version of the app is ready to be deployed,
52+
the
53+
assets are rendered to the <code>/dist</code> folder using <code>npm run build</code> and new version of
54+
the
55+
project is published to npm using <code>npm publish</code>. The assets become available on <a href="https://unpkg.com/@immutablewebapps/unpkg-immutable-example/">UNPKG</a>.</p>
56+
<h4>Deploying</h4>
57+
<p>With the new version of the assets available on UNPKG, an <i>atomic</i> deployment can be triggered by
58+
switching to the <code>master</code> branch and updating <code>404.html</code> with the references to the
59+
new project
60+
assets and any changes to environment variables. Once the commit is is pushed to the GitHub repository,
61+
GitHub Pages
62+
deployment is triggered and the new version of the web application is available.</p>
63+
<h2><i>Deployments!</i></h2>
64+
<p>With our Immutable Web App hosted by npm/UNPKG and without any environment-specific configuration,
65+
deployments
66+
are cheap and reliable! Let's deploy <code>index.html</code> to wherever it is easiest to setup DNS and
67+
HTTPS!</p>
68+
<h3>Deploy to another Github Pages repository</h3>
69+
<p><i>and let's change the version!</i></p>
70+
<ul>
71+
<li>Create a <a href="https://github.com/new">new Github repo</a></li>
72+
<li><a href="https://help.github.com/articles/configuring-a-publishing-source-for-github-pages/">Configure
73+
the
74+
repo as a publishing source for Github Pages</a></li>
75+
<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
76+
<code>404</code> page</a></li>
77+
<li><a href="https://immutablewebapps.org/unpkg-immutable-deployment"><b><i>Deployed!</i></b></a></li>
78+
</ul>
79+
<h3>Deploy to Netlify</h3>
80+
<p><i>and let's change some environment variables!</i></p>
81+
<ul>
82+
<li><a href="https://app.netlify.com/">Create a Netlify account</a></li>
83+
<li>Run <code>npm i -g netlify-cli</code></li>
84+
<li>Run <code>netlify login</code></li>
85+
<li>Create a folder for the <code>index.html</code></li>
86+
<li>Run <code>netlify deploy</code></li>
87+
<li><a href="https://immutablewebapps.netlify.com"><b><i>Deployed!</i></b></a></li>
88+
</ul>
89+
<h3>Deploy Locally</h3>
90+
<p><i>and configure it however you want! Try loading up some <a href="https://github.com/ImmutableWebApps/unpkg-immutable-example/releases">older
91+
versions!</a></i></p>
92+
<ul>
93+
<li><code>git clone
94+
https://github.com/ImmutableWebApps/unpkg-immutable-deployment.git</code></li>
95+
<li><code>cd unpkg-immutable-deployment</code></li>
96+
<li><code>npm i -g ecstatic</code></li>
97+
<li><code>ecstatic</code> (<a href="https://www.npmjs.com/package/ecstatic">ecstatic</a> is a simple static
98+
file server)</li>
99+
<li><a href="http://0.0.0.0:8000"><b><i>Deployed!</i></b></a></li>
100+
</ul>
75101
</div>

0 commit comments

Comments
 (0)