Create a Dockerized React App Without Installing Node on the Host Machine

devops

React and Docker

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 the container_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:

Figure 1

Figure 1. Edit src/App.js and save to reload

For further details please visit programarivm/formbuilder on GitHub.

You may also be interested in...

Previous Post Next Post