An Interest In:
Web News this Week
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
- March 26, 2024
How to dockerize a React app with Nest JS server code...!
Namaste coders :) Welcome to my tech blog on dockerizing React app with one of Node's typescript framework. This is my first ever post in DEV, excited to contribute it
Basically, there are two ways you can dockerize them,
1. Dockerize both React app and Nest JS separately and compose them.
2. Dockerize both of the apps in a single docker file.
1.Dockerize both React app and Nest JS separately and compose them.
a). Dockerize React app :
Create a docker file as below in React app-
FROM node:14.16.1WORKDIR /appCOPY package.json ./ RUN npm installCOPY . .EXPOSE 3000CMD ["npm", "start"]`
Also create a .dockerignore file
node_modules.git.gitignore
Next step is that we have to build the docker image of the React app.
docker build . -t react
Now run the tagged image as below.
docker run --name react -d -p 80:3000 react
Open http://localhost:3000 and you should see React served from Docker.
Also you can check the docker container running as below with docker ps
command.
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES6aea1cf12647 react "docker-entrypoint.s" 11 days ago Up 3 seconds 0.0.0.0:80->3000/tcp, :::80->3000/tcp react
b). Dockerize Nest JS code :
Create a docker file as below in your server directory-
FROM node:14.16.1WORKDIR /appCOPY package.json ./RUN npm installCOPY . .EXPOSE 5000CMD [ "npm", "run", "start:dev" ]
As similar to above create a .dockerignore file
node_modules.git.gitignore
Next step is that we have to build the docker image of the server app.
docker build . -t server
Now run the tagged image as below.
docker run --name server -d -p 80:5000 server
Let's check this by hitting http://localhost:5000 and you should see your Nest JS being served from Docker.
So, now we have stepped into the final process of running both simultaneously by creating docker compose yaml file in the project root directory as below.
version: "3"services: frontend: container_name: client build: context: ./client dockerfile: Dockerfile image: react ports: - "3000:3000" volumes: - ./client:/app backend: container_name: backend build: context: ./server dockerfile: Dockerfile image: server ports: - "5000:5000" volumes: - ./server:/app
Run the command docker-compose up
and you should see both the apps running.
2.Dockerize both of the apps in a single docker file.
I would recommend this approach than the above, it's simple and preferred to follow for deploying these kind of applications for dev, qa and prod environments.
As we have both apps React and Nest JS server code. We initially need to build our React UI code and should copy the build folder contents as below -
After, we need to paste them in public folder of the Nest JS server code root directory.
Note: In Nest JS, you need to place server static module in app.module.ts file as below
ServeStaticModule.forRoot({ rootPath: join(__dirname, '..', 'public'), }),
Finally, you are all set to run the docker file with commands below
FROM node:14.16.1:lts-alpineRUN mkdir -p /usr/src/appWORKDIR /usr/src/appCOPY . .RUN cd ./client && npm ci && npm run build && cd ..RUN cd ./server && npm ci && cd ..RUN mkdir -p /usr/src/app/server/publicRUN cp -r ./client/build/* ./server/public/WORKDIR /usr/src/app/serverRUN npm run prebuildRUN npm run buildEXPOSE 5000CMD [ "npm", "run", "start:dev" ]
Build the docker file
docker build . -t ReactServer
And finally run the image
docker run --name ReactServer -d -p 80:5000 ReactServer
Open http://localhost:5000 and you should see the application served from Docker.
Congratulations you successfully dockerized React UI and Nestjs server...
If you read something interesting from this article, please like and follow me for more posts.
Original Link: https://dev.to/venkat3750/how-to-dockerize-a-react-app-with-nest-js-server-code-4ka
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To