Boost Developer Experience with Node.js, Docker, and Compose

Streamline Your Development Workflow with Docker and Node.js

Are you tired of dealing with inconsistent development environments and tedious setup processes? Look no further! In this comprehensive guide, we’ll show you how to supercharge your development workflow using Docker and Node.js.

Getting Started with Express

First, let’s create a new Express project using the Express generator. This will give us a solid foundation for our demo application. Run the following command to generate the project:

npx express-generator <app-name> --view=pug --git

Replace <app-name> with your desired application name. For this example, we’ll use nodejs-docker-express.

Testing the Express App

Next, let’s test our Express app to ensure everything is working as expected. Run the following commands:

npm install
DEBUG=nodejs-docker-express:* npm start

Open your browser and navigate to http://localhost:3000 to see the Express welcome page.

Dockerizing the App

Now, let’s containerize our Node.js and Express application using Docker. This will provide us with a consistent and portable development environment.

Create a new file called Dockerfile and add the following code:

FROM node:18-alpine
WORKDIR /src
COPY package*.json./
RUN npm install
EXPOSE 3000

This Dockerfile uses the official Node.js Alpine image, sets up the working directory, copies the package.json file, installs dependencies, and exposes port 3000.

Setting Up the Base Stage

Let’s break down the Dockerfile into multiple stages to optimize our build process. Add the following code to the Dockerfile:
“`
FROM node:18-alpine as base
WORKDIR /src
COPY package*.json./
RUN npm install
EXPOSE 3000

FROM base as production
ENV NODE_ENV=production
RUN npm ci
COPY. /src
RUN bin/www

FROM base as dev
ENV NODE_ENV=development
RUN npm install
RUN npm run nodemon
COPY. /src
RUN bin/www
“
This code sets up three stages:base,production, anddev. Thebasestage contains common dependencies and configurations, while theproductionanddevstages extend from thebase` stage and add specific settings for each environment.

Don’t Ignore .dockerignore

Remember to create a .dockerignore file to ignore unnecessary files and keep your Docker image small. Add the following code to the .dockerignore file:

.git
node_modules

This will ignore the .git folder and node_modules directory.

Adding Docker Compose

Now, let’s use Docker Compose to simplify our development workflow. Create a new file called docker-compose.yml and add the following code:

version: '3.8'
services:
web:
build:
context:.
target: dev
volumes:
-./:/src
command: npm run start:dev
ports:
- "3000:3000"
environment:
- NODE_ENV=development
- DEBUG=*

This code tells Docker Compose to build the Docker image using the dev stage, mount the local directory to /src in the container, and start the web server with nodemon.

Testing the App with Docker and Docker Compose

Finally, let’s test our app using Docker and Docker Compose. Run the following command:

docker-compose build --build-arg BUILDKIT=1
docker-compose up

Open your browser and navigate to http://localhost:3000 to see the Express welcome page.

Restarting on File Change

Make a change to the routes/index.js file and save it. You should see the web server restart automatically thanks to nodemon.

Congratulations! You’ve successfully set up a Node.js and Express application using Docker and Docker Compose. This will streamline your development workflow and provide a consistent environment for your team.

Next Steps

Want to take your development workflow to the next level? Try adding MongoDB, MySQL, or Postgres as a data source for your application. You can easily add these services to your docker-compose.yml file.

Remember to build your container with the production stage when deploying to a production environment.

Happy coding!