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.
Related
Backstory: So I have copied the files to the Google Compute Engine VM and am trying to run docker-compose up --build, which in theory should start 3 different instances: rasa-ui, rasa-api and rasa-actions. However, it does not start the one, which has react app on it (rasa-ui). I figured docker file might be the problem.
I tried running only docker image for react app (rasa-ui) and it doesn't start the app at all.
On my local machine code runs and starts the app fine.
Commands I used (and that worked) for docker images locally were:
docker build -t rasa-ui -f Dockerfile
docker run -p 3000:3000 rasa-ui
When I use the same commands in VM, it builds the image, but doesn't run it (and doesn't show any errors, when I run it)
Docker file:
FROM node:alpine
WORKDIR /app
COPY package.json ./
COPY package-lock.json ./
COPY ./ ./
RUN npm i
CMD ["npm", "run", "start"]
Any suggestions?
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 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