How to build react app using Dockerfile.dev and Yarn

user_3835843 0
Viewed 11318

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

docker reactjs
3 Answers

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)

user_130006950

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"]
user_65234740 
# Specify a base image
FROM node:14.5.0 as build-deps

# Create working directory and copy the app before running yarn install as the artifactory
# credentials can be inside .npmrc
WORKDIR /usr/src/app
COPY . ./

# Run yarn install
RUN yarn install

# Build the project
CMD ["yarn", "run", "build"]

# Install serve command for yarn package manager
RUN yarn global add serve

# Navigate to build folder
WORKDIR /usr/src/app/build

# Start the application
CMD serve -p 80 -s .
user_98809010
Related