How to run ReactJs on Windows container

henriqueholtz

Henrique Holtz

Posted on August 22, 2022

How to run ReactJs on Windows container

Hi dev, in this article we'll see how to run ReactJs application on windows container.

We'll use docker images who can run NodeJs on Windows container (not are official of NodeJs) explained in this article.

First, we'll generate our own create-react-app to use it on c:\Projects as my-own-cra:

npx create-react-app my-own-cra
Enter fullscreen mode Exit fullscreen mode

Now we can run the container directly, or using docker-compose, let's see both:

1. Run container directly

Now we'll run one container with our create-react-app inside, to do this we use the command below (use powershell):

docker run -t -p 3000:3000 --name=my-own-cra-windows-container -v C:\Projects\my-own-cra\:C:\app\ henriqueholtz/node-win:16.17.0 cmd /c "npm -v & node -v & npm start"
Enter fullscreen mode Exit fullscreen mode

The result on the terminal will be something as:

result of  raw `npm start` endraw  in the terminal

Now we can access on your browser with http://localhost:3000 and see our create-react-app running on windows container:

create-react-app on browser

2. Run container with docker-compose

First we'll create our dpcker-compose.yml (in c:\Projects\my-own-cra, as:

version: '3.8'

services:
  my-own-cra:
    container_name: my-own-cra
    image: henriqueholtz/node-win:16.17.0
    command: cmd /c "npm -v & node -v & npm start"
    ports:
      - '3000:3000'
    volumes:
      - "C:\\Projects\\my-own-cra\\:C:\\app\\"
Enter fullscreen mode Exit fullscreen mode

After that, open the terminal (in the same folder) and run docker-compose:

docker-compose up
Enter fullscreen mode Exit fullscreen mode

Here we can access http://localhost:3000 also, and see our create-react-app running, same as before.

Thanks for reading!

💖 💪 🙅 🚩
henriqueholtz
Henrique Holtz

Posted on August 22, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related