How to dockerize the Nuxt3 Beta on AWS?
Tags: docker, ecr, nuxt3
Published: 2022-02-28 13:09:18

---
title: How to dockerize the Nuxt3 Beta on AWS?
published: true
description: This article will show you how to dockerize Nuxt3 Beta and save in AWS ECR.
tags: docker, ecr, nuxt3
//cover_image: https://direct_url_to_image.jpg
---

# 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?
```bash
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.

```bash
yarn add tailwindcss
npx tailwind init
```
Note: the tailwind init commit will create the tailwind.config.js.

### Configure tailwind.config.js as such:
```bash
module.exports = {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",    
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```
### Create the tailwind.css file.
```bash
mkdir -p assets/css/ && touch assets/css/tailwind.css
```
### Configure the tailwind.css as such:
```bash
@tailwind base;
@tailwind components;
@tailwind utilities;
```
### Add the following to nuxt.config.ts:
```bash
build: {
        postcss: {
          postcssOptions: {
            plugins: {
              tailwindcss: {},
              autoprefixer: {},
            },
          },
        },
      },
      css: [
        "~/assets/css/tailwind.css"
  ],
})
```
### Remove app.vue and create /pages/index.vue. index.vue. 
```bash
mkdir pages && touch pages/index.vue
```
### Add content with tailwind styling to index.vue.
```bash
<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
```bash
# 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.

```bash
docker build -t <application name> .
```
### Create the docker-compose.yml, then copy the Docterfile to nuxt3.dockerfile so that you can use docker-compose.

```bash
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.

```bash
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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/av1a90jtv8hp9s6ps1le.png)

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

```bash
<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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zg30b5ux9flesl4kwoqo.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tf83puoo90sxhlthm6xr.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u63klqaxt1w3lwsaf0jm.png)

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.