Node.js and Next.js Blog in Docker

Need to create a Nextjs app and then dockerize it.

This post assumes that nodejs is installed

but if it is not installed install nvm (node version manager) first and then install node from within it. 20230408_Nodejs-Install_the_Right_Way

Now navigate in terminal into the folder where you need to have the nodejs app created

npx create-next-app@latest

It will ask you to install the create-next-app@13.1.16

Proceed to install.

You will be prompted to name your app. eg nextjs-blog

Use Typescript Yes

Use ESlint No

✔ What is your project named? … nextjs-blog

✔ Would you like to use TypeScript with this project? … No / Yes

✔ Would you like to use ESLint with this project? … No / Yes

✔ Would you like to use src/ directory with this project? … No / Yes

✔ Would you like to use experimental app/ directory with this project? … No / Yes

✔ What import alias would you like configured? … @/*

This creates all the needed files in the nextjs-blog directory

This would initialize project with template: app

It also initialized a git repository.

run npm run dev to start the server. It will be ready on http://localhost:3000

It will compile all files in the app folder.

To read markdown files we need to install a thirdparty plugin markdown-to-jsx

https://npmjs.com/package/markdown-to-jsx

In terminal type

npm i markdown-to-jsx

Now you can import the plugin in anypage that requires .md files to be interpreted.

We want to parse the front matter in a md file to show as metadata. For this install add on from npmjs.com called gray-matter https://www.npmjs.com/package/gray-matter

npm i gray-matter

Go to page.tsx in the app folder and import gray-matter

Editing the Blog

CD to the npm app folder, in this case nextjs-blog

npm start

npm run dev

To make the app production ready, need to run npm run build

This will create the files that will be static and those files that will be served from the server.

Style the Blog

Tailwindcss

Search for installation instruction in next.js

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

After installation there will be tailwind.config.js and postcss.config.js in the root directory. Edit the tailwind.config.js as described in the installation page.

Then modify the global.css file as mentioned in the installation page.

For typography tailwindcss.com/docs/typography-plugin

Install using

npm install -D @tailwindcss/typography

Update the tailwind.config.js as instructed in the page

Add class to modify typography.

<article class=“prose lg:prose-xl”>

Dockerize the app

Easy steps to follow from Using Docker with your Next.JS application | Introduction to Dockerfile by Mayank Srivastava https://www.youtube.com/watch?v=XMM1jrGzURU&t=190s

In the root of the app, create .dockerignore file

#files to ignore while copying to the image file system

.next

node_modules

Then create Dockerfile with the following commands

#base image
FROM node:19-alpine

RUN mkdir -p /usr/app/

WORKDIR /usr/app

#copy from to

COPY ./ ./

RUN npm install

RUN npm run build

EXPOSE 3000

CMD ["npm", "start"]

While being the root directory, run the following commands to create docker image

docker build -t nextjs-blog ./

View the created docker image by command

docker images

Then run the image

If want to name it from the beginning use the - -name command. Note the two - don’t have space between them.

docker run -d --name nextjs-blog(containername) -p 3000:3000 nextjs-blog(imagename)

the -d flag tells docker to run in a detached mode

Having the bash command in the run command gives a shell to run command

docker run -it -d --name container_name -p 3000:3000 image_name bash

docker run -itd --name nextjs-blog -p 3000:3000 nextjs-blog:latest

The above command will create a new container with the specified name from the specified docker image. The container name is optional. source: https://linuxhandbook.com/run-docker-container/

• The -i option means that it will be interactive mode (you can enter commands to it)
• The -t option gives you a terminal (so that you can use it as if you used ssh to enter the container).
• The -d option (daemon mode) keeps the container running in the background. Otherwise if you exit the container, the container stops.
• bash is the command it runs.

If you run using insufficient parameters it will create an image with random name like following.

docker run -p 3000:3000 nextjs-blog— [OR Use the improved command below]

Now the app will be accessible on http://localhost:3000

This process will create a docker container with a random name.

See the list of docker containers running by

docker ps -a

To rename the container, first stop the container

docker stop random-heisenberg

docker rename random-heisenberg nextjs-blog

To see all the docker images run the command

docker images

Running the container

If you want to run the existing container, you must first start the container using start command. But if you want to run commands inside the container interactively, you can use the exec option like this:

docker start existing_container_ID_or_name
docker exec -it existing_container_ID_or_name /bin/bash

Then to stop the docker container.

docker stop nextjs-blog(containername)

or

docker kill container_name

To see the console output,

docker logs -f container_name

will show the command prompt output Server is running on the port 3000..

Blog Edit Workflow

Everytime some edit is made. Stop the docker container. Then make the docker file

docker build -t nextjs-blog ./

docker run -it -d –name nextjs-blog -p 3000:3000 nextjs-blog:latest

docker start nextjs-blog

This blogpost was followed from the youtube tutorial at here https://www.youtube.com/watch?v=Hiabp1GY8fA