✈ Strapi CMS for Free Roam App 🌴

The Strapi Server used to create and manage content-types and site content. Entries created using Strapi are stored in a database:

• development environment - uses SQLite by default
• production environment - configured to use PostgreSQL

Strapi was configured to expose a GraphQL API which can be used to query the database via the /graphql endpoint.

Table of contents

• 1 | Technologies Used
• 2 | Strapi Content-types
  • 2.1 | Collection Types Created
  • 2.2 | Single Types Created
• 3 | Issues Faced
  • 3.1 | Accessing GraphQL Playground for Strapi in Production
  • 3.2 | Creating Filler Content To Test The Blog
    • 3.2.1 | Overview
    • 3.2.2 | Creating The seed.js Utility Script
    • 3.2.3 | Generating Dummy Articles
• 4 | Deployment to Heroku

1 | Technologies Used

• Strapi CMS
• Strapi plugins:
  • GraphQL - can be installed via Strapi dashboard (see documentation for use)
  • Cloudinary (see NPM package) - follow this article for setup
• Faker's Lorem module

2 | Strapi Content-types

Content-types were created using the Content-type Builder (which is accessible via the Strapi dashboard). They are used to organise user-created entries into groups. There are 2 variations of content-types:

• Collection types - can manage several entries
• Single types - can only manage one entry

2.1 | Collection Types Created

💡 Manage several entries - like a NoSQL database collection

• Article - each blog article is an instance of the Articles collection type
• Holiday Package - each holiday package card in the home page UI uses data from an instance of the Holiday Package collection type

2.2 | Single Types Created

💡 Manage one entry

• About - the site content for the About page

3 | Issues Faced

3.1 | Accessing GraphQL Playground for Strapi in Production

GraphQL Playground is a very useful tool that I used to:

• debug queries
• check GraphQL schemas (defined by Strapi) to get a better understanding of:
  • what types exist
  • which types accept parameters, and what were the parameter names

GraphQL Playground is available in development (at <localhost-url>/graphql), however it had to be separately configured for production. See GraphQL Playground config here.

💡 NOTE: the key here is that the plugin configuration for production occurs on the following path /config/env/production/plugins.js instead of /config/plugins.js

3.2 | Creating Filler Content To Test The Blog

3.2.1 | Overview

Initially, I used Strapi's Content-type Builder to create Articles. This worked fine to test if they were create correctly, however once I began to work on Pagination it became tedious to manually create articles using the Content-type Builder.

To test if Pagination was working correctly, it would be much more efficient if I could write a script that creates a batch of dummy Articles. I accomplished this using:

• Faker's Lorem module
• Strapi's Entity Service API
• Strapi's bootstrap() function

3.2.2 | Creating The seed.js Utility Script

Faker-js is a library used to create dummy/filler content for websites during development. Faker has a Lorem module which allows us to generate Lorem ipsum - a popular filler text format. I used this to generate the content for the dummy articles.

In order to store the Articles I needed to create entries in the database using the Article content-type. Strapi's Entity Service API helped me to accomplish this.

You can view the seed.js utility script here.

3.2.3 | Generating Dummy Articles

The seed.js script exports a function (seedArticleCollection()). It accepts one argument: the number of articles to generate (which defaults to 10). To create dummy articles, we invoke seedArticleCollection() within the bootstrap() function (found here).

The bootstrap() function executes every time the server starts. I used seedArticleCollection() to create 100+ articles. Obviously, you wouldn't want 100+ articles to be created EVERY time the server starts, so it was important to execute the function only once.

The backend was hosted with Heroku. So to execute seedArticleCollection() once, I did the following:

1. Called seedArticleCollection() in bootstrap()
2. Deployed to Heroku
3. Uncommented the invocation of seedArticleCollection() in bootstrap()
4. Re-deployed to Heroku

4 | Deployment to Heroku

The Strapi docs were excellent and provided an easy to follow guide; see Deploying the Strapi Server to Heroku. Strapi gives you many possible deployment options for your project. Read more about them in the deployment section of the documentation.

Note that development and production environments can be configured separately in Strapi using the following folder structure:

• /config - default & development configurations
• /config/env/production - used to override defaults in /config for production