One of the advantages Docker provides is you don't actually need to install on your host machine the software stack required to run a particular application. In the case of React, this means you don't need to have node
and npm
on your machine 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.yml
file of my Form Builder application, pick thecontainer_name
that 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:
src/App.js
and save to reloadFor further details please visit programarivm/formbuilder on GitHub.