docker-react 0.0.2 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +88 -8
- package/dist/prep.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -4,13 +4,13 @@ CLI & base image to deploy React applications with docker containers.
|
|
|
4
4
|
|
|
5
5
|
## Features
|
|
6
6
|
|
|
7
|
-
- [
|
|
8
|
-
- [
|
|
7
|
+
- [x] Configuration
|
|
8
|
+
- [x] Command-line arguments
|
|
9
9
|
- [ ] Configuration file
|
|
10
|
-
- [
|
|
11
|
-
- [
|
|
12
|
-
- [
|
|
13
|
-
- [
|
|
10
|
+
- [x] Lightweight nginx docker container
|
|
11
|
+
- [x] CLI
|
|
12
|
+
- [x] Runtime environment variable injection & validation
|
|
13
|
+
- [x] Javascript
|
|
14
14
|
- [ ] HTML
|
|
15
15
|
- [ ] Hash file for cache invalidation
|
|
16
16
|
- [ ] Application initialization
|
|
@@ -22,12 +22,12 @@ CLI & base image to deploy React applications with docker containers.
|
|
|
22
22
|
## Supported Tooling
|
|
23
23
|
|
|
24
24
|
- [ ] Create React App
|
|
25
|
-
- [
|
|
25
|
+
- [x] Vite
|
|
26
26
|
- [ ] React Static
|
|
27
27
|
|
|
28
28
|
## Supported Validation
|
|
29
29
|
|
|
30
|
-
- [
|
|
30
|
+
- [x] Joi
|
|
31
31
|
- [ ] Yup
|
|
32
32
|
|
|
33
33
|
## Other TODOs
|
|
@@ -40,3 +40,83 @@ CLI & base image to deploy React applications with docker containers.
|
|
|
40
40
|
## Out of scope
|
|
41
41
|
|
|
42
42
|
- Server side rendering
|
|
43
|
+
|
|
44
|
+
## Implementation Instructions
|
|
45
|
+
|
|
46
|
+
1. Install `docker-react` and `joi`
|
|
47
|
+
|
|
48
|
+
```sh
|
|
49
|
+
npm i -S docker-react joi
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
2. Create environment variable schema (currently only Joi supported but the future others will be available)
|
|
53
|
+
|
|
54
|
+
```js
|
|
55
|
+
// env.schema.js
|
|
56
|
+
const Joi = require('joi');
|
|
57
|
+
|
|
58
|
+
module.exports = Joi.object()
|
|
59
|
+
.keys({
|
|
60
|
+
VITE_API_URL: Joi.string().uri().required(),
|
|
61
|
+
})
|
|
62
|
+
.required();
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
3. Add env import to your `index.html` head (in a future version this will be generated for you)
|
|
66
|
+
|
|
67
|
+
```html
|
|
68
|
+
<head>
|
|
69
|
+
...
|
|
70
|
+
<script src="/window.env.js"></script>
|
|
71
|
+
</head>
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
4. Create `Dockerfile` (in a future version this will be generated for you). NOTE `docker-react` image version version must match your installed npm version of docker-react.
|
|
75
|
+
|
|
76
|
+
```Dockerfile
|
|
77
|
+
FROM demery/docker-react:vX.X.X
|
|
78
|
+
|
|
79
|
+
COPY env.schema.js ./env.schema.js
|
|
80
|
+
COPY build /usr/share/nginx/html
|
|
81
|
+
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
5. Create `.dockerignore`
|
|
85
|
+
|
|
86
|
+
```.dockerignore
|
|
87
|
+
node_modules
|
|
88
|
+
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
6. Update npm scripts (add the `init-local` command and run it before your local dev scripts)
|
|
92
|
+
|
|
93
|
+
```json
|
|
94
|
+
{
|
|
95
|
+
"dev": "npm run init-local && vite",
|
|
96
|
+
"init-local": "npx docker-react prep -s ./env.schema.js -e local"
|
|
97
|
+
}
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
7. Replace all references to environment variables with `window.env`, eg.
|
|
101
|
+
- `process.env` => `window.env` (for create-react-app and others)
|
|
102
|
+
- `import.meta.env` => `window.env` (for vite)
|
|
103
|
+
|
|
104
|
+
## Local Testing Instructions
|
|
105
|
+
|
|
106
|
+
Note: This instructions are to be performed in the **consuming application**.
|
|
107
|
+
|
|
108
|
+
```sh
|
|
109
|
+
# Perform a local production build (using whichever command)
|
|
110
|
+
npm run build
|
|
111
|
+
# Build a local image tagged with local
|
|
112
|
+
docker build -t my-app:local .
|
|
113
|
+
# Run local build using the env file
|
|
114
|
+
docker run -p 3000:80 --env-file=.env --name=my-app my-app:local
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
The app should now be available at `http://localhost:3000`
|
|
118
|
+
|
|
119
|
+
```sh
|
|
120
|
+
# Cleanup
|
|
121
|
+
docker rm my-app && docker image rm my-app:local
|
|
122
|
+
```
|
package/dist/prep.js
CHANGED
|
@@ -30,7 +30,7 @@ async function generateEnvironmentFile(environment, schemaPath, destinationPath)
|
|
|
30
30
|
if (environment === 'local') {
|
|
31
31
|
const result = dotenv.config();
|
|
32
32
|
if (result.error) {
|
|
33
|
-
|
|
33
|
+
console.warn('Unable to load values from .env - all environment variables must be set', result.error);
|
|
34
34
|
}
|
|
35
35
|
}
|
|
36
36
|
// Perform environment variable validation.
|