Hi I'm Kei, frontend-developer. I'll show how to set up Nuxt.js and Tailwind css on Docker. Nuxt.js is powerful framework to make Web App easily and fast.

1.Make necessary folder and files

First of all, you need make the necessary folder and files for this project. Dockerfile and docker-compose.yml are important for docker project.

"A Dockerfile" is a text document that contains all the commands a user could call on the command line to assemble an image. And "a docker-compose.yml" is yaml file and you define containers and volumes and so on on this file.

├── docker
│   └── nuxt.js
│       ├── Dockerfile
│       └── src
│           └── app
└── docker-compose.yml

2.Edit Dockerfile and docker-compose.yml

You need to edit the Dockerfile. All you have to do is paste the contents below on Dockerfile.
You need to comment out "RUN npm install" / "EXPOSE 3000" / "CMD ["npm", "run", "dev"]" for a while because prevent from causing errors.

FROM node:12


# locale & timezone (Asia/Tokyo)
ENV LANG C.UTF-8
ENV TZ Asia/Tokyo


# system update
RUN apt-get update && \
    apt-get install -y vim less


WORKDIR /root


# install direnv command.
ARG DEV_DIRENV_VERSION=v2.19.0
RUN wget -O direnv https://github.com/direnv/direnv/releases/download/$DEV_DIRENV_VERSION/direnv.linux-amd64 && \
    mv direnv /usr/local/bin/ && \
    chmod +x /usr/local/bin/direnv && \
    echo 'eval "$(direnv hook bash)"' >> ~/.bashrc


# copy application code from host.
ADD src /src
WORKDIR /src/app


## install packages.
## RUN yarn install


## EXPOSE 3000
## CMD ["yarn", "run", "dev"]

OK, next you need to paste the code below on docker-compose.yml.

version: "3"
services:
  nuxt:
    container_name: nuxt
    build:
      context: ./docker/nuxt.js
      dockerfile: Dockerfile
    ports:
      - 3000:3000
    volumes:
      - ./docker/nuxt.js/src:/src:cached
      - /src/app/node_modules
    tty: true
    stdin_open: true
    environment:
      - CHOKIDAR_USEPOLLING=true

And you need to run the following command.

> docker-compose build

3.Create Nuxt App on your project

The time has come to install Nuxt.js on your project. Basically, you can install Nuxt.js by running the following command. But with docker, the command doesn't work and you need to change a little bit.

## using npm
npm init nuxt-app <project-name>

## using yarn
yarn create nuxt-app <project-name>

OK, please move the root directory of your project and run the following command on terminal. But the errors below will cause.

# This command doesn't work!!
> docker-compose run --rm nuxt yarn create nuxt-app

create-nuxt-app v3.2.0
Can't create . because there's already a non-empty directory . existing in path.

So, you need to make temporary folder(I named "temporary") and make folders and files related to Nuxt.js on the temporary folder.

> docker-compose run --rm nuxt yarn create nuxt-app temporary

After you run the command, some folders will be made under "app" directory.

You can set up some options for Nuxt.js.

success Installed "create-nuxt-app@3.6.0" with binaries:
      - create-nuxt-app


create-nuxt-app v3.6.0
✨  Generating Nuxt.js project in nuxt.js
? Project name: nuxt.js
? Programming language: TypeScript
? Package manager: Yarn
? UI framework: Tailwind CSS
? Nuxt.js modules: Axios - Promise based HTTP client
? Linting tools: ESLint
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Continuous integration: None
? Version control system: (Use arrow keys)
❯ Git 
  None 

As this time, your project is like below.

.
├── docker
│   └── nuxt.js
│       ├── Dockerfile
│       └── src
│           └── app
│               └── temporary
└── docker-compose.yml

You need to move all folders and files under the "temporary" folder into "app" folder. Also delete "temporary" folder.

.
├── docker
│   └── nuxt.js
│       ├── Dockerfile
│       └── src
│           └── app
│               ├── README.md
│               ├── assets
│               ├── components
│               ├── layouts
│               ├── middleware
│               ├── node_modules
│               ├── nuxt.config.js
│               ├── package.json
│               ├── pages
│               ├── plugins
│               ├── static
│               ├── store
│               ├── tsconfig.json
│               └── yarn.lock
└── docker-compose.yml

You successfully created nuxt.js

🎉  Successfully created project nuxt.js


  To get started:


        cd nuxt.js
        yarn dev


  To build & start for production:


        cd nuxt.js
        yarn build
        yarn start

4.Modify Dockerfile and package.json

You need to modify a Dockerfile and package.json.

■Dockerfile

## install packages.
RUN npm install


EXPOSE 3000
CMD ["npm", "run", "dev"]

■package.json

 "scripts": {
    "dev": "HOST=0.0.0.0 PORT=3000 nuxt",

Rebuild images from Dockerfile.

> docker-compose build

Create and start containers.

> docker-compose up -d

Finally, you successfully start Nuxt project on docker. Congrats!!


On next article, I'll explain how to tailwind css and asyncData.