Create a Dockerized React App Without Installing Node on the Host Machine
One of the advantages Docker provides is you don’t need to install the software stack required to run a particular application
One of the advantages Docker provides is you don’t need to install the software stack required to run a particular application on a computer, so node and npm are not actually necessary when creating a new React app.
Let me show you this on a fresh Trisquel Mini GNU/Linux install:
$ node -v
Command 'node' not found, but can be installed with:
sudo apt install nodejs
$ npm -v
Command 'npm' not found, but can be installed with:
sudo apt install npm
As you can see on the commands above neither node nor npm could be found.
All you need instead is to create the following docker-compose.yml file in your app’s root directory:
version: "3.8"
services:
node:
container_name: formbuilder_node
image: "node:14"
tty: true
volumes:
- ./:/usr/src/app
working_dir: /usr/src/app
Please note this is the
docker-compose.ymlfile of my Form Builder application, pick thecontainer_namethat suits you best.
And then build the Node.js Docker container as it is described next:
$ docker-compose up --build
Creating network "formbuilder_default" with the default driver
Pulling node (node:14)...
14: Pulling from library/node
2587235a7635: Pull complete
953fe5c215cb: Pull complete
d4d3f270c7de: Pull complete
ed36dafe30e3: Pull complete
00e912dd434d: Pull complete
dd25ee3ea38e: Pull complete
7199197a7a96: Pull complete
ca77c9b30b8b: Pull complete
2677747e9a46: Pull complete
Digest: sha256:04a33dac55af8d3170bffc91ca31fe8000b96ae1bab1a090deb920ca2ca2a38e
Status: Downloaded newer image for node:14
Creating formbuilder_node ... done
Attaching to formbuilder_node
node_1 | Welcome to Node.js v14.15.4.
node_1 | Type ".help" for more information.
If all goes well you’d be able to list the recently created container:
$ docker ps -a
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
1fc363917e08 node:14 "docker-entrypoint.s…" 40 minutes ago Up 40 minutes formbuilder_node
With the container up and running you’re ready to run the create-react-app command.
By the way this is how to check the version of node and npm as a non-root user.
$ docker exec -itu 1000:1000 formbuilder_node node -v
v14.15.4
$ docker exec -itu 1000:1000 formbuilder_node npm -v
6.14.10
Bear in mind a notice will get displayed if attempting to create the app in the current directory:
$ docker exec -itu 1000:1000 formbuilder_node npx create-react-app .
npx: installed 67 in 5.875s
The directory . contains files that could conflict:
docker-compose.yml
Either try using a new directory name, or remove the files listed above.
The workaround is indeed to use a new directory name when creating the React app in the Node Docker container:
$ docker exec -itu 1000:1000 formbuilder_node npx create-react-app my-app
At this point probably it is a good idea to move the contents of my-app to the root directory:
$ mv my-app/{,.}* .
And finally remove the remaining empty folder:
$ rm -rf my-app
Congratulations! If you followed the steps above, now please launch the test runner in the interactive watch mode.
$ docker exec -itu 1000:1000 formbuilder_node yarn start
Once again, if all goes well you’ll get the following message:
Compiled successfully!
You can now view my-app in the browser.
Local: http://localhost:3000
On Your Network: http://172.19.0.2:3000
Note that the development build is not optimized.
To create a production build, use yarn build.
Click on http://172.19.0.2:3000 to view the app on your network:
Figure 1. Edit src/App.js and save to reload
For further details please visit programarivm/formbuilder on GitHub.