Having a headless CMS in a Serverless Environment
Is it possible to have your site running with a headless CMS in a serverless environment to leverage all of the benefits of serverless? Yes it is possible, it used to be a difficult task that required specific knowledge, but now with KOR it is something that anyone is able to do in a few minutes.
Before I start, what is a headless CMS? What does that even mean?
Basically, in a headless CMS you will have a backend UI where you can create an API and serve content over multiple endpoints.
Then, on your front-end side, mobile app, or web app, you can consume that API, which will serve your data (content).
Why would I need to use a Headless CMS?
- Since the CMS doesn’t render any content, editing it will be much faster than a traditional CMS.
- You can serve content on multiple channels. Control how and where your content appears (e.g. web apps, mobile apps, or websites).
- Use your favourite framework to consume the APIs.
Now imagine having the benefits of a headless CMS combined with all the advantages of serverless! No server management, increased performance, pay for what you use, infinitely scalable and faster to build.
Ok, let’s get started.
Tools to create and manage your website, or app, with an open-source headless CMS in a serverless environment
Ok, so this is what I will be using for this tutorial:
- KOR for deploying Strapi.
- Strapi. The best open-source headless CMS out there.
- AWS, of course (KOR has a 1 click integration so you only have to create an AWS account and KOR will automate the rest).
Once you log into your KOR account, go down to the templates section (orange icon) and you will find 3 options. A static site, a webapp and Strapi.
After you select Strapi, you will need to connect your AWS account. That’s quiet easy though. Just click the “Authorize AWS” button and follow the steps on the stack creation tab.
This will create a stack with the necessary resources to allow KOR to create all the infra for you. Then go back to KOR and wait for the confirmation:
Ok, so now that the AWS connection worked as expected. Let’s click next to complete the process.
On step number 2, if you have a domain registered on your account, you can use it without any problems (with subdomains too!). If you don’t have any domains on AWS and want KOR to generate one for you, you can click “Create template without a domain”.
After it finishes, you will get 2 links. One with the Strapi Admin Panel (in production mode) and a template for the front-end. Let’s see how the admin panel looks.
Now we you need to set up the role permission inside Strapi. For that go to settings — roles and edit the “public” role.
Click on the checkbox “find” and save the changes.
Then you can go to the Landing-page section and modify the content of your website!
If you want to see how the “view” looks when you start modifying the template, click the “configure the view” button below the information box.
After modifying some content, this is how the react template looks:
If you wish to view metrics like visitors, resources, CloudFront data, or you want to see what’s under the hood (the resources powering your CMS that were auto created by KOR), then go back to your KOR account. Click the Habitat that was made for your Strapi creation and then look within the monitoring tab.
Is it possible to modify the react front-end template even further?
Yes. If you wish to modify certain things that are not possible with the Strapi CMS (e.g. custom colors, text, buttons, etc), you can change the git-remote inside KOR and modify the template as you wish.
For this, click on repositories and find the one that starts with “front-end…”. Click the master branch and a window will pop up to change the git remote.
Once you click the “change git remote” button, point to a blank repository of your own (KOR will clone the current code to your empty repo), select your git credentials and that is it. You will have the front-end already cloned inside your repository which you can modify locally and push changes as usual.
How to pull the git updates to KOR?
Whenever you push new code to your repository, KOR will need to be updated as well. Just click the master branch, and click the “pull” button.
What about creating more pages or APIs inside Strapi?
That’s possible too! But let me explain. Strapi uses a “content-type builder” for creating content BUT, it only works when Strapi is running in a development environment. “Strapi develop” on the terminal.
Since KOR is running the production stage of Strapi, this is not possible to do it on the web admin panel.
If you wish to create more content, then you can go back to repositories inside KOR and do the same “change git remote” like I explained previously but with the “lambda…” repository.
Then, run Strapi locally in your machine with “Strapi develop” and do any changes you need. After you update the repository, KOR will take care of the rest and deploy the changes for you.
I hope you give KOR a try and get your Strapi CMS along with your website running in a serverless environment.