nuxt-dockerize-example

A minimal NuxtJS docker image example application

Nuxt versions

The main branch is currently using NuxtJS version 2. If you would like to view this application in version 3 of NuxtJS, please switch to the nuxt-v3 branch.

Nuxt Bridge

Nuxt Bridge is a forward-compatability layer for using NuxtJS v3 features such as Nitro on NuxtJS v2. For more information see: https://v3.nuxtjs.org/bridge/overview/

There are two other branches available in this repository.

• The branch: nuxt-bridge contains a working version of Nuxt Bridge. This includes a Docker container.
• The branch: nuxt-bridge-broken contains a showcase of what happens when you mix Nuxt Bridge with the regular NuxtJS v2 build system. This will result in a working development environment but a broken production environment.

Internal libraries

This applications also contains a locally built NPM module. The library is written in Typescript and transpiled to Javascript. This module is installed as a symlink and is bundled as a .js file using tsup. Libraries are included in the libs folder.

Custom modules and server middleware

This application sports four different modules.

1. The customModule. This module adds a badge to the Nuxt start-up process saying the module is initialized. This is a buildModule.
2. The middlewareModule. This module logs every URL request it intercepts. This is a module and pushes serverMiddleware.
3. The loremModule. This module generates random lorem ipsum upon start-up using an external package: lorem-ipsum. This is a buildModule.
4. The uuidModule. This module logs generates a random UUID on start-up using an external package: uuid. This is a module.

Available pages

Currently there are 4 pages available:

1. / - The home page, a page with static data
2. /ssr - A page that dynamically renders data from an external API
3. /env - A page that retrieves both a public and a private environment variable and prints them on-screen
4. /guid - A page that prints a GUID generated by an external library
5. /lipsum - A page that prints some generated Lorem Ipsum from an internal library

How to run

Copy the .env.example file and rename it to .env. Run the following commands:

1. npm i
2. npm run build
3. npm run start

Docker

Docker Compose

The easiest way to get the application up and running is by using Docker Compose. Simply run the command docker-compose up -d in the root of this repository. If you want to rebuild the image you can run the following Docker Compose command: docker-compose up -d --build.

This will result in two applications running:

1. The application now runs on http://localhost:3000/

Manually building the image

1. Build the docker image by running docker build -f .\Dockerfile . -t nuxt-dockerize-example
2. Run the docker image by running docker run -d -p 3000:3000 nuxt-dockerize-example