Dockerize NEXTJS and Setup Drizzle ORM with PostgreSQL locally with docker in NEXT.JS...

NsrEZ — Mon, 19 Aug 2024 16:48:02 +0000

Download Docker Desktop we are going to need it.

Step 1: Go into your IDE and create a new NEXT App

npx create-next-app@latest

Name your App anything and take all the default settings.

Step 2: Now we have to create a Dockerfile and docker-compose.yml file in our root folder of the NEXT App.

Step 3: Now we have to make our docker image for our NEXT app. Open the Dockerfile in your root folder & copy these commands which help us to make the docker image.

# Use the Node.js 18 Alpine Linux image as the base image
FROM node:18-alpine 

# Set the working directory inside the container to /app
WORKDIR /app

# Copy package.json and package-lock.json files into the working directory
COPY package*.json ./

# Install the dependencies specified in package.json
RUN npm install

# Copy all the files from the local directory to the working directory in the container
COPY . .

# Build the project (typically used for building front-end assets)
RUN npm run build

# Copy the .next directory to the working directory in the container (if needed for a Next.js app)
COPY .next ./.next

# Run the application in development mode
CMD ["npm", "run", "dev"]

Note if you want to build in production please look at the NEXT.JS tutorial for docker container

Step 4: Open the docker-compose.yml file and copy this yaml script in the file.

# Use Docker Compose file format version 3.9
version: '3.9'

services:
  # Define the service named 'app'
  app:
    # Build the Docker image using the Dockerfile in the current directory
    build:
      context: .
      dockerfile: Dockerfile
    # Name the container 'nextjs14-container'
    container_name: nextjs14-container
    # Map port 3000 on the host to port 3000 in the container
    ports:
      - '3000:3000'
    # Avoid mounting node_modules from the host to the container
    volumes:
      - /app/node_modules

Step 5: Now, our NEXTJS App is dockerized and we can run the

docker-compose up --build -d

Once finished our image now becomes a container.

docker ps

Using docker ps we can check if our container is running.

Note: Running containers are also shown and can be managed via the docker desktop application instead of CLI.

Now that NextJS is dockerized we can start to implement the postgres database.

Step 1: Create a .env file in the root folder and also add it in the .gitignore file. Contents of .env file:

DATABASE_URL="postgresql://postgres:example@localhost:5432/postgres"

Step 2: Now we have to install the drizzle adapters You can learn more about drizzle here

npm i drizzle-orm postgres

npm i -D drizzle-kit

Also install ZOD

npm i zod

Step 3: Create folder named lib in src directory and env.ts file in the lib folder. Contents of env.ts zod environment variable validation

import {z} from 'zod'

const envSchema = z.object({
    DATABASE_URL:z.string().url()
})

export const env = envSchema.parse(process.env)

Step 4: Create a folder named db in src directory and index.ts & schema.ts files in it. Contents of index.ts with zod schema imported from the env.ts file

import { drizzle } from 'drizzle-orm/postgres-js';
import postgres from 'postgres';
import {env} from '@/lib/env'
import * as schema from './schema'

const pg = postgres(env.DATABASE_URL)
const db = drizzle(pg,{schema})
export {db,pg}

Contents of schema.ts


import { pgTable,serial,text, timestamp } from "drizzle-orm/pg-core";

export const Posts=pgTable('posts',{
    id:serial("id").primaryKey().notNull(),
    title:text('title').notNull(),
    body:text('body').notNull(),
    createdAt:timestamp('createdAt',{
        withTimezone:true,
        mode:"date"
    }).notNull().defaultNow(),
    updatedAt:timestamp('updatedAt',{
        withTimezone:true,
        mode:"date"
    }).notNull().defaultNow()
})

Note: Make your own required schema here this is just for demo.
The resulting file structure will look like this:

Step 5: Go into package.json and add this under scripts:

"db:studio": "npx drizzle-kit studio --config=drizzle.config.ts",
"db:push": "npx drizzle-kit push --config=drizzle.config.ts"

Now we locally host this db using docker

for that we just need to add this extra setup in the docker compose file which takes an already built postgres image which will be our container.

  drizzle-db:
    image: postgres
    restart: always
    container_name: drizzle-db
    ports:
      - 5432:5432
    environment:
      POSTGRES_PASSWORD: example
      PGDATA: /data/postgres
    volumes:
      - postgres:/data/postgres
volumes:
  postgres:

Your docker-compose file will look like this now:

Last few steps: Create the docker container make sure docker desktop is running: > docker compose up --build -d

Migrate the database schema:

npm run db:push

Now you can interact with your database using drizzle orm

If you guys liked the blog connect with me on LinkedIn

DEV Community: NsrEZ

Dockerize NEXTJS and Setup Drizzle ORM with PostgreSQL locally with docker in NEXT.JS...

Now that NextJS is dockerized we can start to implement the postgres database.

Now we locally host this db using docker