One of the latest features that got released with Docker Desktop 4.18.0 is docker init
which helps to create docker-related assets in the project folder. This post will explain how to utilize the new command in a Next.js
project for generating a Dockerfile
and docker-compose.yml
file.
Next.js
is a popular choice for building server-side rendered React applications. Its features such as automatic code splitting, server-side rendering, and static site generation have made it a powerful tool for building performant web applications.
Setup
One of the pre-requisite to work with Next.js is to have Node.js
installed in your development environment. Let's see how we can scaffold the project with installing node in our local but rather making use of docker image node:18.15.0
.
To create a Next.js app, open your terminal, cd into the directory you’d like to create the app in, and run the following command:
docker run -v $(pwd):/nextjsapp node:18.15.0 \
npx create-next-app nextjsapp --use-npm \
--example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"
npm WARN exec The following package was not found and will be installed: create-next-app@13.3.0
Creating a new Next.js app in /nextjsapp.
Downloading files from repo https://github.com/vercel/next-learn/tree/master/basics/learn-starter. This might take a moment.
Installing packages. This might take a couple of minutes.
added 20 packages, and audited 21 packages in 8s
3 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
Success! Created nextjsapp at /nextjsapp
Inside that directory, you can run several commands:
npm run dev
Starts the development server.
npm run build
Builds the app for production.
npm start
Runs the built app in production mode.
We suggest that you begin by typing:
cd nextjsapp
npm run dev
Let us break the above command in to smaller chunks to understand what it is doing:
- Since I do not have Node.js installed on my local system, I am utilizing the docker image
node:18.15.0
to create a container runtime that allows me to scaffold the project within the container. - To ensure that the project location within the container is persisted, it is mounted on the host filesystem using the parameter
-v $(pwd):/nextjsapp
. - Once the container exits the directory from which you executed the above command will have the below files.
tree -L 1
.
├── README.md
├── node_modules
├── package-lock.json
├── package.json
├── pages
├── public
└── styles
-
npx create-next-app nextjsapp --use-npm \ --example "https://github.com/vercel/next- learn/tree/master/basics/learn-starter"
this part of the command overrideCMD
from the base image.npx
- a cli tool to install and manage dependencies hosted in the npm registry.
Now with single docker init
command you can generate Dockerfile
, compose.yaml
& .dockerignore
file based on the framework used in your project.
docker init
Welcome to the Docker Init CLI!
This utility will walk you through creating the following files with sensible defaults for your project:
- .dockerignore
- Dockerfile
- compose.yaml
Let's get started!
? What application platform does your project use? Node
? What version of Node do you want to use? 18.15.0
? Which package manager do you want to use? npm
? Do you want to run "npm run build" before starting your server? Yes
? What directory is your build output to? (comma-separate if multiple) .next
? What command do you want to use to start the app? npm start
? What port does your server listen on? 3000
CREATED: .dockerignore
CREATED: Dockerfile
CREATED: compose.yaml
✔ Your Docker files are ready!
Take a moment to review them and tailor them to your application.
When you're ready, start your application by running: docker compose up --build
Your application will be available at http://localhost:3000
Upon successful execution of the above command you will see that your Next.js project now has docker support in the project structure.
It thus helps to easily integrate Docker into my current project without the need to write Dockerfile and docker-compose file from scratch.
docker init is currently in beta. Don't use in Production environments