Headless and headache-less

Build your CMS and deploy it on Azure Container Instance

Introduction

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. 😄

Prerequisites

• 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

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

Additional Commands

• Display all available commands

Copy 
1yarn strapi

• Install dependencies

Copy 
1yarn

• Build Strapi admin panel

Copy 
1yarn build

• Start Strapi in watch mode

Copy 
1yarn develop

• Start Strapi without watch mode

Copy 
1yarn start

Development database set up: SQLite.

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

Copy 
1{
2  "defaultConnection": "default",
3  "connections": {
4    "default": {
5      "connector": "bookshelf",
6      "settings": {
7        "client": "sqlite",
8        "host": "${process.env.DATABASE_HOST || '127.0.0.1'}",
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  }
17}

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

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

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

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

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 mongodb.com and sign up for a free trial database as a service - MongoDB Atlas.

Follow steps below and get your database connection string.

• Log in to MongoDB Atlas
• Get the connection string as shown below

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

Copy 
1{
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  }
15}

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

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

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

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

Copy 
1node_modules
2package-lock.json

Build image

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

Run image

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

Run

Copy 
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)

Powershell

Copy 
1Invoke-WebRequest -Uri https://aka.ms/installazurecliwindows -OutFile .\AzureCLI.msi; Start-Process msiexec.exe -Wait -ArgumentList '/I AzureCLI.msi /quiet'

Homebrew

Copy 
1brew update && brew install azure-cli

• Sign in Azure

Copy 
1az login

• Sign in Azure Private Container Registry

Copy 
1az acr login --name

• Publish to Azure Container Registry

Copy 
1docker push {name-of-your-azure-container-registry}:V1.0.0

• Open Azure Portal and Create a 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! 😄

Summary

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😍