docker init - create docker related assets

Sujay Pillai - May 15 '23 - - Dev Community

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

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  • npx create-next-app nextjsapp --use-npm \ --example "https://github.com/vercel/next- learn/tree/master/basics/learn-starter" this part of the command override CMD 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
Enter fullscreen mode Exit fullscreen mode

Upon successful execution of the above command you will see that your Next.js project now has docker support in the project structure.

Image description

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

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .