How to dockerize the Nuxt3 Beta on AWS?

Innovation is rampant in the Nuxt3 ecosystem. Nothing is safe. Everything we know about enterprise-grade web application development is up for grabs. With advances like the Vite bundler and the Nitro server, you could make the case that the entire javascript world stands to benefit. We might as well start exploring this new opportunity space with some low-hanging fruit like a docker container.

You could make the case that the docker container is the smallest component in modern web development. It is a building block used by more complex technologies like Amazon Elastic Container Service and Amazon Kubernetes Service. Just a heads up, real surprises will present themselves even at this level. For example, there is no dist directory created after the build. Nuxt3 uses a .output folder. Let's get started:

What are the Nuxt3 Prerequisites?

You need access to the following:

– AWS account

– Node

– Yarn

– Git

– Docker

– Docker-compose

– Visual Studio Code

How to install Nuxt3?

npx nuxi init <app-name>
cd <app-name>
yarn install
yarn build
code .
yarn dev

Note: I like to run yarn build instead of yarn dev to build out all the directories for git. I run yarn dev to start the dev server.

How to install Tailwindcss?

Nuxt3 has caused many web developers to question everything, including how best to do style javascript code. A lot of Nuxt3/Vue developers are moving to Tailwindcss. You could make the case that tailwindcss is true to the single file component philosophy. On the other hand, the tailwindcss step is purely optional.

yarn add tailwindcss
npx tailwind init

Note: the tailwind init commit will create the tailwind.config.js.

Configure tailwind.config.js as such:

module.exports = {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",    
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Create the tailwind.css file.

mkdir -p assets/css/ && touch assets/css/tailwind.css

Configure the tailwind.css as such:

@tailwind base;
@tailwind components;
@tailwind utilities;

Add the following to nuxt.config.ts:

build: {
        postcss: {
          postcssOptions: {
            plugins: {
              tailwindcss: {},
              autoprefixer: {},
            },
          },
        },
      },
      css: [
        "~/assets/css/tailwind.css"
  ],
})

Remove app.vue and create /pages/index.vue. index.vue.

mkdir pages && touch pages/index.vue

Add content with tailwind styling to index.vue.

<template>
  <div class="container mx-auto bg-gray-300 p-8">
    <h1 class="font-bold text-gray-600 text-lg text-center">Hello, Tailwind 3!</h1>
  </div>
</template>

How to create our first Nuxt3 container?

Create the Dockerfile

# Dockerfile
FROM node:16-alpine3.14

# create destination directory
RUN mkdir -p /usr/src/nuxt-app
WORKDIR /usr/src/nuxt-app

# update and install dependency
RUN apk update && apk upgrade
RUN apk add git

# copy the app, note .dockerignore
COPY package.json .
RUN yarn install
COPY . .
RUN yarn build

EXPOSE 3000

ENV NUXT_HOST=0.0.0.0
ENV NUXT_PORT=3000

CMD [ "yarn", "start" ]

Run the docker build command.

docker build -t <application name> .

Create the docker-compose.yml, then copy the Docterfile to nuxt3.dockerfile so that you can use docker-compose.

version: '3.9'

services:
  nuxt3:
    build:
      context: .
      dockerfile: nuxt3.dockerfile
   ports:
      - 3000:3000

What is the .dockerignore file and why do we need it?

The time it takes to build an image matters when you're working on a project. And the most time consuming part of this process is the node_modules. The best way to limit that process to include a .dockerignore like the described below.

Touch .dockerignore in the root directory and add the following configuration to the file.

node_modules
Dockerfile
.git/
.gitignore
.dockerignore

How to add Nuxt3 docker image to AWS Elastic Container Registry

The next stage takes us into the AWS Cloud and removes a lot of the undifferentiated heavy lifting. There are over 200 technology services that we can explore and eventually adopt to improve the scalability of our workflow. So, we will start with the simple docker container you created earlier.

Open the AWS Console and navigate to the AWS ECR console. Click the "Create Repository" button. Next, enter the name of the repository you want to create. I entered nuxt3-aws. Make sure the visibility setting is set to private.

Edit the nuxt3.dockerfile and replace the FROM node entry with the following node URI.

<account number>.dkr.ecr.<region name>.amazonaws.com/ecr-public/docker/library/node

Note: Replacing the Node entry will store the docker image in AWS ECR and result in a security enhancement. However, you will incur a cost if you exceed the Free Tier storage limits.

Click the Create Repository button at the bottom of the page.

Click on the newly created repository. It will open the repository page and show you the view push commands button.

Follow steps 1, 3, and 4. You can run the "docker-compose --build" instead of the docker build command on the command line.

Note: You can find the correct container by issuing "docker image ls" from the command line. The image at the top of the screen should be the one.

Conclusion

The nuxt3 opportunity space is vast. And nothing can be taken for granted. The journey will be uncomfortable and, at times, painful. With nuxt3 and AWS, we have to rethink how we have always done enterprise software development. The good news is some say that it reminds them of the early days of React. Hopefully, this article will entice you to take a walk on the wild side and check out what Nuxt3 has to offer.