How could I run this dockerized app in development mode? - node.js

Question

The fronted is made with create-react-app and the backend is Node.js with Firebase.
This is my folder structure:
my-app
├── docker-compose.yml
├── client
│ ├── Dockerfile
│ ├── package.json
├── server
│ ├── Dockerfile
│ ├── package.json
docker-compose.yml
version: "3.8"
services:
client:
container_name: client
build: ./client
ports:
- "3000:3000"
tty: true
server:
container_name: server
build: ./server
ports:
- "5000:5000"
client/package.json
{
"name": "react-ui",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.19.2",
"node-sass": "^4.14.1",
"normalize.css": "^8.0.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-redux": "^7.2.1",
"react-scripts": "^3.4.1",
"redux": "^4.0.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"proxy": "http://server:5000",
"secure": false
}
client/Dockerfile
FROM node:lts
WORKDIR /client
COPY package*.json /client/
RUN npm install
COPY . /client/
RUN npm run build
EXPOSE 3000
CMD [ "npm", "start" ]
server/package.json
{
"name": "snake-react-node",
"version": "3.0.0",
"engines": {
"node": "10.x"
},
"scripts": {
"start": "node ./build/index.js",
"build": "tsc",
"dev": "nodemon ./src/index.ts"
},
"dependencies": {
"#types/express": "^4.17.7",
"cors": "^2.8.5",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"firebase-admin": "^9.0.0",
"moment": "^2.27.0",
"rimraf": "^3.0.2",
"ts-node-dev": "^1.0.0-pre.56",
"typescript": "^3.9.7"
},
"license": "MIT",
"devDependencies": {
"nodemon": "^2.0.4",
"npm-run-all": "^4.1.5"
}
}
server/Dockerfile
FROM node:lts
WORKDIR /server
COPY package*.json /server/
RUN npm install
COPY . /server/
RUN npm run build
EXPOSE 5000
CMD [ "npm", "start" ]
When I run docker-compose up on the root directory, two images and two containers get created, one for each Dockerfile. The app runs flawlessly and a production build is created but I would like to be able to use Docker for development too, with live reloads

Answer 1

Since your server container publishes ports: out, you can change the proxy settings in your package.json file to point at this. In your non-Docker host development environment, set
"proxy": "http://localhost:5000"
and then you can npm run dev to have a totally ordinary local live-reloading development server, targeting your backend service that's running in Docker.
There's not really any technical benefits to trying to simulate a local development environment inside a Docker container, especially for a browser-based application. A typical Webpack-based build toolchain doesn't have complex native dependencies that would require special setup, and since the application itself runs in the browser, it can't take advantage of Docker networking and the container itself doesn't provide any of the application's runtime environment. So the only real difference between running the dev server on the host vs. in a container is which version of Node the Webpack build is using, and hopefully this isn't a substantial difference to your application.

Answer 2

You can use bind volume mounts for dev live reload. Make another dev compose file like docker-compose-dev.yml and add the volumes: section.
Whenever code is changed on the host machine using your favorite IDE, the container will pick it up and do the hot reload.
Note: I haven't tested this setup. Just suggesting something you could do.
#docker-compose-dev.yml
version: "3.8"
services:
client:
container_name: client
build: ./client
volumes:
- ./frontend-src:/client/src
ports:
- "3000:3000"
tty: true
server:
container_name: server
build: ./server
ports:
- "5000:5000"