I installed the module called create-react-app then executed this create-react-app frontend command for project generation. Its a custom image. After the project generated I made the custom docker YAML file for custom image generation. The image was generated successfully. But while running that image using this command docker run b99c49b119be it's exiting immediately after saying starting the development server. See below for the error.
I ran command for custom image generation docker build -f Dockerfile.dev .
Error
Successfully built b99c49b119be
[root#client frontend]# docker run b99c49b119be
> frontend#0.1.0 start /app
> 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...
Dockerfile
FROM node:alpine
WORKDIR '/app'
COPY package.json .
RUN npm install
COPY . .
CMD ["npm", "run", "start"]
For development purpose, just use npm start which uses react-scripts to run and watch your application for changes.
To deploy your application using docker, you can use static files server like serve in docker. Use dockerfile below.
FROM node:8-alpine
RUN npm install serve -g
COPY build/ .
EXPOSE 5000
CMD ["serve", "-s", "."]
Before you build the image, run npm run build to produce a production ready distribution - which is a collection of all files in build folder of your project
For more details on how to deploy react app created with create-react-app create-react-app docs
You need to add the -it flag to run the container in interactive mode (keep STDIN open and allocate a pseudo-tty):
docker run -it CONTAINER_ID
This is caused due to recent update in the Create React App library and adding this flag should resolve your issue.
Related
I am trying to run a next js app locally inside a docker file. When I run the container, everything works as expected with the exception of my image files failing to render on the page. Inspection via the developer tools indicates a failed network request for those images (no 4XX code is indicated). The failed request looks as follows:
When I build npm run build and run the app locally npm run start, I see this same request successfully run. Same success story when I run in development mode npm run dev.
Here is the section of code utilizing the next Image module. import Image from "next/image";
<Image
src="/images/computerStation.png"
alt=""
height={300}
width={600}
/>
And my public directory tree:
root
│
└───public
│
└───images
│
└───computerStation.png
Given my local build/dev-env success, my thought is that I am doing something wrong with my docker file. I pretty much just ripped this off from the Next js docs and tweaked it to run with npm instead of yarn. See Dockerfile below:
# Install dependencies only when needed
FROM node:alpine AS deps
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
RUN apk add --no-cache libc6-compat
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install --frozen-lockfile
# Rebuild the source code only when needed
FROM node:alpine AS builder
WORKDIR /app
COPY . .
COPY --from=deps /app/node_modules ./node_modules
RUN npm run build
# Production image, copy all the files and run next
FROM node:alpine AS runner
WORKDIR /app
ENV NODE_ENV production
# You only need to copy next.config.js if you are NOT using the default configuration
# COPY --from=builder /app/next.config.js ./
COPY --from=builder /app/public ./public
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
RUN addgroup -g 1001 -S nodejs
RUN adduser -S nextjs -u 1001
RUN chown -R nextjs:nodejs /app/.next
USER nextjs
EXPOSE 3000
# Next.js collects completely anonymous telemetry data about general usage.
# Learn more here: https://nextjs.org/telemetry
# Uncomment the following line in case you want to disable telemetry.
RUN npx next telemetry disable
CMD ["node_modules/.bin/next", "start"]
Any help on this would be greatly appreciated. Thanks!
You need to check your docker Node version, which should be
FROM node:14-alpine AS deps
FROM node:14-alpine AS builder
FROM node:14-alpine AS runner
Next.js has some problems, in Node 16 (node:alpine).
I've implemented a react application and made into docker. When I run the following command i'm not able to access the react application.
Command :- docker run -p 3000:3000 reactapp
> warmup#0.1.0 start /usr/src/app
> 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 /usr/src/app/public
ℹ ｢wds｣: 404s will fallback to /
Starting the development server...
I'm getting the above message but i'm not able to access the react application.
Below is my docker file.
FROM node
# A directory within the virtualized Docker environment
# Becomes more relevant when using Docker Compose later
WORKDIR /usr/src/app
# Copies package.json and package-lock.json to Docker environment
COPY package*.json ./
# Installs all node packages
RUN npm install
# Copies everything over to Docker environment
COPY . .
# Uses port which is used by the actual application
EXPOSE 3000
# Finally runs the application
CMD [ "npm", "start" ]
Check if you are hitting https://github.com/facebook/create-react-app/issues/8688
You might want to run the docker container with -it option.
docker run -it -p 3000:3000 reactapp
I want to run a simple React application inside Docker. It runs well outside but when I try to run it from docker, I get the following errors and at the moment I have no clue.
custportal_1 | yarn run v1.15.2
custportal_1 | $ react-scripts start
custportal_1 | ℹ ｢wds｣: Project is running at http://172.24.0.12/
custportal_1 | ℹ ｢wds｣: webpack output is served from
custportal_1 | ℹ ｢wds｣: Content not from webpack is served from /usr/src/app/public
custportal_1 | ℹ ｢wds｣: 404s will fallback to /
custportal_1 | Starting the development server...
custportal_1 |
custportal_1 | Done in 2.61s.
custportal_1 exited with code 0
The application is created by create-react-app command. My Dockerfile configuration is
FROM node:11 as build-deps
WORKDIR /usr/src/app
COPY package.json yarn.lock ./
RUN yarn
COPY . ./
RUN yarn build
Again the application runs well outside but breaks when called inside Docker. In docker-compose I call the container with
command: bash -c "export PORT=8081 && yarn start"
** I have nginx reverse proxy running on the background.
Adding stdin_open: true in docker-compose solves the problem. Took hand-full of hours to get this solution. Reference github
Also I have noticed that react-script was calling the browser abruptly inside docker during start up. It's not necessary inside docker. Adding environment variable like BROWSER=none can omit this behaviour.
Happy coding..
I have a react-app, which simple showing hello-world message but I like to run the app throug docker-container but having this problem. After this message, process stopped without running app..
ℹ ｢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...
Can't understand what I should do because I have very small app with basic code in Dockerfile
FROM node:alpine
RUN mkdir /app
COPY . /app
WORKDIR /app
COPY package.json ./
RUN npm install
CMD ["npm", "start"]
Do I need to install webpack-dev-server, I tried but got version error like 'manually added server' has lower version than already server. so I re-install the webpack-dev-server.
I have created app with 'create-react-app', so I think every dependency is managed automatically..
Is anyone have idea, how can I solve the problem.. thanks in advance (BTW..)
Command which I use to build: docker build . -t lucki
Command to run image: docker run -p 3000:3000 lucki
this is project stracture:
after adding DEBUG=* in Dockerfile, I have response as:
The problem is that the dev mode will not run if it is not an interactive terminal.
Change your docker command to include an interactive terminal:
Add -it to your docker run command (-i interactive, -t pseudo-TTY) e.g. docker run -it -p 3000:3000 your_container
Canonical troubleshooting
Make sure the code runs without docker
Does npm start work on the command line?
Showing debug info
Add DEBUG=* as an environment variable inside your container.DEBUG is an environment variable which controls logging for many Node modules.
In your Dockerfile, add
ENV DEBUG=*
Or on the command line, add -e 'DEBUG=*' to your docker command.
This may help spot error messages which are somehow getting swallowed
Run node directly
Instead of running npm start, run your file directly.
e.g. in your Dockerfile,
CMD ["node", "index.js"]
Try running another docker container
If this is a problem with your docker setup, running a known good container may help you discover it.
docker run --rm -it node:alpine
Improvements
Your Dockerfile could also be simplified a bit.
FROM node:alpine
WORKDIR /app
COPY package*.json ./
RUN npm install --production
COPY . .
CMD ["npm", "start"]
mkdir is not needed, as WORKDIR automatically creates the directory.
package*.json will also copy package-lock.json
--production will skip installing devDependencies
Putting the COPY command last will leverage cache better (you won't have to re-run npm install unless your dependencies have changed)
You might also want to use Tini. Tini forwards signals, which means docker stop and pressing control+c in an interactive terminal will actually stop the node process immediately.
If you are using Docker 1.13+, add --init to the command line to have signals forwarded and processes reaped. On older versions, follow the instructions in the README
Same Problem I have Faced and it's fixed By using the following Command
Cause of Problem:- Due to react project setup it requires an input trigger to start the server if not it will automatically stop
FIX:- add -it with the docker run command
Example:- docker run --name main-app -it -p 3000:3000 main-image-react
I got the same issue
it solved when I use like
docker run -it -p 3000:80 <image name>
using -it other than -p and -d solved the issue.
I am trying to start a Docker container with a react project, the project is created using npm init react-app.
This is my docker file
# Specify a base image
FROM node:alpine
WORKDIR /usr/app
# Install some depenendencies
COPY ./package.json ./
RUN npm install
COPY ./ ./
# Default command
CMD ["npm", "run", "start"]
Docker build . creates an image successfully (with a lot of npm warnings) and then when I run Docker run <image> this is the output in my terminal
> mytest#0.1.0 start /usr/app
> 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 /usr/app/public
ℹ ｢wds｣: 404s will fallback to /
Starting the development server...
Soon as it hits Starting the development server... it stops running in my terminal. If I check Docker ps I can see no containers are running, if I run Docker ps -a I can see a container was started up and then exited immediately.
Docker logs shows the terminal output above, anybody run into this situation? Its only with my npm init react-app project, my other nodejs + express projects run fine with the exact same docker file
I tried downgrading but it didn't work. What worked for me is in docker-compose file in the react app sector I added:
stdin_open: true
This solution is also suggested here: issue on github
docker run -it -p 80:3000 imagename resolve my problem.
Running the command with -it worked for me:
docker run -it -p 3001:3000 Imageid
I solve the problem. Inside package.json replace "react-scripts": "3.4.1" to "react-scripts": "3.4.0"
Then rebuild image and It works !
They mess up something with react-scripts": "3.4.1"
Just use version 3.4.0
So nothing is wrong with the setup turns out there is an open issue for this.
https://github.com/facebook/create-react-app/issues/8688
Downgrading to 3.4 solves for now
Ran into the same issue. -it flag resolved the issue.
docker run -it -p 3001:3001 <image-id>
I got the same issue as you and just ran the above command to fix it:
sudo docker run -it -p 3001:3000 Image-Name
Hope it helps
You can use the below with -itd flag as well.
sudo docker run -itd -p 3001:3000 Image-Name
Using the suggestion mentioned in this ans. on stackoverflow and on github, of adding
ENV CI=true to the Dockerfile before CMD ["npm", "run", "start"], worked.
I'm not sure why this works. It may have something to do with this point. You can read more about the env CI=true in the react docs.