DEV Community

loading...

How to dockerize a React app with Nest JS server code...!

Venkat3750
Full stack developer with 3.5+ years experience, worked on various technologies including UI and backend.
惻3 min read

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.1

WORKDIR /app

COPY package.json ./ 

RUN npm install

COPY . .

EXPOSE 3000

CMD ["npm", "start"]`
Enter fullscreen mode Exit fullscreen mode

Also create a .dockerignore file

node_modules
.git
.gitignore
Enter fullscreen mode Exit fullscreen mode

Next step is that we have to build the docker image of the React app.

 docker build . -t react
Enter fullscreen mode Exit fullscreen mode

Now run the tagged image as below.

 docker run --name react -d -p 80:3000 react
Enter fullscreen mode Exit fullscreen mode

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                                   NAMES
6aea1cf12647   react     "docker-entrypoint.sā€¦"   11 days ago   Up 3 seconds   0.0.0.0:80->3000/tcp, :::80->3000/tcp   react
Enter fullscreen mode Exit fullscreen mode

b). Dockerize Nest JS code :

Create a docker file as below in your server directory-

FROM node:14.16.1

WORKDIR /app

COPY package.json ./

RUN npm install

COPY . .

EXPOSE 5000

CMD [ "npm", "run", "start:dev" ]
Enter fullscreen mode Exit fullscreen mode

As similar to above create a .dockerignore file

node_modules
.git
.gitignore
Enter fullscreen mode Exit fullscreen mode

Next step is that we have to build the docker image of the server app.

 docker build . -t server
Enter fullscreen mode Exit fullscreen mode

Now run the tagged image as below.

 docker run --name server -d -p 80:5000 server
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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 -

Alt Text

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'),
  }),
Enter fullscreen mode Exit fullscreen mode

Finally, you are all set to run the docker file with commands below

FROM node:14.16.1:lts-alpine
RUN mkdir -p /usr/src/app

WORKDIR /usr/src/app

COPY . .

RUN cd ./client && npm ci  && npm run build && cd ..

RUN cd ./server && npm ci  && cd ..

RUN mkdir -p /usr/src/app/server/public

RUN cp -r ./client/build/* ./server/public/

WORKDIR  /usr/src/app/server

RUN npm run prebuild

RUN npm run build

EXPOSE 5000

CMD [ "npm", "run", "start:dev" ]
Enter fullscreen mode Exit fullscreen mode

Build the docker file

 docker build . -t ReactServer
Enter fullscreen mode Exit fullscreen mode

And finally run the image

docker run --name ReactServer -d -p 80:5000 ReactServer
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (2)

Collapse
gopalkrishnarao profile image
gopalkrishnarao

Good one bro .keep it up .keep writing

Collapse
venkat3750 profile image
Venkat3750 Author

Thanks bro.