DEV Community

loading...

4Steps to Create react dev env with Docker for BeginneršŸ³

kojikanao profile image Koji (he/him) 惻2 min read

In this article, I will introduce you to how to create react dev env with Docker. Actually there are 5 steps (including step0), but you can skip Step0 since it's not necessary for people who don't use VScode and don't want to install a new VScode extension.

Step0 Install an extension, Docker on VScode (optional)

Alt Text

Step1 Create Dockerfile

$ mkdir react_docker
$ cd react_docker
$ touch Dockerfile
Enter fullscreen mode Exit fullscreen mode
FROM node:12.18.0-alpine
WORKDIR /usr/src/app
Enter fullscreen mode Exit fullscreen mode

Step2 Create docker-compose.yml

docker-compose.yml must be under react_docker folder.

$ touch docker-compose.yml
Enter fullscreen mode Exit fullscreen mode
version: '3'
services:
  react:
    build:
      context: .
      dockerfile: Dockerfile
    environment: 
      - NODE_ENV=development
    volumes:
     - ./:/usr/src/app
    command: sh -c "cd myapp && yarn start"
    ports:
     - "3000:3000"
    tty: true
Enter fullscreen mode Exit fullscreen mode

If you want to use a different app name, you need to change 2 things.

  1. cd myapp --> cd your-react-app-name
  2. npx create-react-app myapp --> npx create-react-app your-react-app-name

Step3 Build the image

This step will take some time.

$ docker-compose build

# javascript
$ docker-compose run --rm react sh -c 'npx create-react-app myapp'

# typescript
$ docker-compose run --rm react sh -c 'npx create-react-app myapp --template typescript'
Enter fullscreen mode Exit fullscreen mode

Step4 Start react app

This step may take some time

$ docker-compose up -d

# stop
$ docker-compose stop
Enter fullscreen mode Exit fullscreen mode

Alt Text

Open VScode and click the Docker icon in the sidebar.
You can check the docker's status. Of course, you can do the same thing with Terminal/iTerm.

Alt Text

Now, we can start developing the react app.

Happy coding with react and Docker!!!

Discussion (0)

pic
Editor guide