Develop React applications with Node.js in a Podman container

Create a React app and use Node.js from a conatiner, without install it on your host OS.

Published on Mar 5, 2023

The code in this documentation was tested with:

The Podman options used and a few words about create-react-app are at the end of this document.

Preparation

Pull the Node.js container image:

podman pull docker.io/library/node:18-alpine

Go to your directory with projects and start the Node.js container with a shell:

cd your_project_directory
podman run --rm -it --userns=keep-id -v "${PWD}":/app:Z -w /app node:18-alpine /bin/ash

Inside the container run:

npx create-react-app test-app
exit

The new application is generated in the test-app directory.

Start the Node.js container with npm start command and map the port 3000 TCP from container to the host:

podman run --rm -it --userns=keep-id -p 3000:3000 -v "${PWD}":/app:Z -w /app/test-app node:18-alpine npm start

Now you can view the application in browser at http://localhost:3000/

To stop the npm start command and the container just press Ctrl+C.

From your host you can edit the application’s files and the result will be available in the browser after saving them.

--rm Remove container after exit
-it Interactive, keep STDIN open even if not attached (-i) and allocate a pseudo-TTY for container (-t)
--userns=keep-id Set the user namespace mode for the container, keep-id maps user account to same UID within container
-p 3000:3000 Publish on host’s 3000 port the container’s 3000 TCP port
-v "${PWD}":/app:Z bind mount the current directory as container’s /app directory and label the content with a private unshared label (:Z)
-w Set the working directory inside the container

More information about Podman’s run command can be found at least:

If you want to use TypeScript instead of JavaScript use:

npx create-react-app test-app --template typescript

Here is the documentation for Create React App .

Want to share this post? Click to copy the link.