ยท
3 min read

Dockerizing a Nuxt App: A Comprehensive Guide

Dockerizing a Nuxt App: A Comprehensive Guide Image

Docker has revolutionized the way developers build, ship, and run applications by providing a consistent environment for development, testing, and production.

In this guide, I'll walk you through the steps to dockerize a Nuxt 3+ application, enabling you to create a containerized version of your app that can be easily deployed across different environments.

Why Dockerize Your Nuxt App?

Before we dive into the details, let's discuss why you might want to dockerize your Nuxt 3 app:

  1. Consistency: Docker ensures that your application runs the same way on any machine, eliminating the "works on my machine" problem.
  2. Isolation: Each application runs in its own container, isolated from other applications and their dependencies.
  3. Scalability: Docker makes it easier to scale your applications horizontally by running multiple containers.
  4. Portability: Docker containers can run on any system that supports Docker, making it easy to move applications between environments.

Prerequisites

To follow along with this guide, you'll need the following:

  • I'm using pnpm as the package manager in this guide, but you can use npm, yarn or bun if you prefer.
  • Basic knowledge of Docker and Docker Compose.
  • A Nuxt 3+ application.
  • Docker installed on your machine.

Step 1: Set Up Your Nuxt 3 Application

If you don't have a Nuxt 3+ app already, create one using the following commands:

bash
1pnpm dlx nuxi@latest init my-nuxt-app
2cd my-nuxt-app
3pnpm install

This will create a new Nuxt 3+ application in the my-nuxt-app directory and install all the necessary dependencies.

Step 2: Create a Dockerfile

In the root of your Nuxt 3+ application, create a file named Dockerfile. This file will define the environment and the steps needed to run your application inside a Docker container.

Here's an example Dockerfile for a Nuxt 3+ application:

Dockerfile
1ARG NODE_VERSION=20.14.0
2
3# Create build stage
4FROM node:${NODE_VERSION}-slim AS build
5
6# Enable pnpm
7ENV PNPM_HOME="/pnpm"
8ENV PATH="$PNPM_HOME:$PATH"
9RUN corepack enable
10
11# Set the working directory inside the container
12WORKDIR /app
13
14# Copy package.json and pnpm-lock.yaml files to the working directory
15COPY ./package.json /app/
16COPY ./pnpm-lock.yaml /app/
17
18## Install dependencies
19RUN pnpm install --shamefully-hoist
20
21# Copy the rest of the application files to the working directory
22COPY . ./
23
24# Build the application
25RUN pnpm run build
26
27# Create a new stage for the production image
28FROM node:${NODE_VERSION}-slim
29
30# Set the working directory inside the container
31WORKDIR /app
32
33# Copy the output from the build stage to the working directory
34COPY --from=build /app/.output ./
35
36# Define environment variables
37ENV HOST=0.0.0.0 NODE_ENV=production
38ENV NODE_ENV=production
39
40# Expose the port the application will run on
41EXPOSE 3000
42
43# Start the application
44CMD ["node","/app/server/index.mjs"]

Step 3: Build and Run the Docker Image

With the Dockerfile in place, you can build the Docker image using the following command:

bash
docker build -t my-nuxt-app .

This command tells Docker to build an image with the tag my-nuxt-app using the current directory (denoted by the .).

Once the image is built, you can run a container using the following command:

bash
docker run -p 3000:3000 my-nuxt-app

This command runs the my-nuxt-app container and maps port 3000 on your host machine to port 3000 inside the container. You should now be able to access your Nuxt 3 application by navigating to http://localhost:3000 in your web browser.

Step 4: Using Docker Compose (Optional)

For more complex applications with multiple services (e.g., a database and a web server), you can use Docker Compose to define and run multi-container Docker applications.

Create a docker-compose.yml file in the root of your project:

yaml
1version: '3'
2services:
3  web:
4    build: .
5    ports:
6      - "3000:3000"

With this docker-compose.yml file, you can build and run your multi-container application using a single command:

bash
docker-compose up

Conclusion

Dockerizing your Nuxt 3 application provides numerous benefits, including consistency, isolation, scalability, and portability.

By following this guide, you can easily create a Docker container for your Nuxt 3+ app and run it in any environment that supports Docker. Whether you're a solo developer or part of a larger team, Docker can help streamline your development workflow and simplify deployment processes.

If you liked this article, follow me on X to get notified about my new blog posts and more content.

Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter:

I will never share any of your personal data. You can unsubscribe at any time.

If you found this article helpful.You will love these ones as well.
Self-Host Your Nuxt App With Coolify Image

Self-Host Your Nuxt App With Coolify

Focus & Code Diff in Nuxt Content Code Blocks Image

Focus & Code Diff in Nuxt Content Code Blocks

A Comprehensive Guide to Data Fetching in Nuxt 3 Image

A Comprehensive Guide to Data Fetching in Nuxt 3

Use Shiki to Style Code Blocks in HTML Emails Image

Use Shiki to Style Code Blocks in HTML Emails