Deploying a decoupled restaurant review site to production with Strapi and Platform.sh

Rate this content
Bookmark

Node.js has become an increasingly popular language to build and deploy backend APIs. In a world of legacy CMSs adopting decoupled implementations, plenty of frameworks have sprung up to classify themselves as "headless" CMSs, designed from the start to provide an easy way to personalize content models, administer permissions and authentication, and serve a content API quickly.


Strapi, one of the leaders in this space, has recently released their v4 version of the framework, and with Platform.sh it can be deployed alongside a number of frontends within the same project, giving a drastically simplified development experience working with decoupled sites. In this workshop, we'll deploy a Strapi demo application, which has been configured to serve a restaurant review site.


Piece piece you will add database services, tests, and frontends, all within the safety of isolated development environments. At the end, each user will have a functioning decoupled site, and some greater understanding of working with decoupled sites in production.

This workshop has been presented at Node Congress 2022, check out the latest edition of this JavaScript Conference.

FAQ

Strapi's admin interface can be customized through the 'config' folder in the Strapi application directory. This includes settings for the admin UI, API tokens, and other configurations that dictate the behavior of the CMS.

Platform.sh is a cloud hosting platform that automatically manages the infrastructure, application, and services. It integrates with Git to provide a workflow where each branch can be a separate environment, allowing for automated testing, merging, and deployment.

Strapi is an open-source, Node.js-based headless CMS. It allows developers to easily build, manage, and distribute their content through APIs. Strapi is highly customizable and can be used to manage content for mobile apps, websites, or other digital platforms.

Platform.sh handles deployments by associating each project with a repository. It automatically builds and deploys applications based on commit hashes, providing environments for each branch. The platform ensures security by making file systems read-only post-build and allows writing during runtime only through defined mounts.

As of Strapi version 4, it supports SQLite, MySQL, and PostgreSQL. However, it does not support MongoDB. Strapi allows configuration adjustments for different databases through its 'database.js' configuration file.

The FoodAdvisor app is an official demo application provided by Strapi that illustrates how to use Strapi with a frontend technology (in this case, Next.js) to build a restaurant review website. It includes functionality for managing restaurants, reviews, and user authentication.

The 'platform.app.yaml' file is a key configuration file in Platform.sh that defines the runtime and behavior of an application. It specifies the runtime environment, build and deploy hooks, dependencies, and other crucial settings that determine how the application operates in the cloud environment.

A main advantage of using Platform.sh is its ability to create isolated development environments for each Git branch, which includes cloning both the application and its data. This feature supports robust testing and QA processes without impacting the live production environment.

Decoupled architecture in web development refers to separating the frontend and backend of a web application into two distinct parts that communicate via APIs. This separation allows for more flexible development and deployment options, as each part can be developed and scaled independently.

Environment variables in Platform.sh are used to manage application settings across different environments securely. They can be used to store sensitive information such as API keys, database credentials, and custom configuration settings that should not be hard-coded into the application code.

Shedrack Akintayo
Shedrack Akintayo
Chad Carlson
Chad Carlson
134 min
15 Feb, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

The Workshop covers the use of PlatformSH and Strapi for building and deploying decoupled applications. It explores setting up projects, configuring databases, middleware, and plugins. The workshop also covers building and deploying the application, syncing data, and exploring the site. It highlights the benefits of PlatformSH, such as isolated development environments and easy deployment of multi-app architectures. The workshop concludes with a discussion on handling drafts and implementing live previews.

1. Introduction to PlatformSH and Strapi

Short description:

Hey, I'm Chad Carlson from PlatformSH. We'll be using the official demo app called FoodAdvisor by Strapi for our demo today. It contains a Strapi application in the API subdirectory and a Next.js app in the client subdirectory. We'll start by logging in and then creating a project.

♪♪ Hey, I'm Chad Carlson from PlatformSH. So, who here has heard of PlatformSH before? If you have, go and leave a message. If you haven't, no big. I'll just take the silence as nobody's heard this before. Heard, but not used. Okay. Great. How about Strapi? Does anybody already have some familiarity with Strapi? We'll do a little bit of overview when we get to that section. Yeah. Heard, but not used.

I'm not surprised. Okay. All right. Created a sample. Cool. All right. Maybe the best thing to do here is start with, for those of you who have heard of Strapi or are unfamiliar with, what we're going to be using for our demo today is based off of the official demo app that Strapi provides, called FoodAdvisor. And so what this application contains is a Strapi application within this API subdirectory and a Next.js app inside of client. And so inside of API, we're going to have a few commands there. You're going to seed some sample data initially to a SQLite database. And that's going to set up our backend. And it's going to contain restaurants, authors, a few blog posts and categories and tags that go along with those collections. And then at the front end app, it's just a simple Next.js app that's set up to consume all that data from the Strapi API and presents a front end that looks sorta like this screenshot. And we will get to that at the end.

