How to build react app using Dockerfile.dev and Yarn

Question

I am trying to run a react app using docker. Here are my steps:

I have created a react app using react-native-cli and added Dockerfile.dev file. My Dockerfile.dev file contains this code:

# Specify a base image
FROM node:alpine

WORKDIR '/app'

# Install some depenendencies
COPY package.json .
RUN yarn install
COPY . .

# Uses port which is used by the actual application
EXPOSE 3000

# Default command
CMD ["yarn", "run", "start"]

Then I execute this command and get this output. But it doesn't show any port to access it.

docker build -f Dockerfile.dev .

OP: Successfully built ad79cd63eba3

docker run ad79cd63eba3

OP:

yarn run v1.22.4
$ react-scripts start
ℹ ｢wds｣: Project is running at http://172.17.0.2/
ℹ ｢wds｣: webpack output is served from
ℹ ｢wds｣: Content not from webpack is served from /app/public
ℹ ｢wds｣: 404s will fallback to /
Starting the development server...

Done in 2.02s.

Can anybody tell me how I start the development server and it shows me the port like Http://localhost:3000 to access it.

Full code: https://github.com/arif2009/frontend.git

Answer 1

There is an issue with Docker and the last version of react scripts. Here is a Github thread about it : https://github.com/facebook/create-react-app/issues/8688

The (temporary and fastest) solution for your case is to downgrade the version of react-scripts in your package.json file. From :

    "dependencies": {
     ...
    "react-scripts": "3.4.1"
    }

To :

   "dependencies": {
     ...
    "react-scripts": "3.4.0"
    }

I tested your project with this configuration and it works well now.

From the above Github Thread it seems to be another solution with docker-compose and stdin_open: true option (which basically correspond to the -it flag of the docker run command. You can try that too if the react-scripts version matter for you (and you want to keep the last version of it)

Answer 2

This is for docker yarn react

# pull the base image
FROM node:lts-alpine

# set the working direction
WORKDIR /app

# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH

# install app dependencies
COPY package.json ./

COPY yarn.lock ./

# rebuild node-sass
RUN yarn add node-sass

RUN yarn

# add app
COPY . ./

# start app
CMD ["yarn", "start"]