React and Docker

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