So what I'd like to start with is go ahead and we'll try and zoom this a little bit. Go to the terminal where you are going to be working from. And when we interact with the platform CLI, everything's gonna have this platform prefix here. And we're going to initially do login. And all that's going to do is it's going to generate a temporary SSH key for the CLI to use based off of a temporary token on your account. And so... Oh, I already got ahead of myself. Sorry, guys. Once you have installed the CLI, go ahead and click this link right here. This will take you to the page to register an account for the workshop. And it'll take you to a screen to create a new project. Don't worry about doing that right now. We'll do that through the CLI here. But once you've created that account, you can log in on the email that you've used and authorize the CLI to use your account. And so we'll see now that I'm logged in. There's my email if you want to get in touch with me. All right. And so first we're gonna go ahead and get this demo repo. Oops. There is one SQL migration dump file in here so it might take a second. And it should be a directory called node congress. So in here is just like I described before in the original food advisor demo app, an API and client sub directory. All the instructions if you want to follow along with the repo are in this doc sub directory under instructions. So I'm gonna go ahead, use the CLI here to create a project. And when I do that, I can say no congress. I'm gonna give it a region.

2. Setting Up Project and Exploring Repository

Short description:

We'll pick a development project, default for environments, storage, and a main default branch. The project is effectively the equivalent of our repo and detects configuration files to provision infrastructure. We have an API and a client subdirectory. We start with Strapi, setting up the data source and configuring the SQLite database. Strapi is a CMS that works as a backend for any frontend and can also work standalone. The API folder is structured with source and config folders for specific configurations.

This is just pick something that's close to you or to go ahead and most of these are gonna be by default on your side, but we're gonna pick a development project, default for environments, storage and a main default branch. And then it'll ask you, do I want to make that project remote for the repo we're working with? Go ahead and do yes and then we'll confirm it and then platform stage will start building that project for you.

Welcome to the chat. Hey Abandeep. No, at this point, we have just the 30 day free trial. We're in kind of development phase of trying to get a free tier for our platform, but right now it's the free trial. But if you contact me and you want to continue playing with it, either on Slack channel or on my email, which I can attach here, it's not difficult for us to extend the trial for you to continue playing with it. So we got a URL here for what we call the Management Console. So I can open a new tab and give it into the bar and we'll go ahead and be taken to the individual project. And so all this is going to be our deployment area for the repository. It doesn't matter if we integrate a repository on GitHub, or we push something locally, like we're going to do in this workshop, the project is effectively the equivalent of our repo and around it, it's going to detect a few configuration files to automatically provision infrastructure based off what we commit and to handle some of the inheritance that's going to make a platform do what it does. That includes access permissions, environment variables, and that same infrastructure and the data within it across all of the environments that will roughly correspond to each branch of our repo. So we'll see here, I have a main environment that is inactive because I haven't pushed anything to it for my main branch, because that's the only branch I have on this repo. Now that we have that set up, let's take a look at the repository that we just cloned.

All right, like I showed before, we have an API and a client subdirectory. I just want to make sure that I got covered here. So what we're going to do first is start off with Strapi. We want to make sure that we have our data source set up before we do anything else. And so, like I said, that's within the API subdirectory here for those of you not familiar with Strapi. It has a, for v4 onword, a configuration subdirectory that mostly what we will be concerned with how it's configured is this database.js file. Which in this case says all of our data is going to come from SQLite database in the dot temp directory, which we haven't created yet. And then there's going to be a source directory that is going to be where components are defined. So when I talked previously about we're making effectively a restaurant review app that we're going to deploy. So there will be content types like restaurants or blog posts or categories or reviews. And so within our components, we have restaurants. Sorry, we have a blog page, an article that defines an individual content type for one of those entities I described, we have categories, we have some global pages, we have locations, restaurants, and a restaurant main page and review. So this repo already has all those collections defined for you ahead of time. What we're gonna do is we're going to seed that temp database, that SQLite database. So I'm gonna go ahead and go into API. Shadrack, is there anything else that you wanted to say about the structure of Strapi while I kind of continue doing this?

Yeah, sure, sure. That's when to share my screen or, I think, okay, you need to do this. So the way Strapi is structured is Strapi is actually... Hold on, let me just pull out this here. Before Shadrack gets started. What I'm gonna do is install dependencies, run the Scene command, and run this API locally. For those of you who are on OS 10, check the repo, because there is this catch that I know I hit sometimes on my computer. If you go ahead and copy this command, you'll notice that this will halt. And so you'll just need to export this environment variable and then everything should be fine for installing the dependencies there. Sorry, Shadrack. Okay, yeah, thanks. So Strapy is just basically like any single, any CMS that you can think of, but this time it's running on node. The way it's built, it's built to basically work as the back end. It had less CMS basically to work as a backend for whatever frontend that you might need to connect it with. And Strapy has the power to also work standalone. So if you need like a standalone CMS, just a CMS, Strapy also has the power to do that. So if you check the API, check the API folder, you would see that it's built, it's separated based on, the folders are basically named based on whatever work they are doing, but the most important part of these particular folders is the source folder and the config folder. And okay, let's say database folder, but that's when you run database migration. So the source folder and the config folder. Now the config folder can consist of whatever type of configuration that you want specifically on your Strapy app. So how your admin should look like, what the API tokens that you need, that's where it should be.