Run strapi.js, next.js and PostgreSQL inside docker container in just few lines

Today’s post is truly technical, it lacks long reflections about different approaches, techniques or methodologies. It explains how to run the entire aforementioned stack of services with just few lines of code in a single docker-compose file.

Start a project with strapi.js and next.js

strapi.js is the extensible headless CMS. It delivers CRUD API right out of the box, with no need of a complicated configuration. It even has GraphqQL plugin, so I would say that’s a perfect fit for the role of API for a modern medium sized next.js app (for a small next.js app you usually don’t need an API).

Let’s start a new project with strapi.js and next.js. Create new dir and perform the following commands there. I’m assuming strapi.js project to be in cms/ dir under the root project dir, and next.js to be in frontend/ dir.

Install strapi.js first:

npm install strapi@alpha -g

Now create strapi.js project:

strapi new cms

Important note. While creating a new project strapi.js needs an open connection to your DB. In order to have just DB run the docker-compose (find the docker-compose file below) like this:

docker-compose up db

Cool! API backend is installed and ready to go. This article neither cover any deeper setup nor it provides any hello-world examples, it is only about starting barebones apps.

Installing next.js is the less convenient procedure. First create the dir for next.js app:

mkdir frontend/

Install next.js, run this in frontend/:

npm install --save-exact next react react-dom

In package.json add scripts for running and building the app:

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

You are ready to go!

Describe services in docker-compose.yml

Now let me show how to run the whole stack including Postgres DB with just single docker-compose file, and nothing else. Same thing can be done with simple bash script but in this case DB must be installed on the host machine by every developer who work with the project — and this is often not acceptable.

With this setup there is no need to run anything locally, even npm install command. Docker-compose will take care of everything! 💪

Create the file called docker-compose.yml in the root of the project with the following content:

version: "3.7"
services:
  cms:
    image: node:10
    ports:
      - 1338:1338
    volumes:
      - ./cms:/usr/local/app
    depends_on:
      - db
    restart: always
    working_dir: /usr/local/app
    entrypoint: "/bin/bash"
    command: "-c \"if [ ! -d \"node_modules\" ]; then npm i; fi; npm run start\""
    environment:
      - DATABASE_HOST=db
  db:
    image: postgres
    restart: always
  ports:
      - 5432:5432
  environment:
      POSTGRES_DB: mydb
      POSTGRES_PASSWORD: mypassword
      POSTGRES_USER: myuser
  frontend:
    image: node:10
    ports:
      - 3000:3000
    volumes:
      - ./frontend:/usr/local/app
    restart: always
    working_dir: /usr/local/app
    entrypoint: "/bin/bash"
    command: "-c \"if [ ! -d \"node_modules\" ]; then npm i; fi; npm run dev\""

And finally start the app with docker-compose up in the root of the project. Wait few minutes while node packages will be installed (if any were added) and open the app in your browser at http://localhost:3000 That’s it!

As you can see the whole technologies stack is fitted into single file. Running it does not require installation of anything except Docker on a local computer. There is no need in any configuration or settings. And most importantly it is the only thing any developer in your team needs in order to start the app.

OttoFeller is the software development company specialising in front end of complex web applications and in promising cutting edge technologies.