Navigate back to the homepage

Headless and headache-less

Patrick Zhao
March 4th, 2020 · 3 min read

Build your CMS and deploy it on Azure Container Instance


A content management system is a software application that can be used to manage the creation and modification of digital content. After about two decades of development and since the “web 2.0” era started, today we live in a world of WCM - Web Content Management. Following are some of the big names: WordPress, Drupal and Joomla.

However, in traditional CMSs, content and presentation are tightly coupled. To deliver the content to several channels with a responsive display, CMSs have to either enable complex customization or allow developers to build their own.

To separate data management and presentation has thus become an obvious requirement. This is where headless CMS has come into play.

A Headless CMS is a back-end only content management system built from the ground up as a content repository that makes content accessible via APIs (typically RESTFUL) for display on any device. As the name tells, a headless CMS has chopped the head - presentation, and focus on managing the body - data. This way, client channels including mobile, desktop, IoT can be built with their user interface using languages and frameworks of developers’ preferences.

Among a big number of open-source headless CMS platforms, GhostStrapi are on the top of the list.

Today we are going to set up Strapi with MongoDB Atlas and deploy it to Azure Container Instance

Mongo DB Atlas is a fully managed cloud database on-demand and ready for use in minutes. Available on AWS, Azure, and GCP. Mongo DB has been the top document database engine over the years. Atlas is fully boosted by MongoDB engine and a step forward, it provides an easy-to-use set of APIs so that developers can perform database operations without having a deep knowledge of the database itself.

We pick Azure Container Instance as our deployment platform purely because I love Azure. 😄


  • Docker
  • Node JS LTS >10
  • yarn
  • Azure CLI
  • Postman

I assume you have installed the software and CLIs above although I will cover the installation guide for some of the tools above in the following sections.

Install and Create and new Strapi project

1yarn create strapi-app my-project --quickstart

Additional Commands

  • Display all available commands
1yarn strapi
  • Install dependencies
  • Build Strapi admin panel
1yarn build
  • Start Strapi in watch mode
1yarn develop
  • Start Strapi without watch mode
1yarn start

Development database set up: SQLite.

Update file : .\config\environments\development\database.json as below.

2 "defaultConnection": "default",
3 "connections": {
4 "default": {
5 "connector": "bookshelf",
6 "settings": {
7 "client": "sqlite",
8 "host": "${process.env.DATABASE_HOST || ''}",
9 "port": "${process.env.DATABASE_PORT || 27017}",
10 "database": "${process.env.DATABASE_NAME || 'strapi'}",
11 "username": "${process.env.DATABASE_USERNAME || ''}",
12 "password": "${process.env.DATABASE_PASSWORD || ''}"
13 },
14 "options": {}
15 }
16 }

Now if you run yarn start, open a browser and navigate to localhost:1337 you should see below:

Strapi Welcome Page
Strapi Welcome Page

Then you can go to Admin Panel: localhost:1337/admin and add some new content type as per below:

Strapi Admin
Strapi Admin Panel

Next, we will configure the permissions from Roles & Permissions menu.

Roles and Permissions
Strapi Roles and Permissions management

After saving it and create new Jobs underneath the Jobs content type, we launch Postman. Then we can consume the APIs as per below:

Send a request

So far we have set up our development environment. We can configure content type, create and manage our content from Strapi Admin Panel.

Next, I will show you how to set up a production database connection and containerize our application.

Set up MongoDB Atlas

Go to and sign up for a free trial database as a service - MongoDB Atlas.


Follow steps below and get your database connection string.

MongoDB Atlas Connection String
MongoDB Atlas Connection String

Update .\config\environments\production\database.json as per below for production database.

2 "defaultConnection": "default",
3 "connections": {
4 "default": {
5 "connector": "mongoose",
6 "settings": {
7 "uri": "",
8 "database": ""
9 },
10 "options": {
11 "useNullAsDefault": true
12 }
13 }
14 }

Now we have successfully configured production database connection. Next, let’s have a look at how we can containerize our application and publish to Azure Cloud ⛅

Go to Azure Portal

  • Create an Azure account if you do not have one
  • Create a Resource Group
  • Create an Azure Container Registry as per below
Microsoft Azure Container Registry
Microsoft Azure Container Registry

Application Containerization

Next, we will look at how we can containerize our application locally and push the image to Azure Container Registry.

Create a Dockerfile under the root directory of your application (besides package.json) as per below content

1FROM strapi/base
3WORKDIR /my-path
5COPY . .
7RUN yarn install
9RUN ["yarn","build"]
11EXPOSE 1337
13ENV NODE_ENV production
15ENTRYPOINT [ "yarn", "start"]

Create a .dockerignore file next to your Dockerfile as per below content


Build image

1docker build -t {name-of-your-azure-container-registry}:V1.0.0 .

Run image

1docker run -d -p 8080:1337 {name-of-your-azure-container-registry}:V4.0.1


1docker ps

You should see Strapi app running launched by yarn start

Navigate to localhost:8080/admin and have fun 😄

Publish to and Pull from Azure Container Registry

Contact Patrick Zhao to add you to Azure Resource Group

  • Install Azure CLI via PowerShell(Windows) or Homebrew(Mac)


1Invoke-WebRequest -Uri -OutFile .\AzureCLI.msi; Start-Process msiexec.exe -Wait -ArgumentList '/I AzureCLI.msi /quiet'


1brew update && brew install azure-cli
  • Sign in Azure
1az login
  • Sign in Azure Private Container Registry
1az acr login --name
  • Publish to Azure Container Registry
1docker push {name-of-your-azure-container-registry}:V1.0.0
Microsoft Azure Container Web App
Microsoft Azure Container Web App
  • Select the container registry we created earlier
  • Select the image we just pushed
  • Review and create

Once your app is created, you can browse the URL from the image below and configure the Docker image via the “Container Settings” menu. Navigate to the URL and have fun! 😄

Azure NodeJS Web App


In this blog post, I have introduced a brief background and history of CMS and headless CMS.

I have shown how to set up Strapi + MongoDB Atlas + Azure Container App. Hopefully, this experience cause you less headache and allows you to build the front end as your own design😍

More articles from Copyright Patrick Zhao 2021

Build and publish your node module to private NPM registry on Azure Artifacts

Publish and manage your own NPM package and share it with your team on Azure.

January 12th, 2020 · 3 min read

How I set up my blog

I used to be a WordPress blogger until I find it too expensive and then I decided to set up my own blog

March 31st, 2019 · 4 min read
© 2019–2020 Copyright Patrick Zhao 2021
Link to $ to $ to $