You've successfully subscribed to Qoddi Blog
Great! Next, complete checkout for full access to Qoddi Blog
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.
Success! Your billing info is updated.
Billing info update failed.

Building a fault-tolerant content API using Strapi and FlashDrive

Qoddi
Qoddi
The second part of this tutorial, about the first use of Strapi, is a copy of the official Strapi Getting Started guide, available here.

Strapi is a very popular headless CMS, and you probably have heard very good things about it. Here at FlashDrive, we love it and use it everyday!

On FlashDrive.io, Strapi is available as a one-click installation product inside the FlashDrive marketplace.
In this tutorial, you will learn how to install Strapi on FlashDrive, create your first content, and publish it!

You will need:
- A FlashDrive.io account with billing activated (Strapi is not available on DEV instances because it requires more RAM to run effectively).

Install Strapi on FlashDrive

Installing Strapi takes two clicks: log in to your FlashDrive.io account, visit the Marketplace menu, and click on the Strapi icon:

Select Strapi inside the FlashDrive.io Marketplace

Add a cool name to your new Strapi App, select the location, and keep the Web size :

Click Next. we don't need Mongo Express with Strapi, so you can click Next again :

Verify the total monthly cost. Strapi + the attached MongoDB install will cost $36 total per month, and this size covers 99% of Strapi instances used in production:

Click Launch My App, and wait for the installation to finish. FlashDrive will automatically install Strapi and a MongoDB database, make the connection between them, and get everything ready for you. It can take up to 5 minutes for the installation to complete.

Once the installation is done, click on "Go to this app settings", and you will be redirected to your brand new Strapi stack composed of the Strapi instance and the MongoDB instance:

A Strapi stack is composed of two apps : Strapi and the MongoDB database

Click on the Strapi app (on the left) to access your app details:

On this app, you can see all the details of your app including its domain name automatically attributed by FlashDrive. You can add your own domain name and create a CNAME record to your app if you want to use your own, but you can continue to use the FlashDrive domain as long as you want.

Before starting to configure Strapi click to "Activate SSL" to have an SSL certificate automatically issued for your domain, then click on the URL to access your Strapi dashboard :

First launch of Strapi, let's create an admin user

Fill the form with your name, email, and password, and click "Get started" to access your admin panel:

Strapi first launch

Congrats! Strapi is now installed on FlashDrive, it's time to create your first content and start your API!

Create your content on Strapi

Step 1: Create collection types with the Content-Types Builder


The Content-Types Builder plugin helps you create your data structure. When creating an empty project with Strapi, this is where to get the party started!

Create a "Restaurant" collection type

Your restaurants directory will eventually include many restaurants, so we need to create a "Restaurant" collection type. Then we can describe the fields to display when adding a new restaurant entry:

  1. Go to Plugins > Content-Types Builder (opens new window)in the main navigation.
  2. Click on Create new collection type.
  3. Type restaurant for the Display name, and click Continue.
  4. Click the Text field.
  5. Type name in the Name field.
  6. Switch to the Advanced Settings tab, and check the Required field and the Unique field settings.
  7. Click on Add another Field.
  8. Choose the Rich Text field.
  9. Type description under the Name field, then click Finish.
  10. Finally, click Save and wait for Strapi to restart.

Once Strapi has restarted, "Restaurants" is listed under Collection Types in the main navigation. Wow, you have just created your very first content type! It was so cool — let's create another one right now, just for pleasure.

Create a "Category" collection type

It would help to get a bit more organized if our restaurants directory had some categories. Let's create a "Category" collection type:

  1. Go to Plugins > Content-Types Builder (opens new window)in the main navigation.
  2. Click on Create new collection type.
  3. Type category for the Display name, and click Continue.
  4. Click the Text field.
  5. Type name in the Name field.
  6. Switch to the Advanced Settings tab, and check the Required field and the Unique field settings.
  7. Click on Add another Field.
  8. Choose the Relation field.
  9. On the right side, click the Category relational fields box and select "Restaurant".
  10. In the center, select the icon that represents "many-to-many"
icon many-to-many

. The text should read Categories has and belongs to many Restaurants.

  1. Finally, click Finish, then the Save button, and wait for Strapi to restart.

Step 2: Use the collection types to create new entries

Now that we have created a basic data structure with 2 collection types, "Restaurant" and "Category", let's use them to actually add content by creating new entries.

Create an entry for the "Restaurant" collection type

  1. Go to Collection types > Restaurants in the main navigation.
  2. Click on Add New Restaurants.
  3. Type the name of your favorite local restaurant in the Name field. Let's say it's Biscotte Restaurant.
  4. In the Description field, write a few words about it. If you're lacking some inspiration, you can use Welcome to Biscotte restaurant! Restaurant Biscotte offers a cuisine based on fresh, quality products, often local, organic when possible, and always produced by passionate producers.
  5. Click Save.
Screenshot: Biscotte Restaurant in Content Manager

The restaurant is now listed in the Collection types > Restaurants view.

Add Categories

Let's go to Collection types > Categories and create 2 categories:

  1. Click on Add New Categories.
  2. Type French Food in the Name field.
  3. Click Save.
  4. Go back to Collection types > Categories, then click again on Add New Categories.
  5. Type Brunch in the Name field, then click Save.
GIF: Add Categories

The "French Food" and "Brunch" categories are now listed in the Collection types > Categories view.

Add a Category to a Restaurant

Go to Collection types > Restaurants in the main navigation, and click on "Biscotte Restaurant".

In the right sidebar, in the Categories drop-down list, select "Brunch". Click Save.

Step 3: Set Roles & Permissions

We have just added a restaurant and 2 categories. We now have enough content to consume. But first, we need to make sure that the content is publicly accessible through the API:

  1. Click on General > Settings at the bottom of the main navigation.
  2. Under Users & Permissions Plugin, choose Roles.
  3. Click the Public role.
  4. Scroll down under Permissions.
  5. In the Application tab, find Restaurant.
  6. Click the checkboxes next to find and findone.
  7. Repeat with Category: click the checkboxes next to find and findone.
  8. Finally, click Save.
Screenshot: Public Role in Users & Permissions plugin

Step 4: Publish the content

By default, any content you create is saved as a draft. Let's publish our categories and restaurant.

First, navigate to Collection types > Categories. From there:

  1. Click the "Brunch" entry.
  2. On the next screen, click Publish.
  3. In the Please confirm window, click Yes, publish.

Then, go back to the Categories list and repeat for the "French food" category.

Finally, to publish your favorite restaurant, go to Collection types > Restaurants, click the restaurant entry, and Publish it.

GIF: Publish content

#Step 5: Use the API

OK dear gourmet, we have just finished creating our content and making it accessible through the API. You can give yourself a pat on the back — but you have yet to see the final result of your hard work.

There you are! the list of restaurants is accessible at https://yourflashdriveurl/restaurants

We've now created a complete content API using Strapi hosted on FlashDrive.io

Don't forget all the benefits to host Strapi on FlashDrive:

  • Production-ready instances with dedicated compute power,
  • Free Daily Backups with easy restoration and anti-ransomware protection,
  • Ready to scale (add more nodes to Strapi or scale up the size of Strapi or MongoDB at any time),
  • 10GB of virtual disk included (that's a lot of MongoDB data...),
  • Free SSL certificates for all your web-facing apps
  • Ultra-fast connectivity from around the world thanks to FlashDrive.io unique Edge network

Enjoy Strapi hosted on FlashDrive.io!

Getting StartedAPIsJamstack