You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+34-16Lines changed: 34 additions & 16 deletions
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
-
# ng-immutable-example
1
+
# react-immutable-example
2
2
3
-
This project demonstrates how to convert to an [Immutable Web App](https://immutablwebapps.org) from an Angular app that was generated with [Create React App](https://github.com/facebook/create-react-app) version .
3
+
This project demonstrates how to convert to an [Immutable Web App](https://immutablwebapps.org) from a React app that was generated with [Create React App](https://github.com/facebook/create-react-app) version .
4
4
5
5
## Getting Started
6
6
@@ -24,7 +24,7 @@ Converting this this new application to build an Immutable Web App requires the
24
24
25
25
Create React App has documentation for [adding custome environment variables](https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables). As they mention in the documentation, the environment variables are embedded during the build-time. To make the assets immutable, the setting of values must be shifted from build-time to run-time. Create React App has documentation for [injecting data from the server into the page](https://facebook.github.io/create-react-app/docs/title-and-meta-tags#injecting-data-from-the-server-into-the-page) which is similar to how this Immutable Web App example will handle environment variables.
26
26
27
-
Change all references to point to the run-time `window` object instead of the build-time `process` object:
27
+
Change all references to point to the run-time browser `window` object instead of the build-time node`process` object:
28
28
29
29
```diff
30
30
- process.env.REACT_APP_VARIABLE
@@ -35,7 +35,7 @@ Change all references to point to the run-time `window` object instead of the bu
35
35
36
36
In theory, the role of `index.html` in an Immutable Web App is to be a deployment manifest that only contains configuration that is unique to the environment where it is deployed.
37
37
38
-
In practice, there is often a need to include markup or scripts in the `index.html` that are more than just configuration, or that doesn't vary by environment, or that does change between versions of the app. This issue can be resolved by creating an immutable`index.html` template, that is published with the other immutable assets.
38
+
In practice, there is often a need to include markup or scripts in the `index.html` that are more than just configuration, or that doesn't vary by environment, or that does change between versions of the app. This issue can be resolved by creating an _immutable_`index.html` template, that is published with the other immutable assets.
39
39
40
40
### Converting index.html to a template
41
41
@@ -44,32 +44,32 @@ This example uses [EJS](https://ejs.co/) as the templating language to render `i
44
44
1) Identify the parts of the `index.html` that vary by environment:
45
45
46
46
-[`PUBLIC_URL`](https://facebook.github.io/create-react-app/docs/using-the-public-folder#adding-assets-outside-of-the-module-system): URL where the versioned immutable assets will be deployed.
@@ -179,6 +179,24 @@ __The environment-specific deployment manifest.__ It is the product of rendering
179
179
</html>
180
180
```
181
181
182
+
## Running Locally
183
+
184
+
Without making any additional changes, `npm start` will run and serve the static assets as well as attempt to serve the immutable template `index.html`. A proper `index.html` can be rendered by [overriding the `.env`](https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables#what-other-env-files-can-be-used) file with values instead of template strings in an `.env.local` file.
This project will be updated as better patterns for building Immutable Web Apps are established and as Angular CLI changes.
202
+
This project will be updated as better patterns for building Immutable Web Apps are established and as [Create React App](https://github.com/facebook/create-react-app) changes.
0 commit comments