I created a Linux container in docker with all the packages and dependencies I need it for my school project. I am aware you can deploy react app containers and use Docker for deployment, although I did not want that. I just need it a Linux container with everything installed so all the members in the team will use the same versions of npm and node. After building the container I ran inside my workdir folder:
npx create-react-app my-app
cd my-app
npm start
and this is what it shows
enter image description here
which means that the app is running locally in my computer how can I see it locally in my PC?
use this to run your image:
docker run -d -p 8080:8080 my_image
-p 8080:808 - will map your docker container port to your localhost 8080 port, and you should be able to just go on http://localhost:8080 to see it.
(assuming that npm start is starting server on 8080 inside of your docker)
-d means in detached mode, your going to start docker and stay outside of it.
Related
I generated a base react app with create-react-app and generated a Dockerfile.dev inside of the project directory
FROM node:16-alpine
WORKDIR '/app'
COPY ./package.json ./
RUN npm install
COPY ./ ./
CMD [ "npm","start" ]
Ran the build with docker build -f Dockerfile.dev -t dawnmd/react .
Started the docker container with docker run -it -p 3000:3000 -v /app/node_modules -v ${PWD}:/app dawnmd/react
The app not detecting changes from the host i.e windows 11 when I change something in the host file.
It's true that CHOKIDAR_USEPOLLING=true doesn't work with docker and windows 11.
However there is a workaround - you can use vscode remote container extension found here:
VSCode Documentation: https://code.visualstudio.com/docs/remote/containers
VSCode Remote Download: https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers
If you have Docker Desktop installed, VSCode installed, and VSCode Remote containers installed. You can then do the following:
Open the react project in VSCode
Press CRTL + SHIFT + P, and then type and select the following: "Remote-Container: Open folder in Container"
VSCODE Open in Remote Containers
It would then ask for, "Add Development Container Configuration Files" to which you can select one of the following from dockerfile, docker-compose, or from predefined container configuration. Your project maybe different from mine hence the selection is up to you.
VS Code Remote-Container Configuration
4.Once Everything has been loaded. Using VSCode select terminal from the menu and then new terminal and then type "npm start" or "yarn start" as shown on the figure.
Running React in Remote-Container
*Opinion: The benefit of running react using vscode remote container is that the computer doesn't have to work much harder as it re-compiles/rebuild react whenever you save the js file on demand. Unlike chokidar_usepolling which compiles react every-second. Which makes my computer scream running a virtual library and the constant reload on the browser.
Note: Any changes made in the remote-container is also saved in the host machine.
Note: You would have to use git bash or another terminal(i.e Powershell) to execute all git commands as the terminal in vscode opens a terminal which resides in the container.
For windows using power-shell the run command will be:
docker run -it --rm -v ${PWD}:/app -v /app/node_modules -p 3000:3000 -e CHOKIDAR_USEPOLLING=true <IMAGE>
CHOKIDAR_USEPOLLING=true enables a polling mechanism via chokidar (which wraps fs.watch, fs.watchFile, and fsevents) so that hot-reloading will work
I'm trying to dockerise a react app. I'm using the following Dockerfile to achieve this.
# base image
FROM node:9.4
# set working directory
WORKDIR /usr/src/app
# install and cache app dependencies
COPY package*.json ./
ADD package.json /usr/src/app/package.json
RUN npm install
# Bundle app source
COPY . .
# Specify port
EXPOSE 8081
# start app
CMD ["npm", "start"]
Also, in my package.json the start script is defined as
"scripts": {
"start": "webpack-dev-server --mode development --open",
....
}
I build the image as:
docker build . -t myimage
And I finally run the image, as
docker run IMAGE_ID
This command then runs the image, however when I go to localhost:8080 or localhost:8081 I dont see anything.
However, when I go into the docker container for myimage, and do curl -X GET http:localhost:8080 I'm able to access my react app.
I also deployed this on google-kubernetes and exposed a load-balancer service on this. However, the same thing happened, I cannot access the react-app on the exposed endpoint, but when I logged into the container, and made curl request, I was getting back the index.html.
So, how do I run the image of this docker image so that I could access the application through a browser.
When you use EXPOSE in Dockerfile it simply states that the service is listening on the specified port (in your case 8081), but it does not actually create any port forwarding.
To actually forward traffic from host machine to the service you must use the -p flag to specify port mapping
For example:
docker run -d -p 80:8080 myimage would start a container and forward requests to localhost:80 to the containers port 8080
More about EXPOSE here https://docs.docker.com/engine/reference/builder/#expose
UPDATE
So usually when you are developing node applications locally and run webpack dev-server it will listen on 127.0.0.1 which is fine since you intend to visit the site from the same machine as it is hosted. But since in docker the container can be thought of as a separate instance that means you need to be able to access it from the "outside" world which means that it is necessary to reconfigure the dev-server to listen on 0.0.0.0 (which basically means all IP addresses assigned to the "instance")
So by updating the dev-server config to listen on 0.0.0.0 you should be able to visit your application from your host machine.
Link to documentation: https://webpack.js.org/configuration/dev-server/#devserverhost
I made a website to React and I'm trying to deploy it to an Nginx server by using Docker. My Dockerfile is in the root folder of my project and looks like this:
FROM tiangolo/node-frontend:10 as build-stage
WORKDIR /app
COPY . ./
RUN yarn run build
# Stage 1, based on Nginx, to have only the compiled app, ready for production with Nginx
FROM nginx:1.15
COPY --from=build-stage /app/build/ /usr/share/nginx/html
# Copy the default nginx.conf provided by tiangolo/node-frontend
COPY --from=build-stage /nginx.conf /etc/nginx/conf.d/default.conf
When I run docker build -t mywebsite . on the docker terminal I receive a small warning that I'm building a docker image from windows against a non-windows Docker host but that doesn't seem to be a problem.
However, when I run docker run mywebsite nothing happens, at all.
In case it's necessary, my project website is hosted on GitHub: https://github.com/rgomez96/Tecnolab
What are you expecting ? Nothing will happen on the console except the nginx log.
You should see something happening if you go to http:ip_of_your_container.
Otherwise, you can just launch your container with this command :
docker container run -d -p 80:80 mywebsite
With this command you'll be able to connect to your nginx at this address http://localhost as you are forwarding all traffic from the port 80 of your container to the port 80 of your host.
I'm trying to run docker on Windows 10 (Linux Containers Mode) to run react development workspace. I managed to run React app boilerplate but livereloading is not working.
Here's some details:
Dockerfile is exposing both 5000 and 35729 ports
Files are mounted and created inside the container via docker exec and create-react-app . commands
WS request status is 101 (that's correct)
Dockerfile:
FROM node:latest
#installing react app first
RUN npm install -g create-react-app
VOLUME [ "/application" ]
#First example was EXPOSE 3000 35729
EXPOSE 3000
EXPOSE 35729
Build command: docker build . -t react-image
Run command: docker run -d -p 3000:3000 -p 35729:35729 -v %PATH_TO_APP_FOLDER%\application:/application --name react-container react-image
Exec command: docker exec -it react-container bash
Then inside the container:
cd application
create-react-app .
yarn start
OUTPUT:
Compiled successfully!
You can now view application in the browser.
Local: http://localhost:3000/ On Your Network:
http://172.17.0.2:3000/
Note that the development build is not optimized. To create a
production build, use yarn build.
Once I open: http://localhost:3000 everything seems to work fine. If I change files from my host machine files are also changed inside the container (checked with cat App.js). But changing files doesn't trigger webpack re-compiling and livereload.
Any suggestions?
Please let me know if I need to provide more details. Thanks
This can be solved by setting watchOptions.poll to true inside the webpack config:
References
I am trying to run a freshly create react app made with create-react-app in docker. I have a Docker file which succesfully allows me to build the image, but when I try to run it I get:
PS C:\Users\Bertinator\desktop\gamelist\client> docker run client4 .
container_linux.go:265: starting container process caused "exec: \".\":
executable file not found in $PATH"
C:\Program Files\Docker\Docker\Resources\bin\docker.exe: Error response from
daemon: oci runtime error: container_linux.go:265: starting container
process caused "exec: \".\": executable file not found in $PATH".
ERRO[0001] error waiting for container: context canceled
PS C:\Users\Bertinator\desktop\gamelist\client>
This is my Docker file, which is place in the root folder of my create-react-app project:
FROM node:7.8.0
ENV NPM_CONFIG_LOGLEVEL warn
COPY . .
RUN npm run build --production
RUN npm install -g serve
CMD serve -s build
EXPOSE 5000
Are you running from a Linux docker image on a Windows machine? That does not work.
Ref http://training.play-with-docker.com/beginner-linux/
(...) Linux containers require the Docker host to be running a Linux kernel. For example, Linux containers cannot run directly on Windows Docker hosts. The same is true of Windows containers - they need to run on a Docker host with a Windows kernel.
When you say docker run client4 . you are asking docker to run that container and execute the . (dot) command which does not make sense. That is why you are getting the first error.