How to create a dockerized Nuxt 3 development environment

#javascript #webdev #docker #nuxt

Nuxt 3 is currently in the release-candidate phase and the stable release is already announced for this summer. To get started with Nuxt 3 we are going to create a minimal dockerized environment for local development.

Why should I use Nuxt with Docker?

There are many reasons why working with docker containers is more convenient than just using your local machine. For example, you do not need to install any language environments or packages on your machine, because you can just use a docker image if you need a ruby or node environment without messing up your system. This comes in handy when you need to work with different versions or configurations of these environments. Also, you can ensure, that everyone on the team is using the same development environment regardless of their local operating system.

While this is especially useful for larger stacks in web development (e.g. Django + Postgres + Redis + Vue) I don't think it's strictly necessary for developing a Nuxt or Vue project. But it has some advantages and I don't want to miss working with docker containers, particularly in projects with other components involved (e.g. for backend or database) besides Nuxt.

Prerequisites

To follow the steps you need to make sure you have already installed both Docker Engine and Docker Compose.

How to dockerize a Nuxt 3 app

Let's start with initializing a fresh Nuxt 3 application following the instructions from the official documentation.

Open the terminal of your choice and scaffold a new project with this command:

npx nuxi init nuxt-app

Now, cd nuxt-app or open the folder in your favorite IDE. Instead of installing the packages on our local machine, we want to create a Docker container where all the dependencies will be installed isolated from our system.

Therefore we need to create a Dockerfile which will be used to build our Docker image with all our Node dependencies including Node itself. Create a new file called Dockerfile and paste the following code:

FROM node:14-alpine

WORKDIR /app

RUN apk update && apk upgrade
RUN apk add git

COPY ./package*.json /app/

RUN npm install && npm cache clean --force

COPY . .

ENV PATH ./node_modules/.bin/:$PATH

Next, we will define our services to tell Docker which containers need to spin up. For now, this is only our Nuxt frontend so we need to create a new file called docker-compose.yml with the following content:

version: '3.3'

services:
  nuxt:
    build:
      context: .
    image: nuxt_dev
    container_name: nuxt_dev
    command: npm run dev
    volumes:
    - .:/app
    - /app/node_modules
    ports:
      - "3000:3000"

Now we are ready to start our local development server on http://localhost:3000 with a simple command in our terminal:

docker-compose up

That's it - your dockerized app is running on https://localhost:3000 - now we are ready to build a bleeding edge web application with the latest version of Nuxt in our dockerized environment. You can also find all the code in my Github Repo. Feel free to use it as a starter template for your next project.