Skip to content

Commit c28ce94

Browse files
Gene Connollygconnolly
authored andcommitted
Add running locally suggestions and logo
1 parent 60428c6 commit c28ce94

File tree

4 files changed

+37
-23
lines changed

4 files changed

+37
-23
lines changed

.env

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
PUBLIC_URL=<%=PUBLIC_URL%>
2+
REACT_APP_ENV=<%-JSON.stringify(env)%>

README.md

Lines changed: 34 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
# ng-immutable-example
1+
# react-immutable-example
22

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 .
44

55
## Getting Started
66

@@ -24,7 +24,7 @@ Converting this this new application to build an Immutable Web App requires the
2424

2525
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.
2626

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:
2828

2929
```diff
3030
- process.env.REACT_APP_VARIABLE
@@ -35,7 +35,7 @@ Change all references to point to the run-time `window` object instead of the bu
3535

3636
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.
3737

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.
3939

4040
### Converting index.html to a template
4141

@@ -44,32 +44,32 @@ This example uses [EJS](https://ejs.co/) as the templating language to render `i
4444
1) Identify the parts of the `index.html` that vary by environment:
4545

4646
- [`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.
47-
- `window.env`: Environment-specific javascript configuration.
47+
- `window.env`: Environment-specific JavaScript configuration.
4848

4949
2) Set `PUBLIC_URL` to an EJS template string in the `.env`:
5050

5151
```diff
5252
+ PUBLIC_URL=<%=PUBLIC_URL%>
5353
```
5454

55-
3) Add a new script tag to render the javascript environment-specific variables in `public/index.html`:
55+
4) Set `REACT_APP_ENV` to an EJS template string in the `.env`. This will contain the JavaScript environment-specific variables.:
56+
57+
```diff
58+
PUBLIC_URL=<%=PUBLIC_URL%>
59+
+ REACT_APP_ENV=<%-JSON.stringify(env)%>
60+
```
61+
62+
3) Add a new script tag to render the JavaScript environment-specific variables in `public/index.html`:
5663

5764
```diff
5865
<head>
5966
...
6067
+ <script>
61-
+ env = %REACT_APP_CLIENT_ENV%;
68+
+ env = %REACT_APP_ENV%;
6269
+ </script>
6370
</head>
6471
```
6572

66-
4) Set `REACT_APP_CLIENT_ENV` to an EJS template string in the `.env`:
67-
68-
```diff
69-
PUBLIC_URL=<%=PUBLIC_URL%>
70-
+ REACT_APP_CLIENT_ENV=<%-JSON.stringify(env)%>
71-
```
72-
7373
### Example
7474

7575
#### `public/index.html`:
@@ -164,7 +164,7 @@ __The environment-specific deployment manifest.__ It is the product of rendering
164164
<meta name="theme-color" content="#000000">
165165
<link rel="manifest" href="https://assets.react-immutable-example.com/1.0.0/manifest.json">
166166
<title>React App</title>
167-
<script>env = { "api": "https://api.react-immutable-example.com" };</script>
167+
<script>env = { api: "https://api.react-immutable-example.com" };</script>
168168
<link href="https://assets.react-immutable-example.com/1.0.0/static/css/main.6bd13355.chunk.css" rel="stylesheet">
169169
</head>
170170
<body>
@@ -179,6 +179,24 @@ __The environment-specific deployment manifest.__ It is the product of rendering
179179
</html>
180180
```
181181

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.
185+
186+
`.env`:
187+
188+
```sh
189+
PUBLIC_URL=<%=PUBLIC_URL%>
190+
REACT_APP_ENV=<%-JSON.stringify(env)%>
191+
```
192+
193+
`.env.local`:
194+
195+
```sh
196+
PUBLIC_URL=/
197+
REACT_APP_ENV={ api: "https://localhost:3001/api"}
198+
```
199+
182200
## Future Work
183201

184-
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.

public/favicon.ico

544 Bytes
Binary file not shown.

src/logo.svg

Lines changed: 1 addition & 7 deletions
Loading

0 commit comments

Comments
 (0)