✈ 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
- 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
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
💡 Manage several entries - like a NoSQL database collection
Article- each blog article is an instance of theArticlescollection typeHoliday Package- each holiday package card in the home page UI uses data from an instance of theHoliday Packagecollection type
💡 Manage one entry
- About - the site content for the About page
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.jsinstead of/config/plugins.js
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
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.
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:
- Called
seedArticleCollection()inbootstrap() - Deployed to Heroku
- Uncommented the invocation of
seedArticleCollection()inbootstrap() - Re-deployed 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/configfor production