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
Related
I am using docker toolbox on windows home and having trouble figuring out how to get bind mount working in my frontend app. I want changes to be reflected upon changing content in the src directory.
App structure:
Dockerfile:
FROM node
WORKDIR /app
COPY package.json .
RUN npm install
COPY . .
EXPOSE 3000
CMD [ "npm", "start" ]
Docker commands:
(within the frontend dir) docker build -t frontend .
docker run -p 3000:3000 -d -it --rm --name frontend-app -v ${cwd}:/app/src frontend
Any help is highly appreciated.
EDIT
cwd -> E:\docker\multi\frontend
cwd/src is also not working. However, i find that with /e/docker/multi/frontend/src the changes are reflected upon re running the same image
i have ran into same issue it feels like we should use nodemon to look for file changes and restart the app.
because with docker reference and tutorials project does the thing.
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.
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'm trying to use Docker to improve my workflow. I installed "Docker Toolbox for Windows" on my Windows 10 home edition (since Docker supposedly only work on professional). I'm using mgexhev's angular-seed which claim to provide full docker support. There is a docker-compose.yml file which links a ./.docker/angular-seed.development.dockerfile.
After git cloning the seed project I can start it by running the commands given on the seed project's github page. So I can see the app after running:
$ docker-compose build
$ docker-compose up -d
But when I change code with Visual Studio Code and save the livereload doesn't work. The only way I can see my changes is by re-running the build and up commands (which re-runs npm install; 5min).
In Docker's documentation they say to "Mount a host directory as a data volume" in order to be able to "change the source code and see its effect on the application in real time"
docker run -v //c/<path>:/<container path>
But I'm not sure this is right when I'm using docker-compose? I have also tried running:
docker run -d -P --name web -v //c/Users/k/dev/:/home/app/ angular-seed
docker run -p 5555:5555 -v //c/Users/k/dev/:/home/app/ -w "/home/app/" angular-seed
docker run -p 5555:5555 -v $(pwd):/home/app/ -w "/home/app/" angular-seed
and lots of similar commands but nothing seems to work.
I tried moving my project from C:/dev/project to home because I read somewhere that there might be some access right issues not using the "home" directory, but this made no difference.
I'm also a bit confused that the instructions say visit localhost:5555. I have to go to dockerIP:5555 to see the app (in case this help anyone understand why my code doesn't update inside of my docker container).
Surely my changes should move in to the docker environment automatically or docker is not very useful for development :)
Looking at the docker-compose.yml you've linked to, I don't see any volume entry. Without that, there's no connection possible between the files on your host and the files inside the container. You'll need a docker-compose.yml that includes a volume entry, like:
version: '2'
services:
angular-seed:
build:
context: .
dockerfile: ./.docker/angular-seed.development.dockerfile
command: npm start
container_name: angular-seed-start
image: angular-seed
networks:
- dev-network
ports:
- '5555:5555'
volumes:
- .:/home/app/angular-seed
networks:
dev-network:
driver: bridge
Docker-machine runs docker inside of a virtual box VM. By default, I believe c:\Users is shared into the VM, but you'll need to check the virtual box settings to confirm this. Any host directories you try to map into the container are mapped from the VM, so if your folder is not shared into that VM, your files won't be included.
With the IP, localhost works on Linux hosts and newer versions of docker for windows/mac. Older docker-machine based installs need to use the IP of the virtual box VM.