DEV Community: Shada

How to Build a blog using Strapi, Nuxt (Vue) and Apollo

Shada — Thu, 02 Jun 2022 10:57:04 +0000

Sometime ago, I was thinking about my internet habit and, more specifically, what I really like when I'm reading stuff. Here’s what I usually do: I run a query, and then I just let myself be guided by the most interesting links. I always find myself reading blog posts about someone’s experience that is entirely unrelated to the query I initially typed.

Blogging is an excellent way to let share experiences, beliefs, or testimonials. And Strapi is useful at helping you create your blog! So, I am pretty sure that you now understand what this post is about. Let’s learn how to create a blog with your favorite tech, Strapi.

Goal

If you are familiar with our blog, you must have seen that we've released a series of tutorials on how to make blogs using Strapi with a lot of frontend frameworks:

The goal here in this article is to be able to create a blog website using Strapi as the backend, Nuxt for the frontend, and Apollo for requesting the Strapi API with GraphQL.

Click here to access the source code on GitHub.

Prerequisites

To follow this tutorial, you'll need to have latest version of Strapi and Nuxt installed on your computer, but don't worry, we are going to install these together!

You'll also need to install Node.js v14 and that's all.

Step 1: Backend Setup

Since the beta.9, we have an awesome package, create strapi-app, that allows you to create a Strapi project in seconds without needing to install Strapi globally so let's try it out.

Create a blog-strapi folder and get inside!

    mkdir blog-strapi
    cd blog-strapi

Create your Strapi backend folder using the blog template; copy and paste the following command line in your terminal:

    yarn create strapi-app backend --quickstart --no-run

This single command line will create all you need for your backend. Make sure to add the --no-run flag as it will prevent your app from automatically starting the server because
SPOILER ALERT: we need to install some awesome Strapi plugins first.

Now that you know that we need to install some plugins to enhance your app, let's install one of our most popular—the GraphQL plugin:

    cd backend
    yarn strapi install graphql
    yarn develop

Open your Strapi dev server at http://localhost:1337.

Once the installation is complete, you can finally start your Strapi dev server and create your first admin user. That's the one that has all the rights in your application, so please make sure to enter a proper password; (password123) is really not safe.

Nice! Now that Strapi is ready, you are going to create your Nuxt application.

Step 2: Frontend Setup

Well, the easiest part has been completed, let's get our hands dirty developing our blog!

Create a Nuxt project by running the following command inside ./blog-strapi:

    yarn create nuxt-app frontend

Note: The terminal will prompt for some details about your project. As they are not really relevant to our blog, you can ignore them. I strongly advise you to read the documentation, though. So go ahead, enjoy yourself, and press enter all the way!

Again, once the installation is over, you can start your front-end app to make sure everything is ok.

    cd frontend  
    yarn dev

Open your Nuxt.js dev server at http://localhost:3000/

As you might want people to read your blog or to make it "cute & pretty", we will use a popular CSS framework for styling: UIkit and Apollo GraphQL to query Strapi with GraphQL.

Step 3: Query Strapi with GraphQL

Make sure you are in the frontend folder before running the following commands.

Install all the necessary dependencies for Apollo by running the following command:

    // Ctrl + C to close Nuxt.js process
    yarn add @nuxtjs/apollo

Apollo Client is a fully-featured caching GraphQL client with integrations for Vue, React, and more. It allows you to easily build UI components that fetch data via GraphQL.

Add @nuxtjs/apollo to the modules section with Apollo configuration in ./frontend/nuxt.config.js

    // nuxt.config.js

    export default {
      modules: [
        '@nuxtjs/apollo',
      ],

      apollo: {
        clientConfigs: {
          default: {
            httpEndpoint: process.env.BACKEND_URL || "http://localhost:1337/graphql",
          }
        }
      },
    }

We'll also need to use an env variable for our Strapi base url, add a new env section at the end of nuxt.config.js file:

    // nuxt.config.js

    export default {
      env: {
        strapiBaseUri: process.env.API_URL || "http://localhost:1337"
      },
    }

Great! Apollo is ready now. 🚀

Step 4: Styling with UIkit

UIkit is a lightweight and modular frontend framework for developing fast and powerful web interfaces.

Install UIkit by running the following command:

    yarn add uikit

Now you need to initialize UIkit's JS in your Nuxt application. You are going to do this by creating a new plugin.

Create a ./frontend/plugins/uikit.js file and copy/paste the following code:

    import Vue from 'vue'

    import UIkit from 'uikit/dist/js/uikit-core'
    import Icons from 'uikit/dist/js/uikit-icons'

    UIkit.use(Icons)
    UIkit.container = '#__nuxt'

    Vue.prototype.$uikit = UIkit

Add the following sections to your `nuxt.config.js` file:

    // nuxt.config.js

    export default {
     css: [
        'uikit/dist/css/uikit.min.css',
        '@assets/css/main.css'
      ],

      plugins: [
        { src: '~/plugins/uikit.js', ssr: false }
      ]
    }

As you can see, you are including both UIkit and `main.css` files! We just need to create the `./frontend/assets/css/main.css` file.

    a {
      text-decoration: none;
    }

    h1  {
      font-family: Staatliches;
      font-size: 120px;
    }

    #category {
       font-family: Staatliches;
       font-weight: 500;
    }

    #title {
      letter-spacing: .4px;
      font-size: 22px;
      font-size: 1.375rem;
      line-height: 1.13636;
    }

    #banner {
      margin: 20px;
      height: 800px;
    }

    #editor {
      font-size: 16px;
      font-size: 1rem;
      line-height: 1.75;
    }

    .uk-navbar-container {
      background: #fff !important;
      font-family: Staatliches;
    }

    img:hover {
      opacity: 1;
      transition: opacity 0.25s cubic-bezier(0.39, 0.575, 0.565, 1);
    }

**Note:** You don't need to understand what's in this file. It's just some styling ;)

Let's add a beautiful font [Staatliches](https://fonts.google.com/specimen/Staatliches) to the project! Add the following code to your `link` section in your `nuxt.config.js`

    // nuxt.config.js

    export default {
      link: [
        { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Staatliches' }
      ],
    }

Perfect! Run yarn dev to restart your server and be prepared to get impressed by the front page of your application!

Awesome! It's time to structure our code a little bit.

Step 5: Designing the Data Structure

Finally, we are now going to create the data structure of our articles by creating an Article content type.

Dive in your Strapi admin panel and click on the “Content-Type Builder”

Click on “Create new collection type”

Now you'll be asked to create all the fields for your content-type

Create the following ones:
Field Text “title”
FieldRich Text “content”
Field Media “image”, single image

Press Save! Here you go, your “Article” content type has been created.

You may want to create your first article, but we have one thing to do before that: Grant access to the article content type.

Click on Settings then Roles and click on the “Public” role

Awesome! You should be ready to create your first article right now and fetch it on the GraphQL Playground.

Now, create your first article ! Here's an example:

Great! Now you may want to reach the moment when you can actually fetch your articles through the API! Go to http://localhost:1337/api/articles Isn't that cool!

You can also play with the GraphQL Playground.

You may want to assign a category to your articles (news, trends, opinion). You are going to do this by creating another content type in Strapi.

Create a “Category” content type with the following field

Field Text “name”

Press save!

Create a new field in the Article content type which is a Relation Category has many Articles like below:

Again, open Settings then Roles and click on the “Public” role, then check the category find and findone routes and save.

Now you'll be able to select a category for your article in the right sidebox.

Now that we are good with Strapi, let's work on the frontend part!

Step 6: Create the Layout of the Application

You can change the default layout of the Nuxt.js application by creating your own layouts/default.vue file.

    <template>
      <div>
        <nav class="uk-navbar-container" uk-navbar>
          <div class="uk-navbar-left">
            <ul class="uk-navbar-nav">
              <li>
                <a href="#modal-full" uk-toggle
                  ><span uk-icon="icon: table"></span
                ></a>
              </li>
              <li>
                <a href="/">Strapi Blog </a>
              </li>
            </ul>
          </div>
          <div class="uk-navbar-right">
            <ul class="uk-navbar-nav">
              <li v-for="category in categories.data" :key="category.id">
                <NuxtLink
                  :to="{ name: 'categories-id', params: { id: category.id } }"
                  >{{ category.attributes.name }}
                </NuxtLink>
              </li>
            </ul>
          </div>
        </nav>
        <div id="modal-full" class="uk-modal-full" uk-modal>
          <div class="uk-modal-dialog">
            <button
              class="uk-modal-close-full uk-close-large"
              type="button"
              uk-close
            ></button>
            <div
              class="uk-grid-collapse uk-child-width-1-2@s uk-flex-middle"
              uk-grid
            >
              <div
                class="uk-background-cover"
                style="
                  background-image: url('https://images.unsplash.com/photo-1493612276216-ee3925520721?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3308&q=80 3308w');
                "
                uk-height-viewport
              ></div>
              <div class="uk-padding-large">
                <h1 style="font-family: Staatliches">Strapi blog</h1>
                <div class="uk-width-1-2@s">
                  <ul class="uk-nav-primary uk-nav-parent-icon" uk-nav>
                    <li v-for="category in categories.data" :key="category.id">
                      <NuxtLink
                        class="uk-modal-close"
                        :to="{ name: 'categories-id', params: { id: category.id } }"
                        >{{ category.attributes.name }}
                      </NuxtLink>
                    </li>
                  </ul>
                </div>
                <p class="uk-text-light">Built with strapi</p>
              </div>
            </div>
          </div>
        </div>
        <Nuxt />
      </div>
    </template>

    <script>
    export default {
      data() {
        return {
          categories: {
            data: [],
          },
        };
      },
    };
    </script>

As you can see, categories list is empty. In fact, you want to be able to list every category in your navbar. To do this, we need to fetch them with Apollo, let's write the query!

Create a apollo/queries/category folder and a categories.gql file inside with the following code:

    query {
      categories {
        data {
          id
          attributes {
            name
          }
        }
      }
    }

Replace the script tag in your default.vue file by the following code:

    <script>
    import categoriesQuery from "~/apollo/queries/category/categories";

    export default {
      data() {
        return {
          categories: {
            data: [],
          },
        };
      },
      apollo: {
        categories: {
          prefetch: true,
          query: categoriesQuery,
        },
      },
    };
    </script>

Note: The current code is not suited to display a lot of categories as you may encounter a UI issue.

Since this blog post is supposed to be short, I will let you improve the code to maybe add a lazy load or something. For now, the links are not working, you'll work on it later on the tutorial :)

Step 7: Create the Articles Component

This component will display all your articles on different pages, so listing them through a component is not a bad idea.

Create a components/Articles.vue file containing the following:

    <template>
      <div>
        <div class="uk-child-width-1-2" uk-grid>
          <div>
            <router-link
              v-for="article in leftArticles"
              :to="{ name: 'articles-id', params: { id: article.id } }"
              class="uk-link-reset"
              :key="article.id"
            >
              <div class="uk-card uk-card-muted">
                <div v-if="article.attributes.image.data" class="uk-card-media-top">
                  <img
                    :src="api_url + article.attributes.image.data.attributes.url"
                    alt=""
                    height="100"
                  />
                </div>
                <div class="uk-card-body">
                  <p
                    id="category"
                    v-if="article.attributes.category.data"
                    class="uk-text-uppercase"
                  >
                    {{ article.attributes.category.data.attributes.name }}
                  </p>
                  <p id="title" class="uk-text-large">
                    {{ article.attributes.title }}
                  </p>
                </div>
              </div>
            </router-link>
          </div>
          <div>
            <div class="uk-child-width-1-2@m uk-grid-match" uk-grid>
              <router-link
                v-for="article in rightArticles"
                :to="{ name: 'articles-id', params: { id: article.id } }"
                class="uk-link-reset"
                :key="article.id"
              >
                <div class="uk-card uk-card-muted">
                  <div
                    v-if="article.attributes.image.data"
                    class="uk-card-media-top"
                  >
                    <img
                      :src="api_url + article.attributes.image.data.attributes.url"
                      alt=""
                      height="100"
                    />
                  </div>
                  <div class="uk-card-body">
                    <p
                      id="category"
                      v-if="article.attributes.category.data"
                      class="uk-text-uppercase"
                    >
                      {{ article.attributes.category.data.attributes.name }}
                    </p>
                    <p id="title" class="uk-text-large">
                      {{ article.attributes.title }}
                    </p>
                  </div>
                </div>
              </router-link>
            </div>
          </div>
        </div>
      </div>
    </template>

    <script>
    export default {
      data() {
        return {
          api_url: process.env.strapiBaseUri,
        };
      },
      props: {
        articles: Object,
      },
      computed: {
        leftArticlesCount() {
          return Math.ceil(this.articles.data.length / 5);
        },
        leftArticles() {
          return this.articles.data.slice(0, this.leftArticlesCount);
        },
        rightArticles() {
          return this.articles.data.slice(
            this.leftArticlesCount,
            this.articles.length
          );
        },
      },
    };
    </script>

As you can see, you are fetching articles thanks to a GraphQl query, let's write it!

Create a new apollo/queries/article/articles.gql file containing the following:

    query {
      articles {
        data {
          id
          attributes {
            title
            content
            image {
              data {
                attributes {
                  url
                }
              }
            }
            category {
              data {
                attributes {
                  name
                }
              }
            }
          }
        }
      }
    }

Awesome! Now, you can create your main page.

Step 8: Index Page

You want to list every article on your index page, let's use our new component! Update the code in your pages/index.vue file with:

    <template>
      <div>
        <div class="uk-section">
          <div class="uk-container uk-container-large">
            <h1>Strapi blog</h1>
            <Articles :articles="articles"></Articles>
          </div>
        </div>
      </div>
    </template>

    <script>
    import articlesQuery from "~/apollo/queries/article/articles";
    import Articles from "~/components/Articles";
    export default {
      data() {
        return {
          articles: {
            data: [],
          },
        };
      },
      components: {
        Articles,
      },
      apollo: {
        articles: {
          prefetch: true,
          query: articlesQuery,
        },
      },
    };
    </script>

Great! You have now reached the moment when you can actually fetch your articles through the GraphQL API!

You can see that if you click on the article, there is nothing. Let's create the article page together!

Step 9: Create Article Page

Create a pages/articles folder and a new _id.vue file inside containing the following:

    <template>
      <div>
        <div
          v-if="article.data.attributes.image.data"
          id="banner"
          class="uk-height-small uk-flex uk-flex-center uk-flex-middle uk-background-cover uk-light uk-padding"
          :data-src="api_url + article.data.attributes.image.data.attributes.url"
          uk-img
        >
          <h1>{{ article.data.attributes.title }}</h1>
        </div>
        <div class="uk-section">
          <div class="uk-container uk-container-small">
            <div v-if="article.data.attributes.content" id="editor">
              {{ article.data.attributes.content }}
            </div>
            <p v-if="article.data.publishedAt">
              {{ article.data.attributes.publishedAt }}
            </p>
          </div>
        </div>
      </div>
    </template>

    <script>
    import articleQuery from "~/apollo/queries/article/article";

    export default {
      data() {
        return {
          article: {
            data: [],
          },
          api_url: process.env.strapiBaseUri,
        };
      },
      apollo: {
        article: {
          prefetch: true,
          query: articleQuery,
          variables() {
            return { id: parseInt(this.$route.params.id) };
          },
        },
      },
    };
    </script>

Here you are fetching just one article, let's write the query behind it! Create a apollo/queries/article/article.gql containing the following:

    query Articles($id: ID!) {
      article(id: $id) {
        data {
          id
          attributes {
            title
            content
            image {
              data {
                attributes {
                  url
                }
              }
            }
            publishedAt
          }
        }
      }
    }

Alright, you may want to display your content as Markdown

Install markdownit with yarn add @nuxtjs/markdownit
Install date-fns with yarn add @nuxtjs/date-fns
Add it to your modules inside your nuxt.config.js file and add the markdownit object configuration just under // nuxt.config.js.

    export default {
      // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
      buildModules: [
        '@nuxtjs/date-fns',
      ],

      // Modules: https://go.nuxtjs.dev/config-modules
      modules: [
        '@nuxtjs/apollo',
        '@nuxtjs/markdownit'
      ],

      // [optional] markdownit options
      // See https://github.com/markdown-it/markdown-it
      markdownit: {
        preset: 'default',
        linkify: true,
        breaks: true,
        injected: true
      }
    }

Use it to display your content inside your _id.vue file by replacing the line responsible for displaying the content. // pages/articles/_id.vue

Step 10: Categories

Let's create a page for each category now! Create a pages/categories folder and a _id.vue file inside containing the following:

    <template>
      <div>
        <client-only>
          <div class="uk-section">
            <div class="uk-container uk-container-large">
              <h1>{{ category.data.attributes.name }}</h1>
              <Articles :articles="category.data.attributes.articles"></Articles>
            </div>
          </div>
        </client-only>
      </div>
    </template>

    <script>
    import articlesQuery from "~/apollo/queries/article/articles-categories";
    import Articles from "~/components/Articles";
    export default {
      data() {
        return {
          category: {
            data: [],
          },
        };
      },
      components: {
        Articles,
      },
      apollo: {
        category: {
          prefetch: true,
          query: articlesQuery,
          variables() {
            return { id: parseInt(this.$route.params.id) };
          },
        },
      },
    };
    </script>

And don't forget the query! Create a apollo/queries/article/articles-categories.gql containing the following:

    query Category($id: ID!){
      category(id: $id) {
        data {
          attributes {
            name
            articles {
              id
              data {
                attributes {
                  title
                  content
                  image {
                    data {
                      attributes {
                        url
                      }
                    }
                  }
                  category {
                    data {
                      attributes {
                        name
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

Awesome! You can now navigate through categories :)

Conclusion

Huge congrats, you successfully achieved this tutorial. I hope you enjoyed it!

Click here to access the source code on GitHub.

Still hungry?

Feel free to add additional features, adapt this project to your own needs, and give your feedback in the comments section.

If you want to deploy your application, check the documentation.

Building a Personal Habit Tracker App with Custom DB Queries in Strapi

Shada — Wed, 01 Jun 2022 14:33:48 +0000

Strapi is a headless CMS built entirely with JavaScript. Whether your preference leans more toward REST or GraphQL, Strapi offers built-in support for both. As a result, you can use the frontend of your choice and simply connect to the Strapi API.

Strapi also offers some powerful database engines for you to create complex queries. In November of 2021, Strapi announced the launch of Strapi v4, which comes with the Query Engine API. With this new feature, developers are now able to create custom database queries, like joining two collections to filter and fetch data. This is particularly helpful for developers who have complex needs. For example, in the context of a blog, you could query all the categories used in 2022 and fetch only the relevant articles.

In this article, you’ll be building a personal habit tracker. To begin, you will set up your Strapi backend project and build a few collections for your habits and logs to track completion. Then you’ll set up your React project to create, display, and check off habits. Finally, you’ll discover how to create custom queries to fetch habits so it’s easier to track completion on the frontend.

At the end of this tutorial, you’ll have a habit tracker that will look like this:

Custom DB Queries in Strapi

As previously mentioned, Strapi v4 provides a Query Engine API that allows you to interact directly with the database by writing custom queries. Strapi’s REST API is extensive and comes with a lot of filtering options that will suit a wide range of developers. This includes options to filter whether a field is equal, greater, or smaller than a specified value. This flexibility lets developers query specific data without writing custom code. However, for projects with complex needs, it’s easier, and sometimes necessary, to give developers more direct access to their database.

For example, in your habit tracker project, you could do two API calls: one for the habits and another for the logs to check if a habit was completed that day. Or you could create a custom API endpoint that would return your list of habits. Each of these would include a completed flag that would be set to true or false depending on your logs. This level of customization is one of the major advantages of the Query Engine API.

Another advantage is bulk operations. Whether it’s inserting, updating, deleting, or aggregating, developers can easily and quickly write database operations with the Query Engine API.

Build a Habit Tracker App with Strapi

In this tutorial, you will build a habit tracker application. This project includes a Strapi backend to store your data and a React client to interact with it.

Set Up a Strapi Project

In a new terminal window, start by creating your Strapi backend:

    npx create-strapi-app@latest my-project --quickstart

Once completed, your Strapi server will launch automatically and prompt you to register your first administrator:

After you’re done filling out your information, select Let’s start, and you’re ready to start creating some types.

Note: If you’re unfamiliar with the concept of types in Strapi, don’t hesitate to check out Strapi’s documentation to discover the different kinds of types.

Under Plugins, click on Content-Type Builder. Then under Collection Types, click on Create new collection type. This will open a window where you’ll be able to create your first type. In the input labeled Display name, enter “Habit”:

After clicking on Continue, you’ll be able to create the first field of your collection. For your habits, you’ll need two kinds of data. The first one is its name. The second is its type (to know whether the habit is part of the morning, afternoon, or evening routine).

To accomplish this, select the Text option. In the input labeled Name, put “name” and keep the Short text option selected. Then click on Add another field:

For the type, you need a field of type Enumeration. In the input labeled Name, put “type”, and for the values, add the following:

    morning
    afternoon
    evening

This will guarantee that your type can only be one of those three approved values. Here’s what this step looks like:

Finally, select Finish.

You should now see your content type with your two fields. Click Save to persist your changes:

Next, continue by creating a new collection type called Habit Log. As the name suggests, the habit log type will keep a list of which habits were completed and when. As a result, your habit log type will have two fields:

habit: ID of the habit completed
completionDate: date when the habit was checked off

To create this type, click on Create a collection type again, but this time, input “Habit Log” in the Display name input. Then click on Continue.

For the first field, you’ll use Relation to create a relationship with the Habit collection. In the Field name, put “habit” and select the first relationship type. By choosing this type, you specify that the habit log has only one habit, but multiple logs can have the same habit (ie with different dates). Click on Add another field:

For the second field, choose the Date field type and enter “completionDate” as its name. For the Type, select date (ex: 01/01/2022):

Click on Finish and then Save to persist your new collection type.

Set Up a React Frontend

Now that your Strapi backend is set up, it’s time to get your frontend up and running.

When you’re done setting up the frontend, it will look like this:

When completed, your Habit Picker application will have the following functionalities:

A form with the component CreateHabitForm that lets you or your users create new habits.
A calendar with the component Calendar to select the day as well as view your habits and progress for that day.
A Habits component that regroups your three sections (morning, afternoon, and evening).
A list of habits of a particular type with the component HabitsList. This component will contain dummy data until you connect it to the backend.

For this tutorial, you’ll use the MUI library (previously called Material-UI) to get access to a built-in datepicker. Thankfully, MUI comes with a starter project with Create React App.

To get started, in a new terminal window, run the following commands:

    curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/create-react-app
    cd create-react-app
    npm install

Then install a few necessary libraries. In this project, you’ll be using one of the four date-libraries supported called date-fns. You also need axios for making HTTP requests and qs for parsing/creating queries. You can get all the libraries needed by running one command:

    npm install @mui/x-date-pickers @date-io/date-fns date-fns axios qs

Inside your project and your src folder, create a new file called Calendar.js.

Because the date selected by the calendar will be shared not only with the calendar but also with the list of habits, you need to set this variable at the App.js level and treat it as if you will receive calendarDate and setCalendarDate as props from the parent.

You should also set the maxDate to today, as this prevents users from selecting future dates and checking off habits in advance:

    import * as React from 'react';

    import Grid from '@mui/material/Grid';
    import TextField from '@mui/material/TextField';

    import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker';
    import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
    import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';

    export default function Calendar({ calendarDate, setCalendarDate }) {
      return (
        <Grid item xs={6}>
          <LocalizationProvider dateAdapter={AdapterDateFns}>
            <StaticDatePicker
              displayStaticWrapperAs="desktop"
              openTo="day"
              value={calendarDate}
              maxDate={new Date()}
              onChange={(newValue) => {
                setCalendarDate(newValue);
              }}
              renderInput={(params) => <TextField {...params} />}
            />
          </LocalizationProvider>
        </Grid>
      )
    }

In the same src folder, create a new file called CreateHabitForm.js. This component is a very straightforward form, and you need to create three variables: name, type, and alert.

MUI comes with all the pre-built components you would need, including the following:

TextField for inputs
InputLabel for labels
Select and Menu Item to display a drop-down
FormControl for styling your form
Button to render a button
Alert to display a banner for messages (whether successful or not)

With the mentioned components, you can quickly put a form together and link your name and type variables along with their setter functions. Here is the result:

    import * as React from 'react';

    import Grid from '@mui/material/Grid';
    import Alert from '@mui/material/Alert';

    import FormControl from '@mui/material/FormControl';
    import TextField from '@mui/material/TextField';
    import Select from '@mui/material/Select';
    import MenuItem from '@mui/material/MenuItem';
    import InputLabel from '@mui/material/InputLabel';
    import Button from '@mui/material/Button';

    export default function CreateHabitForm() {
      const [name, setName] = React.useState("");
      const [type, setType] = React.useState("morning");
      const [alert, setAlert] = React.useState({message: null, type: null});

      return(
        <Grid container spacing={2} direction="column">
          {alert.type && <Alert severity={alert.type}>{alert.message}</Alert>}
          <Grid item>
            <FormControl fullWidth>
              <TextField
                id="habit-name"
                label="Name"
                variant="outlined"
                value={name}
                onChange={(event) => setName(event.target.value)}/>
            </FormControl>
          </Grid>
          <Grid item>
            <FormControl fullWidth>
              <InputLabel id="habit-project-select-type-label">Type</InputLabel>
              <Select
                labelId="habit-project-select-type-label"
                id="habit-project-select-type"
                value={type}
                label="Type"
                autoWidth
                onChange={(event) => setType(event.target.value)}
              >
                <MenuItem value="morning">Morning</MenuItem>
                <MenuItem value="afternoon">Afternoon</MenuItem>
                <MenuItem value="evening">Evening</MenuItem>
              </Select>
            </FormControl>
          </Grid>
          <Grid item>
            <Button variant="contained">Add</Button>
          </Grid>
        </Grid>
      )
    }

Inside your src folder, create a file called HabitsList.js. This component will receive a type (morning, afternoon, or evening) and will display a list of habits belonging to this type. Each habit comes with a checkbox that the user can tick off as the habit is completed.

To accomplish this, MUI has a few interesting components:

List: is the entire list of habits
ListItem: has one for each habit
ListItemButton: makes the ListItem clickable
ListItemIcon: renders the checkbox in-line and in front of your text in the ListItem
ListItemText: is pretty explicit but, essentially, the text of your list

When combined, you should have something like this:

    import * as React from 'react';

    import Grid from '@mui/material/Grid';
    import Typography from '@mui/material/Typography';

    import List from '@mui/material/List';
    import ListItem from '@mui/material/ListItem';
    import ListItemButton from '@mui/material/ListItemButton';
    import ListItemIcon from '@mui/material/ListItemIcon';
    import ListItemText from '@mui/material/ListItemText';

    import Checkbox from '@mui/material/Checkbox';

    export default function Habits({type}) {

      const handleToggle = (value) => () => {};

      return(
        <Grid item>
          {/*  Title of the section aka Morning routine */}
          <Typography variant="h6" gutterBottom component="div">
            {type.replace(/^\w/, (c) => c.toUpperCase())} routine
          </Typography>
          {/* Whole list. You are using dummy data [0, 1, 2, 3] just for display */}
          <List sx={{ width: '100%' }}>
          {[0, 1, 2, 3].map((value) => {
            const labelId = `checkbox-list-label-${value}`;
            return (
              <ListItem
                key={value}
                disablePadding
              >
                <ListItemButton role={undefined} onClick={handleToggle(value)} dense>
                  <ListItemIcon>
                    <Checkbox
                      edge="start"
                      checked={false}
                      tabIndex={-1}
                      disableRipple
                      inputProps={{ 'aria-labelledby': labelId }}
                    />
                  </ListItemIcon>
                  <ListItemText id={labelId} primary={`Line item ${value + 1}`} />
                </ListItemButton>
              </ListItem>
            );
          })}
        </List>
        </Grid>
      )
    }

Now, you need to create your section with your three types of habits. Inside the src folder, create a file called Habits.js. Inside this, you will receive calendarDate as props from the parent and display it. You also need to import your newly created HabitsList and create three lists: one for the morning, one for the afternoon, and one for the evening.

Following is the result:

    import * as React from 'react';
    import { format } from 'date-fns';

    import Grid from '@mui/material/Grid';
    import Typography from '@mui/material/Typography';

    import HabitsList from './HabitsList';

    export default function Habits({calendarDate}) {
      return(
      <>
        <Typography variant="h5" gutterBottom component="div">
          {format(calendarDate, "eeee, d LLLL yyyy")}
        </Typography>
        <Grid container spacing={2} direction="column">
          <HabitsList type="morning" />
          <HabitsList type="afternoon" />
          <HabitsList type="evening" />
        </Grid>
      </>
      )
    }

With your App.js file created, you can begin to piece together your frontend. All you need now is to import your new components—Habits, CreateHabitForm, and Calendar—and set up your UI:

    import * as React from 'react';

    import Container from '@mui/material/Container';
    import Grid from '@mui/material/Grid';
    import Typography from '@mui/material/Typography';

    import TextField from '@mui/material/TextField';

    import Habits from './Habits';
    import CreateHabitForm from './CreateHabitForm';
    import Calendar from './Calendar';

    export default function App() {
      const [calendarDate, setCalendarDate] = React.useState(new Date());

      return (
        <Container maxWidth="md" style={{ paddingTop: '20px'}}>
          {/* Main Container */}
          <Grid container spacing={2} direction="column">
            {/* Form + Calendar*/}
            <Grid container spacing={2}>
              <Grid item xs={6}>
                <Typography variant="h4" component="div" gutterBottom>
                  Habit Picker project
                </Typography>
                <Typography variant="body1" gutterBottom>
                  Form
                </Typography>
                { /* Form to add habits */ }
                <CreateHabitForm />
              </Grid>
              { /* Calendar */ }
              <Calendar calendarDate={calendarDate} setCalendarDate={setCalendarDate} />
            </Grid>
            {/* Habits Table */}
            <Habits calendarDate={calendarDate} />
          </Grid>
        </Container>
      );
    }

Save your files and start your frontend server. When launched, you should see the following at http://localhost:3000/:

Post and Fetch Data from Strapi

Now that your backend and frontend are set up, it’s time to post and fetch data to and from your Strapi application.

The first things you need to do is head to your Strapi backend and navigate to Settings. Then under Users & Permissions Plugin, click on Roles > Public. Under Permissions, you will see your content type habit and habit-log. For both of them, click on the arrow to expand; then Select all > Save. This allows you to make HTTP requests from your frontend.

Note: If you get a 403 Forbidden error when making calls, you may have missed a step.

Here’s how this step looks:

Now, go back to your frontend application and head to CreateHabitForm.js.

Inside, import axios to help create requests. Then add a handleSubmit on your button, and in your function, make a POST request to create a new habit. If the request is successful, clean the form and display a success message. If not, display an error message.

The result looks like this:

    import * as React from 'react';
    import axios from "axios";

    ...

    export default function CreateHabitForm() {
      ...

      const handleSubmit = () => {
        setAlert({ message: null, type: null})
        axios
          .post('http://localhost:1337/api/habits', {
            data: {
              name,
              type
            }
          })
          .then((response) => {
            setName("")
            setType("")
            setAlert({ message: 'Habit created', type: 'success'})
          })
          .catch((error) => {
            console.log(error);
            setAlert({ message: 'An error occurred', type: 'error'})
          });
      }
      return(
        <Grid container spacing={2} direction="column">
          {alert.type && <Alert severity={alert.type}>{alert.message}</Alert>}
          ...
          <Grid item>
            <Button variant="contained" onClick={handleSubmit}>Add</Button>
          </Grid>
        </Grid>
      )
    }

In your Habits.js component, pass the calendarDate to your HabitsList component. This is useful for knowing when a habit is completed. Here’s the code to use:

    import * as React from 'react';
    import { format } from 'date-fns';

    import Grid from '@mui/material/Grid';
    import Typography from '@mui/material/Typography';

    import HabitsList from './HabitsList';

    export default function Habits({calendarDate}) {
      return(
      <>
        <Typography variant="h5" gutterBottom component="div">
          {format(calendarDate, "eeee, d LLLL yyyy")}
        </Typography>
        <Grid container spacing={2} direction="column">
          <HabitsList type="morning" calendarDate={calendarDate}/>
          <HabitsList type="afternoon" calendarDate={calendarDate}/>
          <HabitsList type="evening" calendarDate={calendarDate}/>
        </Grid>
      </>
      )
    }

Finally, in your HabitsList.js component, create a habits variable that includes your list of habits, which will be used instead of dummy data. To fetch your habits, use useEffect so that upon rendering and calendarDate changes, the component fetches the list from Strapi. The calendar date will be helpful in the future when you need the logs.

Strapi offers lots of cool filters, and you can do a comparison (equal, greater than, smaller than, etc.) on any field in your collection. In order to filter and only get habits of a particular type, you need to use qs to create the query parameters to add to your URL:

    const query = qs.stringify({
        filters: {
          type: {
            $eq: type,
         },
       },
     }, {
          encodeValuesOnly: true,
    });

Finally, create a completeHabit function. This is added to the checkbox and creates a log for a particular habit on the date specified by the calendar. This means that if you forget to mark it as completed yesterday, you can select yesterday’s date on the calendar and check it off. You can use this code:

    import * as React from 'react';
    import axios from "axios";
    import * as qs from 'qs'

    import Grid from '@mui/material/Grid';
    import Typography from '@mui/material/Typography';

    import List from '@mui/material/List';
    import ListItem from '@mui/material/ListItem';
    import ListItemButton from '@mui/material/ListItemButton';
    import ListItemIcon from '@mui/material/ListItemIcon';
    import ListItemText from '@mui/material/ListItemText';

    import Checkbox from '@mui/material/Checkbox';

    export default function Habits({type, calendarDate}) {
      const [habits, setHabits] = React.useState([]);

      React.useEffect(() => {
        const query = qs.stringify({
          filters: {
            type: {
              $eq: type,
            },
          },
        }, {
          encodeValuesOnly: true,
        });

        axios.get(`http://localhost:1337/api/habits?${query}`)
        .then((response) =>{
          setHabits(response.data.data)
        })
        .catch((error) => console.log(error))
      }, [calendarDate])

      const completeHabit = (habitId) => () => {
        axios
          .post('http://localhost:1337/api/habit-logs', {
            data: {
              habit: habitId,
              completionDate: calendarDate
            }
          })
          .then((response) => {
            console.log(response)
          })
          .catch((error) => {
            console.log(error);
          });
      };

      return(
        <Grid item>
          <Typography variant="h6" gutterBottom component="div">
            {type.replace(/^\w/, (c) => c.toUpperCase())} routine
          </Typography>
          <List sx={{ width: '100%' }}>
          {habits.map((habit) => {
            const { id, attributes } = habit
            const { name } = attributes
            const labelId = `checkbox-list-label-${id}`;
            return (
              <ListItem
                key={id}
                disablePadding
              >
                <ListItemButton role={undefined} onClick={completeHabit(id)} dense>
                  <ListItemIcon>
                    <Checkbox
                      edge="start"
                      checked={false}
                      tabIndex={-1}
                      disableRipple
                      inputProps={{ 'aria-labelledby': labelId }}
                    />
                  </ListItemIcon>
                  <ListItemText id={labelId} primary={name} />
                </ListItemButton>
              </ListItem>
            );
          })}
        </List>
        </Grid>
      )
    }

At this point, you should be able to create new habits. When refreshing the page, the habits will appear in their corresponding list (ie your morning habits will be displayed under the Morning heading). If you click on a checkbox, a log will be created for that habit and on that date in your Strapi database, too. But how can you show that this habit has been completed?

This is the point where you could make a REST API endpoint to /habit-log, retrieve the logs for a specific day, and see if the habit of the log matches the habit listed. However, this would be a lot of unnecessary logic. It’s easier if the habits are retrieved for a specific type and day, so Strapi sends this instead:

    {
      id: 1,
      name: "Drink water",
      type: "morning",
      completed: true,
      ...
    }

This cannot be accomplished with REST, but you can use the Query Engine API.

Implement Custom Queries in Strapi

Instead of interacting with the Admin UI, http://localhost:1337/admin/, of Strapi, in this tutorial, you’ll be getting your hands dirty in the code to implement a custom query.

To start, head to src/api/habit/routes and create a new file custom-habits.js. Inside this file, define a new custom endpoint called /get-habits-with-logs and tell it to use the function getHabitWithLogs in the controller custom-habit:

    'use strict';

    module.exports = {
      "routes": [
        {
          "method": "GET",
          "path": "/get-habits-with-logs",
          "handler": "custom-habit.getHabitWithLogs",
          "config": {
            "policies": []
          }
        },
      ]
    };

Then in src/api/habit/controllers, create a new file called custom-habit.js. Inside, you’ll add the getHabitWithLogs function.

The first thing you need are the calendarDate and type values, which come as query parameters from your request. You can get them from ctx.request.query.

Then create a query for all the habits of that particular type. Once you have all the habits, you need to make a second query for each habit to the habit-log type. Here, you fetch all the logs where the ID of the habit on the log matches the habits you just retrieved. The completionDate will also match the calendarDate requested. If the ID and the date match, that means that the habit was marked as completed for that date. Then you can add a new key called completed on your habit object and pass it as true or false depending on whether the list of logs was empty or not.

Note: You need to make sure that your query for the logs is async and inside a map(). This means that habits_with_completed will return a list of promises. To execute them, you need to use await Promise.all(habits_with_completed);.

Here is the result:

    'use strict';

    const { createCoreController } = require('@strapi/strapi').factories;
    const habitModel = "api::habit.habit";
    const habitLogModel = 'api::habit-log.habit-log';

    module.exports = createCoreController(habitModel, ({ strapi }) => ({
      async getHabitWithLogs(ctx, next) {
        const { calendarDate, type } = ctx.request.query
        try {
          // Query all the habits of a particular type (say morning)
          const habits = await strapi.db.query(habitModel).findMany({
            where: {
              type: {
                $eq: type,
              }
            },
          });

          const habits_with_completed = habits.map(async (habit, i) => {
            // For each habit, query the logs
            // to see if there were completed that day
            let entries_logs = await strapi.db.query(habitLogModel).findMany({
              where: {
                $and: [
                  {
                    habit: habit.id,
                  },
                  {
                    completionDate: { $eq: calendarDate },
                  },
                ],
              },
            });
            // Add a completed key based on the logs found for that day
            return {
              completed: entries_logs.length > 0,
              ...habit
            }
          });
          ctx.body = await Promise.all(habits_with_completed);
        } catch (err) {
          ctx.body = err;
        }
      }
    }));

Query Your New Custom Endpoint

Once your file is saved, your Strapi server will restart with your new endpoint. Don’t forget to enable permissions for the endpoint by going back to Settings > Roles > Public and selecting all for custom-habit, too. Otherwise, you’ll get the 403 Forbidden error.

Here’s how to enable the new endpoint:

Now, call your new endpoint in HabitsList.js. In your query parameters, pass the formatted date and the type with calendarDate=${format(calendarDate, "yyyy-MM-dd")}&type=${type}. Then retrieve id, name, and completed; and use the latter to set the checkbox correctly.

You should also move the fetching of the data into its own function called fetchData() so when you complete a habit, you can refetch the data so the list is up-to-date:

    import * as React from 'react';
    import axios from "axios";
    import * as qs from 'qs'
    import { format } from 'date-fns';

    import Grid from '@mui/material/Grid';
    import Typography from '@mui/material/Typography';

    import List from '@mui/material/List';
    import ListItem from '@mui/material/ListItem';
    import ListItemButton from '@mui/material/ListItemButton';
    import ListItemIcon from '@mui/material/ListItemIcon';
    import ListItemText from '@mui/material/ListItemText';

    import Checkbox from '@mui/material/Checkbox';

    export default function Habits({type, calendarDate}) {
      const [habits, setHabits] = React.useState([]);

      React.useEffect(() => {
        fetchData()
      }, [calendarDate])

      const fetchData = () => {
        axios.get(`http://localhost:1337/api/get-habits-with-logs?calendarDate=${format(calendarDate, "yyyy-MM-dd")}&type=${type}`)
        .then((response) =>{
          setHabits(response.data)
        })
        .catch((error) => console.log(error))
      }

      const completeHabit = (habitId) => () => {
        axios
          .post('http://localhost:1337/api/habit-logs', {
            data: {
              habit: habitId,
              completionDate: calendarDate
            }
          })
          .then((response) => {
            fetchData()
          })
          .catch((error) => {
            console.log(error);
          });
      };

      return(
        <Grid item>
          <Typography variant="h6" gutterBottom component="div">
            {type.replace(/^\w/, (c) => c.toUpperCase())} routine
          </Typography>
          <List sx={{ width: '100%' }}>
          {habits.length > 0 && habits.map((habit) => {
            const { id, name, completed } = habit
            const labelId = `checkbox-list-label-${id}`;
            return (
              <ListItem
                key={id}
                disablePadding
              >
                <ListItemButton role={undefined} onClick={completeHabit(id)} dense>
                  <ListItemIcon>
                    <Checkbox
                      edge="start"
                      checked={completed}
                      tabIndex={-1}
                      disableRipple
                      inputProps={{ 'aria-labelledby': labelId }}
                    />
                  </ListItemIcon>
                  <ListItemText id={labelId} primary={name} />
                </ListItemButton>
              </ListItem>
            );
          })}
        </List>
        </Grid>
      )
    }

Following is a GIF of your habit tracker in action:

If you want to clone the project and follow along in your own editor, use this GitHub repo.

Conclusion

In this tutorial, you learned how to create a habit tracker by setting up a Strapi backend and creating a frontend in React using the MUI library. Then you connected your frontend to your Strapi backend by making POST requests.

You also learned that the REST API would only take you so far and that the Query Engine API can create a custom route, create a custom controller, and write queries to retrieve habits with their logs. With this, the backend retrieved the habits and returned them in the format that you wanted, making it easier to implement checking off your habits.

Here are 5 Reasons to Add On-Site Search to Your Website

Shada — Tue, 31 May 2022 08:36:27 +0000

Dynamic webpages with a high amount of site content are usually complex for users to navigate looking for specific data. These sites use On-site search (also called internal search), which uses a search bar to return the results of a search query made by the user. This simple implementation provides relevant content to users' needs, saving time and effort spent searching for data.

Goals

In this tutorial, readers will learn what on-site search is, when to use it, how they can build a web application implementing search functionality with a CMS, and its benefits.

What is On-site Search?

As the name implies, on-site search is a search feature that takes place on a website. It uses a search bar, where the user enters a search query. Based on the query in the search bar, the site data is filtered to provide information relevant to the search.

Why and When Do We Use This?

Search engines such as Google have a vast amount of information. To provide relevant results for what the user wants, they use search bars to collect a search query and display popular and related results to the user's entry. This feature is also nice to have quality for web applications, to provide ease of use to the site’s visitors.

Here are 5 Benefits of adding On-Site Search Feature

Sites built with an on-site search feature have a better rate of conversion. The conversion rate is the percentage of users who have received their desired result. It's a ratio of the total number of visitors to a site divided by the number who could achieve what they wanted. With a search feature, users can quickly gain relevant results and satisfaction by visiting a web application.
Sites with an on-site search feature have a better user experience. Users can easily navigate, search for, and retrieve relevant information. No matter how nice the features and information offered by a site are, it would be a waste if users can’t find them on the site. For a better site experience, there’s a need for a feature to be able to create search queries and browse through relevant search results.
On-site search reduces the number of unsatisfied visitors. When visitors visit your web pages, they will mostly want to find relevant information quickly. If your website has a poor search feature, you risk losing your site’s visitors and getting disappointed users who will be less likely to revisit your website.
E-commerce websites showcasing different categories can use an on-site search feature to provide information on similar products and services to the user’s search query. These recommendations can provide users with similar products they may be interested in.
On-site search can improve the SEO of a website. Good search functionality and an excellent user experience make for relevant search results. With your website ranking well on your visitor searches, it improves your site’s SEO and makes it get ranked higher by search engines.

What is Meilisearch?

Meilisearch is an open-source search engine that can be easily integrated into web applications to handle search functionalities. The Meilisearch Strapi Plugin is a search plugin that can be linked to the Strapi CMS to filter through the store information and provide relevant/related results to the search query entered in the search box.

Why Should You Use Meilisearch?

It is easy to set up: Meilisearch effortlessly fits into your application. With a few steps, this search feature can be integrated into your application.
It is flexible: Meilisearch readily updates to reflect changes to the data source, for instance, when new data is added or pre-existing information is modified.
It is fast and typo-tolerant: Meilisearch offers quick search results and has a feature to account for typing errors made by users. Even if users made a mistake in the search query, they would still get relevant results.
Data security: The data linked to Meilisearch is secure and can only be accessed with the correct API credentials.

What is Strapi CMS?

Strapi is an open-source, headless Content Management System developed using the Node.js Javascript framework. Strapi provides users with features to store, manipulate, and manage content across their application workflows. It's simple and easy to use. Strapi provides users with an administrative panel where they can monitor and manipulate their content.

Using Meilisearch in a Movies Web Application as a Use Case

Frontend and Strapi Setup

To quickly follow up with this tutorial, you will need to get the starter code for the movie web application. The front-end can be found on the GitHub repo. You can also get the Strapi starter template with some movie collections from the following repo.

If you run the front-end starter code in your terminal with the npm run dev command, you will get a result similar to the image below:

The starter code has four components: Movies.js, Nav.js, List.js, and Card.js. The Movies.js component renders the Nav and List components. The Nav components contain the search bar that we will link to the meilisearch plugin later in this tutorial. The List component will return the data from the Strapi collections in the form of cards. These cards will contain the image, movie name, and genre.

Connecting Strapi Collection

To connect the application to the Strapi CMS collection, we will need to fetch the data from Strapi, map through it and return the cards with the appropriate details. But before that, note that we will only have to return results corresponding to the search bar query and only return the entire collection when the search input is empty. We will need to install meilisearch and integrate the search functionality to achieve this.

Installing the Meilisearch

To make use of Meilisearch locally, we will download and run an instance of it. This can be downloaded from Meilisearch. Next, we install the Strapi-meilisearch plugin in the cloned Strapi starter repo with the following command CLI command:

    npm install strapi-plugin-meilisearch

After this, we run npm run develop to rebuild our Strapi application with the new meilisearch plugin. Open the localhost URL in your browser and log in. You will be directed to the Strapi dashboard:

Click on the meilisearch option from the left navigation pane, and in the “Settings” tab enter the URL for the meilisearch instance.

Finally, add the movie collection to meilisearch in the “Collections” window:

With this, if we launch our meilisearch instance, we'll get the Strapi collections.

Fetching Data from Meilisearch

To return the Strapi collection to our application, we will need to install meilisearch js with the following command in CLI:

    npm install meilisearch

Next, we will add an import for this dependency in Movies.js:

    import { React, useEffect, useState } from "react";
    import MeiliSearch from "meilisearch";

    const Movies = () => {
      const [collection, setCollection] = useState([]);
      useEffect(() => {
        const fetchData = async () => {
          const client = new MeiliSearch({
            host: 'http://127.0.0.1:7700',
          })
          const index = await client.getIndex('moviesapp');
          const movies = await index.search('*');
          setCollection(movies.hits);
        };
        fetchData();
      }, []);
    //....

The above code returns all movies from our Strapi CMS received through the meilisearch instance. To render our Cards, we pass the collection as a prop to the List component, map through it, and return the data:

<List collection={collection}/>

Then in List.js:

    // we pass the collection prop to the Cards component to render it
    const List = ({collection}) => {
      return (
        <div className="w-full flex justify-center">
          <div className=" w-5/6 px-6 pt-24 grid grid-cols-3 gap-2">
            <Cards collection={collection} />
          </div>
        </div>
      );
    };

Finally, we can map through the collection in Cards.js:

    const Cards = ({collection}) => {
      return (
        <>
          {collection && collection.map((movie) => (
            console.log(movie.image.url),
          <div className=" text-white" key={movie.id}>
            <Image
              className=" rounded-md"
              src={`http://localhost:1337${movie.image.url}`}
              height="300px"
              width="200px"
              alt="image here"
            />
            <h2 className=" font-semibold">{movie.moviename}</h2>
            <h3 className=" opacity-50">{movie.genre}</h3>
          </div>
          ))}
        </>
      );
    };

With this done, when we run our code, we get a result similar to the image below:

Integrating Search Functionality in Our Application

We will only need to return results related to the search query in the input field for the search functionality. We will simply pass the search input data from the Nav component to the Movies component and add it to the fetchData function.

In Movies.js, we will create a function that will return the search field value:

    const [input, setInput] = useState("");
    // use effect block
    const pull_data =(dat)=>{
      setInput(dat)
    }

Then we pass pull_data function to the Nav component:

<Nav func={pull_data}/>

In Nav.js, we will pass the value from the input field to this prop:

    const Nav = ({func}) => {
      const [input, setInput] = useState("");
      func(input)
        const handleInputChange = (e) => {
            setInput(e.target.value);
          };
    //....

With this, the final step is to add the input to the fetchData function in Movies.js:

     const index = await client.getIndex('moviesapp');
          const movies = await index.search(input);
          setCollection(movies.hits);
        };
        fetchData();
      }, [input]);

Now, we can enter a search query, and we only get results related to search keywords.

Conclusion

We have come to the end of this tutorial. In this tutorial, we learned about on-site search and its benefits. We also integrated search functionality into a movie application using Meilisearch. With the Meilisearch functionality, we can search through the movie collection either with the movie name or genre. It also readily reflects changes in the Strapi collection, such as deleting or adding a new entry.

How to build a productivity tips application with Render, Remix, and Strapi

Shada — Mon, 30 May 2022 10:22:00 +0000

In this tutorial, you will learn how to build a productivity tips app using Render, Remix and Strapi.

The productivity app will have the following:

A landing page that describes the app,
A /tips page to view all the productivity tips in the database, and
A page that displays the other details of a productivity tip.

This productivity tips web app is an app that displays a list of tips to improve productivity. This app works by passing tips and information about them from the app’s database to the frontend.

You can get the final project in the Strapi repo and the Remix repo.

Prerequisites

To follow this article, you will need knowledge of the following:

JavaScript
Basic Remix
Basic Strapi

You also need the following installed:

Why Remix?

Remix is a web framework that allows you to concentrate on the user interface, while taking care of the speed and responsiveness of your application. Remix uses nested routing, which promotes effective interaction between a frontend and one or more backends.

The productivity tips application consists of both a frontend using Remix and a backend using Strapi. Effective communication between ends of the application leads to a better and faster user experience.

Why Strapi?

Strapi is an open-source headless CMS that allows you to build GraphQL and RESTful APIs. A headless CMS allows developers to easily create APIs that can be integrated with any frontend.

A CMS (Content Management System) is a software that allows users to create and maintain contents for a web application. A headless CMS is just like a regular CMS, but it does not have a frontend that people interact with.

With Strapi you can create an API that is the following:

Easily integrated with any frontend,
Customizable,
Easy to maintain, and
Easily developed.

Why Render?

Render is a cloud service that allows you to deploy and run your websites, apps, and much more. With render you can set up and deploy your entire project with a single configuration file. This configuration file acts as a blueprint for setting up your project.

To get your Remix website and the Strapi app running, you need to deploy them on a cloud. After deploying the applications, you can access them using the domain name provided by the cloud provider, or you can add a custom domain name.

The Strapi Application

Before you start, make sure you have a GitHub Account, then follow the steps below:

Open this repo in your browser.
Click Use this template button to copy the repo to your account.
Click Create repository from template after filling any name as the repo name (you don't need to include all branches).
Clone your copy of the repo to your local machine.
Navigate to the local repo in your terminal.
Run yarn install to install the dependencies.
Run cp .env.example .env to copy the environment variables from .env.example to .env.
Run yarn develop to start the strapi application in development mode.

After setting up and starting the Strapi application, you need to do a few things:

Open the http://localhost:1337/admin page in your browser.
Create an admin account in the admin page.

The Strapi application in the repo already has the productivity tip's Content Type setup. You can see it by navigating to Content Type Builder -> Tip.

Before using your API, you need to add sample productivity tips:

Navigate to Content Manager.
Click Create New Entry.
Fill the boxes and choose an author.
Click Save.

You can also add more tips to your application before continuing if you want.

Now, you are done with setting up the Strapi app. You can begin to create the frontend.

The Remix App

To create the remix app, follow the below steps:

Fork this repository to your GitHub account.
Clone the forked repository to your local machine.
cd into the local repository
Run npm install to install its dependencies.

This repository is split into five (5) branches, each showing the steps taken to build the application.

Step 1: Initialize the Remix App

The link to this step is available here. In this branch, the remix application was created and initialized. When you run npm run dev in this branch, the web application looks like the below:

Step 2: Add Styling

The link to this step is available here.

To switch to this branch, use git checkout step-2. The changes made in this step were to the app/root.tsx file:

1. Import the Pico CSS library.

    import {
      Link,
      Links,
      LiveReload,
      Meta,
      Outlet,
      Scripts,
      ScrollRestoration,
    } from "remix";

    export function links () {
      return [{
        rel: "stylesheet",
        href: "https://unpkg.com/@picocss/pico@latest/css/pico.min.css"
      }]
    }

    export function meta() {
      return { title: "Productivity Tips" };
    }

    export default function App() {
      return (
        <html lang="en">
          <head>
            <meta charSet="utf-8" />
            <meta name="viewport" content="width=device-width,initial-scale=1" />
            <Meta />
            <Links />
          </head>
          <body>
            <nav style={{marginLeft: 10}}>
              <h1>
                <Link to="/" style={{color: "var(--h1-color)"}}>
                  Productivity Tips
                </Link>
              </h1>
            </nav>
            <Outlet />
            <ScrollRestoration />
            <Scripts />
            <LiveReload />
          </body>
        </html>
      );
    }

2. Change the page title

    import {
      Link,
      Links,
      LiveReload,
      Meta,
      Outlet,
      Scripts,
      ScrollRestoration,
    } from "remix";

    export function links () {
      return [{
        rel: "stylesheet",
        href: "https://unpkg.com/@picocss/pico@latest/css/pico.min.css"
      }]
    }

    export function meta() {
      return { title: "Productivity Tips" };
    }

    export default function App() {
      return (
        <html lang="en">
          <head>
            <meta charSet="utf-8" />
            <meta name="viewport" content="width=device-width,initial-scale=1" />
            <Meta />
            <Links />
          </head>
          <body>
            <nav style={{marginLeft: 10}}>
              <h1>
                <Link to="/" style={{color: "var(--h1-color)"}}>
                  Productivity Tips
                </Link>
              </h1>
            </nav>
            <Outlet />
            <ScrollRestoration />
            <Scripts />
            <LiveReload />
          </body>
        </html>
      );
    }

3. Add "Productivity Tips" header and link it to `/`

    import {
      Link,
      Links,
      LiveReload,
      Meta,
      Outlet,
      Scripts,
      ScrollRestoration,
    } from "remix";

    export function links () {
      return [{
        rel: "stylesheet",
        href: "https://unpkg.com/@picocss/pico@latest/css/pico.min.css"
      }]
    }

    export function meta() {
      return { title: "Productivity Tips" };
    }

    export default function App() {
      return (
        <html lang="en">
          <head>
            <meta charSet="utf-8" />
            <meta name="viewport" content="width=device-width,initial-scale=1" />
            <Meta />
            <Links />
          </head>
          <body>
            <nav style={{marginLeft: 10}}>
              <h1>
                <Link to="/" style={{color: "var(--h1-color)"}}>
                  Productivity Tips
                </Link>
              </h1>
            </nav>
            <Outlet />
            <ScrollRestoration />
            <Scripts />
            <LiveReload />
          </body>
        </html>
      );
    }

When you run this program, the web app will look the below:

Step 3: Edit the Content [Add the Tips]

The link to this step can be found here.
To switch to this branch use the git checkout step-3 command.

The file changed in this step is src/index.tsx, and the following were the changes made:

1. Add a paragraph that describes the app:

    import { Link } from "remix";

    export default function Index() {
      return (
        <main className="container">
          <p>
            Over time everyone develops a Swiss army knife of tips, tricks,
            and hacks to boost productivity. At Render, I created a
            #productivity-tips Slack channel for anyone to share their best
            productivity boosters with everyone on the team. Using 
            <a href="https://strapi.io">Strapi</a> and 
            <a href="https://remix.run">Remix</a>, we made a little web app to
            catalog all of these tips and share them with others. 🤓
          </p>
          <Link to="/tips">👉 Productivity Tips</Link>
        </main>
      );
    }

2. Add a link to `/tips`

    import { Link } from "remix";

    export default function Index() {
      return (
        <main className="container">
          <p>
            Over time everyone develops a Swiss army knife of tips, tricks,
            and hacks to boost productivity. At Render, I created a
            #productivity-tips Slack channel for anyone to share their best
            productivity boosters with everyone on the team. Using 
            <a href="https://strapi.io">Strapi</a> and 
            <a href="https://remix.run">Remix</a>, we made a little web app to
            catalog all of these tips and share them with others. 🤓
          </p>
          <Link to="/tips">👉 Productivity Tips</Link>
        </main>
      );
    }

/tips is a page that will be created in the next step. This page holds a list of all the tips stored in the Strapi backend.

When you run the program at this step, the web application looks like the below:

Step 4: Create New Files

The link to this step can be found here

The following are new files created in this step:

app/routes/tips.jsx file, which is the template that shows both the content of the list of tips and individual tips details.

    import { Outlet } from "remix";

    export default function TipsRoute() {
      return (
        <main className="container">
          <Outlet />
        </main>
      );
    }

index.jsx file inside a new app/routes/tips folder. This component will be rendered in place of the <Outlet /> above.

    import { Link, useLoaderData } from "remix";
    import { checkStatus, checkEnvVars } from "~/utils/errorHandling";

    export async function loader () {
      checkEnvVars();

      const res = await fetch(`${process.env.STRAPI_URL_BASE}/api/tips?populate=*`, {
        method: "GET",
        headers: {
          "Authorization": `Bearer ${process.env.STRAPI_API_TOKEN}`,
          "Content-Type": "application/json"
        }
      });

      // Handle HTTP response code < 200 or >= 300
      checkStatus(res);

      const data = await res.json();

      // Did Strapi return an error object in its response?
      if (data.error) {
        console.log('Error', data.error)
        throw new Response("Error getting data from Strapi", { status: 500 })
      }

      return data.data;
    }

    export default function Tips() {
      const tips = useLoaderData();

      return (
        <ul>
          {tips.map((tip) => (
            <li key={tip.attributes.Slug}>
              <Link to={tip.attributes.Slug}>{tip.attributes.Name}</Link>
            </li>
          ))}
        </ul>
      );
    }

errorHandling.js inside a new app/utils folder. The errorHandling.js folder provides the checkEnvVars() and checkStatus folder that the app.routes/tips/index.jsx folder.

    // Custom error class for errors from Strapi API
    class APIResponseError extends Error {
        constructor(response) {
            super(`API Error Response: ${response.status} ${response.statusText}`);
        }
    }

    export const checkStatus = (response) => {
        if (response.ok) {
            // response.status >= 200 && response.status < 300
            return response;
        } else {
            throw new APIResponseError(response);
        }
    }

    class MissingEnvironmentVariable extends Error {
        constructor(name) {
            super(`Missing Environment Variable: The ${name} environment variable must be defined`);
        }
    }

    export const checkEnvVars = () => {
        const envVars = [
            'STRAPI_URL_BASE',
            'STRAPI_API_TOKEN'
        ];

        for (const envVar of envVars) {
            if (! process.env[envVar]) {
                throw new MissingEnvironmentVariable(envVar)
            }
        }
    }

In the index.jsx file, the useLoaderData() function calls the loader function on lines 4-27. the loader function is helpful for separating the program that interacts with APIs, from the view.

    import { Link, useLoaderData } from "remix";
    import { checkStatus, checkEnvVars } from "~/utils/errorHandling";

    export async function loader () {
      checkEnvVars();

      const res = await fetch(`${process.env.STRAPI_URL_BASE}/api/tips?populate=*`, {
        method: "GET",
        headers: {
          "Authorization": `Bearer ${process.env.STRAPI_API_TOKEN}`,
          "Content-Type": "application/json"
        }
      });

      // Handle HTTP response code < 200 or >= 300
      checkStatus(res);

      const data = await res.json();

      // Did Strapi return an error object in its response?
      if (data.error) {
        console.log('Error', data.error)
        throw new Response("Error getting data from Strapi", { status: 500 })
      }

      return data.data;
    }

    export default function Tips() {
      const tips = useLoaderData();

      return (
        <ul>
          {tips.map((tip) => (
            <li key={tip.attributes.Slug}>
              <Link to={tip.attributes.Slug}>{tip.attributes.Name}</Link>
            </li>
          ))}
        </ul>
      );
    }

Before running the application, you need to complete the following steps:

Open the Strapi dashboard.
Navigate to Settings --> API Tokens --> Create new API, to create an API token
Click Save after filling the necessary fields.
Copy the generated API token.
Copy the new contents of the .env.example file to .env.

    STRAPI_URL_BASE=http://localhost:1337
    STRAPI_API_TOKEN=a-secret-token-from-the-strapi-admin-gui

Replace a-secret-token-from-the-strapi-admin-gui with the API token, then click Save. >If you are using windows, you might need to change the STRAPI_URL_BASE's value to http://127.0.0.1:1337.

After running your application with the npm run dev command, the web application should look like the below:

Step 5: Define Dynamic Routes and Style

Here's the link to this step

In this step, the following files are created:

app/routes/tips/$tipId.jsx. Remix uses files that begin with a dollar sign to define dynamic URL routes.
app/styles/tip.css. This file holds contains the styling for the grid of screenshot images

In the $tipId.jsx file, the following is what happens:

Import the tip.css file into the $tipId.jsx file.

    import { useLoaderData, Link } from "remix";
    import { checkStatus, checkEnvVars } from "~/utils/errorHandling";

    import stylesUrl from "~/styles/tip.css";

    export function links () {
      return [{ rel: "stylesheet", href: stylesUrl }];
    }


    export function meta ({ data }) {
      return {
        title: data.attributes.Name
      }
    }

    export async function loader ({ params }) {
      ...

Create the TipRoute component that is exported by default.

    ...
    export default function TipRoute() {
      const tip = useLoaderData();

      return (
        <div>
          <Link to="/tips" style={{ textDecoration: 'none' }}>← back to list</Link>
          <hgroup>
            <h2>{tip.attributes.Name}</h2>
            <h3>by {tip.attributes.Author.data?.attributes.firstname ?? 'an unknown user'}</h3>
          </hgroup>

          <p>
            {tip.attributes.Description}
          </p>
          <div className="grid">
            {tip.attributes.Screenshots.data.map((s) => (
              <div key={s.attributes.hash}>
                <img
                  src={s.attributes.formats.thumbnail.url}
                  alt={tip.attributes.Name + ' screenshot'}
                />
              </div>
            ))}
          </div>
        </div>
      );
    }

Create a loader function for useLoaderData() hook in the TipRoute component.

    import { useLoaderData, Link } from "remix";
    import { checkStatus, checkEnvVars } from "~/utils/errorHandling";

    import stylesUrl from "~/styles/tip.css";

    export function links () {
      return [{ rel: "stylesheet", href: stylesUrl }];
    }

    export function meta ({ data }) {
      return {
        title: data.attributes.Name
      }
    }

    export async function loader ({ params }) {
      checkEnvVars();

      const res = await fetch(`${process.env.STRAPI_URL_BASE}/api/tips`
        + `?populate=*&filters[Slug]=${params.tipId}`, {
        method: "GET",
        headers: {
          "Authorization": `Bearer ${process.env.STRAPI_API_TOKEN}`,
          "Content-Type": "application/json"
        }
      })

      // Handle HTTP response code < 200 or >= 300
      checkStatus(res);

      const data = await res.json();

      // Did Strapi return an error object in its response?
      if (data.error) {
        console.log('Error', data.error)
        throw new Response("Error getting data from Strapi", { status: 500 })
      }

      // Did Strapi return an empty list?
      if (!data.data || data.data.length === 0) {
        throw new Response("Not Found", { status: 404 });
      }


      const tip = data.data[0];

      // For a Tip with no screenshot, replace API returned null with an empty array
      tip.attributes.Screenshots.data = tip.attributes.Screenshots.data ?? [];

      // Handle image URL being returned as just a path with no scheme and host.
      // When storing media on the filesystem (Strapi's default), media URLs are
      // return as only a URL path. When storing media using Cloudinary, as we do
      // in production, media URLs are returned as full URLs.
      for (const screenshot of tip.attributes.Screenshots.data) {
        if (!screenshot.attributes.formats.thumbnail.url.startsWith('http')) {
          screenshot.attributes.formats.thumbnail.url = process.env.STRAPI_URL_BASE +
            screenshot.attributes.formats.thumbnail.url;
        }
      }
      return tip;
    }
    ...

In the loader function, the following happens:

Use checkEnvVars() function to check if all the environment variables needed are present.
Make a request to the http://localhost:1337/api/tips route (The URL contains parameters that Strapi uses to specify the request).
Use the checkStatus() function to check that the http status is alright ( between 200 to 299 ).
Check if strapi returned an error in its response. Sometimes, Strapi responds with an error object while having an OK http status.
Check if strapi returned an empty list. If there's no productivity tip at the id, Strapi returns an empty list.
Handle routing for the images in a tip. Strapi uses the local filesystem when it is storing file uploads, and uses a cloud server. When it is from the development server, Strapi doesn't respond with the URL to the file, it only responds with its local path.

When you run the application at this point, the http://localhost:3000/tips/tip page should look like the below:

Deploy to Render

Before deploying your project to the cloud, you need to follow the below steps:

Open the strapiconf2022-workshop-strapi repo.
Change the value of the repos in the /render.yaml file to URL of your remote strapi and remix repo ( In your case it might be https://github.com/your-username/strapiconf2022-workshop-strapi and https://github.com/your-username/strapiconf2022-workshop-remix ).

    services:
      - type: web
        name: productivity-tips-api
        env: node
        plan: free
        # Update the following line with your Strapi GitHub repo
        repo: https://github.com/render-examples/strapiconf2022-workshop-strapi
        branch: main
        buildCommand: yarn install && yarn build
        startCommand: yarn start
        healthCheckPath: /_health
        envVars:
          - key: NODE_VERSION
            value: ~16.13.0
          - key: NODE_ENV
            value: production
          - key: CLOUDINARY_NAME
            sync: false
          - key: CLOUDINARY_KEY
            sync: false
          - key: CLOUDINARY_SECRET
            sync: false
          - key: DATABASE_URL
            fromDatabase:
              name: strapi
              property: connectionString
          - key: JWT_SECRET
            generateValue: true
          - key: ADMIN_JWT_SECRET
            generateValue: true
          - key: API_TOKEN_SALT
            generateValue: true
          - key: APP_KEYS
            generateValue: true

      - type: web
        name: productivity-tips-web
        env: node
        plan: free
        # Update the following line with your Remix GitHub repo
        repo: https://github.com/render-examples/strapiconf2022-workshop-remix
        branch: step-5
        buildCommand: npm install && npm run build
        startCommand: npm start
        envVars:
          - key: STRAPI_URL_BASE
            fromService:
              type: web
              name: productivity-tips-api
              envVarKey: RENDER_EXTERNAL_URL

    databases:
      - name: strapi
        plan: free # This database will expire 90 days after creation

Save the changes, and push to the remote repository.

    $ git add render.yaml
    $ git commit
    $ git add

Login to the Render dashboard.
Click on New and select Blueprint.
Add the repository that the render application can find the render.yaml file. In this case, the strapiconf2022-workshop-strapi repo.

When you select the repo, you will be prompted to add the following details:

The Service Group Name. This is a unique name that is used to identify your project within your account.
The CLOUDINARY_NAME
The CLOUDINARY_KEY
The CLOUDINARY_SECRET

To get the value for the last three fields above, you need to do the following:

Login to the Cloudinary dashboard.
Click Start configuring.
Copy the values of the following fields:
- cloud_name
- api_key
- api_secret
Paste the copied values in the following respectively:
- The CLOUDINARY_NAME
- The CLOUDINARY_KEY
- The CLOUDINARY_SECRET

After filling the fields, click Apply
Then you wait for Render to deploy your application.

Conclusion

Once your application has been deployed, you can see the address of your deployed application by navigating to the dashboard, then select:

productivity-tips-web for the Remix app
productivity-tips-api for the Strapi app

After selecting any of the above, you will see the domain name that anyone can use to access your web application.

To get the application up and running, you need to do the following:

Navigate to the Strapi application's admin dashboard ( at /admin ).
Navigate to Settings --> API Tokens --> Create new API token
Copy the generated API token.
Open the productivity-tips-web service
Navigate to Environment and click Add Environment Variables
Set the key as STRAPI_API_TOKEN and paste the generated API token
Click on Save Changes to redeploy your application.

After setting up your application, you can now add productivity tips to your application from the Strapi backend, and you can now fully use the web application.

To further your knowledge, be sure to check out the following links:

Strapi Internals: Customizing the Backend [Part 1 - Models, Controllers & Routes]

Shada — Wed, 25 May 2022 12:41:58 +0000

Strapi works as a Headless CMS and provides a lot of functionality out of the box, allowing it to be used for any use case without any modifications to the code. This doesn't stop Strapi from providing customization options and extendable code that allows developers to fine-tune Strapi’s internal working to suit a special use case. Let’s dive into the internals of Strapi and how we can customize the backend.

Goal

We’re going to be working with the Strapi backend and cover a few aspects of customizations to the Strapi backend. We’re touching on controllers, services, policies, webhooks and routes, and others.

This article is based on the Strapi internals, customizing the backend workshop video by Richard from StrapiConf 2022

Strapi runs an HTTP server based on Koa, a back-end JavaScript framework.

What is Koa?

Koa aims to be a smaller, more expressive, and more robust foundation for web applications and APIs. If you are not familiar with the Koa backend framework, you should read the Koa's documentation introduction.

Leveraging Koa, Strapi provides a customizable backend and according to the backend customization docs, each part of Strapi's backend can be customized:

The requests received by the Strapi server,
The routes that handle the requests and trigger the execution of their controller handlers,
The policies that can block access to a route,
The middlewares that can control the request flow and the request before moving forward,
The controllers that execute code once a route has been reached,
The services that are used to build custom logic reusable by controllers,
the models that are a representation of the content data structure,
The responses sent to the application that sent the request, and
The webhooks that are used to notify other applications of events that occur.

We’ll be covering these parts of Strapi backend while building the custom functionality for our order confirmation API

Use Case

The use case for this is very basic. We’re creating the backend for a shop where we have users that can make orders and can also confirm the orders.

To achieve our use case and be build custom functionalities that we need and Strapi does not provide, we’ll get our hands on the backend code and build out those functionalities.

Prerequisites

Basic JavaScript knowledge
Node.js (I’ll be using v16.13.0)
A code editor, I’ll be using VScode, you can get it from the official website.
Prior Strapi knowledge is helpful, but not required.

Setting up

Let’s set up a basic strapi application with the --quickstart option. This creates a strapi instance with a simple SQLite database.

    yarn create strapi-app strapi-backend --quickstart 
    #OR
    npx create-strapi-app@latest strapi-backend --quickstart

I’m using Strapi v4.1.9 which is the latest at the time of creating this project

After installing the Strapi app, run the following command.

    yarn develop
    #OR
    npm run develop

This should open up a new tab in the browser to http://localhost:1337/admin, which will redirect us to the registration page where we will create an admin user.

We’ll enter our details and once this is done, hit the “Let’s start” button. A new admin account will be created and we’ll be redirected back to http://localhost:1337/admin/.

Creating our Models

Now, let’s quickly create two content types: Products & Orders

"Product" should include the following fields:
- name - Short Text
- product_code - Short Text

Here’s what the content type should look like:

"Order" should include the following fields:
owner - Relation (one-way relation with User from users-permissions)

products Relation (many-way relation with Product )

confirmed - Boolean
confirmation_date - Datetime

Here’s what the content type should look like:

We just created content type models using the Content-Type builder in the admin panel. We could also create these content types using the strapi generate with Strapi’s interactive CLI tool.

The content-types has the following models files:

schema.json for the model's schema definition. (generated automatically when creating content-type with either method)
lifecycles.js for lifecycle hooks. This file must be created manually.

Product Content-Type Schema

We can check out the model schema definition for the Products in the ./src/api/product/content-types/product/schema.json file in our Strapi project code.

    // ./src/api/product/content-types/product/schema.json
    {
      "kind": "collectionType",
      "collectionName": "products",
      "info": {
        "singularName": "product",
        "pluralName": "products",
        "displayName": "Product"
      },
      "options": {
        "draftAndPublish": true
      },
      "pluginOptions": {},
      "attributes": {
        "name": {
          "type": "string"
        },
        "product_code": {
          "type": "string"
        }
      }
    }

Order Content-Type Schema

The model schema definition for Order would also be in the ./src/api/order/content-types/order/schema.json file.

    // ./src/api/order/content-types/order/schema.json

    {
      "kind": "collectionType",
      "collectionName": "orders",
      "info": {
        "singularName": "order",
        "pluralName": "orders",
        "displayName": "Order",
        "description": ""
      },
      "options": {
        "draftAndPublish": true
      },
      "pluginOptions": {},
      "attributes": {
        "owner": {
          // define a relational field
          "type": "relation",
          "relation": "oneToOne",
          "target": "plugin::users-permissions.user"
        },
        "confirmed": {
          "type": "boolean"
        },
        "confirmation_date": {
          "type": "datetime"
        },
        "products": {
          "type": "relation",
          "relation": "oneToMany",
          "target": "api::product.product"
        }
      }
    }

Now that we’ve seen what the models look like in the backend code, let’s dive into what we're trying to build while exploring these customizations.

What We’re Building

As we previously discussed, we’re trying to create a store API and currently Strapi automatically provides us with routes that perform basic CRUD operations and we can take a look at them if we go to SETTINGS in our admin dashboard and then USERS & PERMISSIONS PLUGIN > ROLES > PUBLIC.

In the image above, we can see the default pre-defined routes that Strapi creates for our Order content type.

Now, we want to take it a step further and add another level of customization. The feature that we’re going for is for users to be able to create orders and confirm those orders they’ve made.

A very basic way of achieving this would be by using the update route on the Order content type to modify the confirmed and confirmation_date fields. But in a lot of situations, we might need more than just that and that’s what we’ll be working on.

Custom Controllers and Routes

The first thing that we’ll be doing is to make sure that we have controllers and routes set up, knowing that we want to be able to confirm our orders .

Controllers are a very important aspect of how Strapi works and play a big role in customizing the backend. So, let’s go ahead and create a blank controller and a route for it.

Create a Controller

To define a custom controller inside the core controller file for the order endpoint or collection type, we can pass in a function to the createCoreController method which takes in an object as a parameter and destructuring it, we’ll pass in strapi.

    // ./src/api/order/controllers/order.js
    'use strict';
    /**
     *  order controller
     */
    const { createCoreController } = require('@strapi/strapi').factories;

    module.exports = createCoreController('api::order.order', ({strapi}) => ({
      confirmOrder: async (ctx, next) => {
        ctx.body = "ok"
      }
    }));

Here, the function we passed to createCoreController returns an object where we can specify an async function confimOrder, which takes ctx and next as parameters. Within this function, we can define a response, ctx.body = "ok".

That’s how we can create a custom controller within the core controller in the default order route file. For illustration, we can completely overwrite an already existing controller, like find for example:

    // ./src/api/order/controllers/order.js

    ...
    module.exports = createCoreController('api::order.order', ({strapi}) => ({
      confirmOrder: async (ctx, next) => {
        ctx.body = "ok"
      },
      find: async (ctx, next) => {
        // destructure to get `data` and `meta` which strapi returns by default
        const {data, meta} = await super.find(ctx)

        // perform any other custom action
        return {data, meta}
      }
    }));

Here, we’ve completely overwritten the default find controller, although we’re still running the same find function using super.find(ctx). Now, we can start to add the main logic behind our confirmOrder controller.

Remember that we’re trying to create a controller that allows us to confirm orders. Here are a few things we need to know:

What order will be confirmed, and
Which user is confirming the order.

To know what order is being confirmed, we’ll have to get the id of that order from the route, so the route path we’ll create later on is going to include a dynamic :id parameter. Which is what we’ll pull out from ctx.request.params in our controller.

    // ./src/api/order/controllers/order.js

    module.exports = createCoreController('api::order.order', ({strapi}) => ({
      confirmOrder: async (ctx, next) => {
        const {id} = ctx.request.params
        console.log(id);
      },
    }));

The next thing we need to do is to create a route that will be able to run our controller.

Create a Route

We’re going to create custom route definitions for our confirmOrder controller. If we take a look at the already created order.js route, we’ll see that the core route has already been created:

    // ./src/api/order/routes/order.js

    'use strict';
    /**
     * order router.
     */
    const { createCoreRouter } = require('@strapi/strapi').factories;
    module.exports = createCoreRouter('api::order.order'); // core route already created

We don’t have to make any modifications here in order to create our custom routes; we can create a new file for that. In order to access the controller we just created from the API, we need to attach it to a route.

Create a new file to contain our custom route definitions in the order/routes directory - ./src/api/order/routes/confirm-order.js

    // ./src/api/order/routes/confirm-order.js

    module.exports = {
      routes: [
        {
          method: "POST",
          path: "/orders/confirm/:id",
          handler: "order.confirmOrder"
        }
      ]
    }

What we’re basically doing here is creating an object with a routes key, which has a value of an array of route objects.

The first object here defines a route with the method of POST and a path - /orders/confirm/:id, where the /:id is a dynamic URL parameter and is going to change based on the id of the order we’re trying to confirm.

It also defines the handler, which is the controller that will be used in the route and in our case, that would be the confirmOrder controller we created.

Test the Custom Controllers and Routes

Let’s test our custom routes and controllers now shall we? Run:

    yarn develop

Once the app is running, we can start sending requests with any API tester of our choice. I’ll be using Thunder Client. It’s a VSCode extension, you can download it from the marketplace.

Once, you’ve gotten your API tester set up, send a POST request to http://localhost:1337/api/orders/confirm/1.

As you can see, we’re getting a 403 forbidden error. That’s because Strapi doesn't return anything for unauthenticated routes by default. We need to modify the Permissions in Strapi in order for it to be available to the public.

To do that, go to the Strapi admin dashboard, then go to SETTINGS in our admin dashboard and then USERS & PERMISSIONS PLUGIN > ROLES > PUBLIC.

As you can see, we have a new action - confirmOrder. Enable it and click on SAVE. Now, if we try to send the request again, you should see the screenshot below.

On our server, we can see that it logged the id as we defined in our controller. We’re now getting a 404 error, don’t worry, a different error is progress. We’re getting a NotFoundError because we never returned any response in out confirmOrder controller, we only did a console.log. Now that we’ve seen that it works, let’s build the main functionality.

Building the Logic for the "confirmOrder" Controller

Remember there are a few things we need to know:

What order is going to be confirmed - from the request order id
What user is confirming the order - from the context state

Getting the Order `id`

In the controller, let’s return the id instead of simply logging it:

    // ./src/api/order/controllers/order.js
      confirmOrder: async (ctx, next) => {
        const {id} = ctx.request.params
        return id
      },

Send the request again:

Great! That works. We’ve been able to get the order id, let’s move further to get the user sending the request.

Getting the User

In the confimOrder controller, we can get the authenticated user from the context state - ctx.state

    // ./src/api/order/controllers/order.js
    ...
      confirmOrder: async (ctx, next) => {
        const {id} = ctx.request.params
        console.log(ctx.state.user)
        return id
      },

Now, if we send this request, we’ll see that the server logs out undefined.

That’s because we’re sending a request without authentication. Let’s create a new user to send requests from. In the Strapi dashboard, go to the CONTENT MANAGER > USER and click on CREATE NEW ENTRY to create a new user.

Make sure to set the role to Authenticated.

Next, we’re going send a login request with our newly created user details. In our API tester, send a POST request to the http://localhost:1337/api/auth/local endpoint and we’ll have all the details of that user including the JWT.

We’ll go ahead and copy the token in the jwt field. We’ll need that to get our user in the confirm confirmation request. To do that, we’ll have to set Authorization headers in our API Tester.

In the case of this extension, we can use the Auth options provided and place the token in the Bearer field.

Now, we’ll head over to the Strapi admin and set the permissions for Public and Authenticated users. In the Strapi admin dashboard, go to SETTINGS and then USERS & PERMISSIONS PLUGIN > ROLES > PUBLIC. Disable the Order actions and click the Save button. Next, go back to ROLES and select AUTHENTICATED. Enable the actions for Order.

Once this is done, we’ll head back and send the request to http://localhost:1337/api/orders/confirm/1 with the authorization headers.

Awesome! We see that all the user details are being logged out here on the console.

Make sure to never return sensitive user information contained in the user object as an API response. Ensure you always sanitize your responses from sensitive data.

Getting the Order Data

Moving on, now that we have the order id and are able to see who's confirming the order, we are going to get the order data by using Strapi’s entityService. Here’s an example of how we can use the entityService

    // ./src/api/order/controllers/order.js
    ...
      confirmOrder: async (ctx, next) => {
        const {id} = ctx.request.params
        const user = ctx.state.user

        // using the entityService to get content from strapi
        // entityService provides a few CRUD operations we can use
        // we'll be using findOne to get an order by id
        const order = await strapi.entityService.findOne("api::order.order", id)
        console.log(order)
        return id
      },

The entityService.findOne() takes in two parameters:

The uid of what we’re trying to find, which for the order is api::order.order
The parameters, which is the id of the order in this case

Save the changes, wait for the server to restart and then send another request to the confirm endpoint

So, it returns null which is okay since we don’t have any order created yet.
Next, we need to change the state of its confirmation and change the confirmation date

Update Order Data

To do that, we’ll use the update method from entityService to update the order

    // ./src/api/order/controllers/order.js
    ...
      confirmOrder: async (ctx, next) => {
        const { id } = ctx.request.params
        await strapi.entityService.update("api::order.order", id , {
          data: {
            confirmed: true,
            confirmation_date: new Date()
          }
        })
        return {
          message: "confirmed"
        }
      },

Here, you can see that we’re passing two things to the update() method:

The uid - api::order.order and
The id of the order we want to update and
The params object which contains a data key with the value of an object where we set confirmed to true and assign a confimation_date with new Date()

Now that we’ve seen how we can update an order, remember that we don’t have any order created yet. Let’s work on that.

Create an Order

Before we go into that, if we take a look at the order content type, we’ll see that it has an owner field.

When creating a new order using the default order controller, the owner will have to be provided with the API request. That way, any user can send a request and still specify a different user in the owner field. That would be problematic. We don’t want that.

What we can do instead is to modify the default controller so that the owner of the order can be inferred from the request context. Let’s enable the create action for orders in the Authenticated Permissions settings

Hit Save. Now, we can go back to our code to customize the create controller

Let’s see how we can achieve that:

    // ./src/api/order/controllers/order.js
    ...
      confirmOrder: async (ctx, next) => {
        ...
      },

      // customizing the create controller
      async create(ctx, next){
        // get user from context
        const user = ctx.state.user
        // get request body data from context
        const { products } = ctx.request.body.data
        console.log(products);
        // use the create method from Strapi enitityService
        const order = await strapi.entityService.create("api::order.order", {
          data: {
            products,
            // pass in the owner id to define the owner
            owner: user.id
          }
        })
        return { order }
      }

We have a few things going on here. We:

Get the user from ctx.state.user,
Get the products from ctx.request.body.data
Create a new order with strapi.entityService.create(), pass the uid - "api::order.order" and an object. The object we’re passing as parameters is similar to our request body but with the addition of the owner id.
Then, return the created order

To try out our customized create order controller, we have to create a few products first. So, let’s head back to Strapi admin and navigate to CONTENT MANAGER > COLLECTION TYPES > PRODUCT > CREATE NEW ENTRY and create a new product.

Enter the name of the product and the product code and click on SAVE and then PUBLISH.

Create More Products

Great!

Now, let’s send a new POST request to the orders endpoint - http://localhost:1337/api/orders with authorization and the following body:

    {
      "data": {
        "products": [
          2
        ]
      }
    }

We should see a new order created with the owner field populated.

If we check the dashboard, we can see the new order:

Great!

Confirm an Order

Let’s try to confirm our newly created order and see what happens.

It works! If we check our Strapi dashboard, we should see it confirmed too.

Conclusion

We’ve been able to create custom routes and customize Strapi controllers, allowing us to perform custom actions, which we would not be able to with the default Strapi functionality.

Currently, orders can be confirmed by just passing the order id to the request body. This means that any (authenticated) user can pass that id in a request and confirm that order. We don’t want that. Although orders can only be created by an authenticated user, we only want the user who created the order to be able to confirm the order.

Resources

In the next part of this article, we’ll complete building out our order confirmation use case while exploring other customizations like Policies, utilities.

The backend code for this part of the article can be accessed from here.

Webhooks and How to Use Them in Strapi

Shada — Tue, 24 May 2022 08:41:08 +0000

Webhooks is a term you might have heard before in other apps, and you might have been hooked on it, wondering what it is about. Webhooks are a simple way for your different applications to communicate and get notified when a new event happens.

When you make an online payment via bank transfer, for example, the payment gateway provider will utilize webhooks to communicate the transaction status to the third party app, this process is automated.

In the headless CMS world, webhooks are very useful to build your frontend upon modification in your administration panel. Let's break it down and see how it works in Strapi!

What is Strapi?

Strapi is an open-source headless CMS that allows you to effectively manage your application content by separating the backend and front end utilizing Jamstack technology. it provide flexible and dynamic method of exchange content across your applications.

Strapi webhooks enable you to exchange content with third-party applications when a specific event occurs. For example, webhooks are triggered when you create, update, or delete content.

What are Webhooks?

Webhooks are automated messages that are sent each time an event happens. They have one unique mission: transmitting a message or data to a unique address or URL. Think of your email inbox. In ancient times, you had to connect to your inbox to check if you had new emails. Nowadays, your new emails come directly to you through push notifications. Checking your emails is much easier. You receive an automated message as soon as you receive a new email. Well, webhooks are the same, but between apps.

How do Webhooks Work?

Webhooks use HTTP POST requests. When an event is triggered, the first app sends an HTTP POST payload to the URL of the second app configured in the webhook. The most straightforward way HTTP requests work is by appending data to a URL and ping that URL. The URL looks like this, with data following a question mark in the URL:
https://yourapp.com/data/12345?Author=John&title=my_article&content=lorem_ipsum

Then, your app will receive the information that something new happened, and do what it has to do. To make it simpler, it's like a command-line with data, sent from one app to another over HTTP.

The data sent will look like this:

    {
      "event": "entry.create",
      "created_at": "2020-01-10T08:47:36.649Z",
      "model": "address",
      "entry": {
        "id": 1,
        "geolocation": {},
        "city": "Paris",
        "postal_code": null,
        "category": null,
        "full_name": "Paris",
        "created_at": "2020-01-10T08:47:36.264Z",
        "updated_at": "2020-01-10T08:47:36.264Z",
        "cover": null,
        "images": []
      }
    }

Are Webhooks the Same as APIs?

There are many ways applications interface with data; webhooks are just one of them. APIs (Application Programming Interfaces) are similar but different at the same time and useful in specific instances.

The main difference is in the fact that webhooks are automatic: you set up them once, and then they run with any manual action. APIs require to manually request data and are very useful when you know you'll have constant changes in your data.

To use an example, you could see an API like getting a meal you ordered from the waiter at the restaurant. A webhook would be more like your waiter throwing you a pizza every time they pass by. Let's see how it works in Strapi.

Getting Started with Strapi

If you are new to Strapi, just give it a try!

Take a look at the Getting Started guide to begin, or get started with the following command line:

    npx create-strapi-app@latest my-project --quickstart

How to Use Webhooks in Strapi?

In this example, we are going to create a webhook to automatically deploy a modification on Netlify.

Let's get started!

1. Creating a Webhook:
To create and manage webhooks, from your dashboard menu go through the Setting → Global settings → Webhooks sub-section of the settings interface.

Your webhook needs to call a URL, which, in this case, is the Netlify API. It also should contain special headers that describe what the event is.

Depending on the kind of events, they can have multiple headers. The Hooks section shows which object of created, edited, and deleted ids should be included in the delivered payload.

2. Testing the Webhook:
After creation, you need to test-trigger your newly created webhook. To do so, Strapi provides a Trigger button, allowing you to see if your webhook is fully functional.

3. Enabling or Disabling Webhooks:
You can easily create as many webhooks as you need; the only limit is your imagination. Webhooks can be used to send emails when a page is updated, to trigger a website build, to notify a messaging app upon modification, or any other scenarios you could think of. The Strapi UI allows you to easily enable or disable any webhook created.

Get Involved

Check out our public product roadmap to see what features we’ll be working on next.

Don’t see a feature you’d like in the backlog? Feel free to submit new feature requests or even better, start contributing to Strapi on GitHub. All contributions and users are welcome!

How to Create a Strapi v4 Plugin : Generate a Plugin 1/6

Shada — Mon, 23 May 2022 13:53:35 +0000

The documentation already covers a plugin development section. However, this might be a little bit hard to follow especially if you discovered Strapi recently. This tutorial aims to make it easier for you to learn this process with a real example of a To-Do list plugin.

You will learn to create a simple To-Do plugin in which you'll create a plugin content-type for persisting data, customize the back-end, create settings, create a plugin homepage, and inject a React component in the admin, use the Strapi Design System and more.

This step by step Strapi v4 plugin development tutorial works for the Strapi v4 version only.

Generate a plugin

We assume you have a Strapi project and you are located inside of it from your terminal. From there, you can simply generate a plugin using the generate CLI command.

This command, allows you to generate APIs, controllers, content types, plugins, policies, middlewares, and services for your Strapi project.

# yarn
yarn strapi generate plugin

# npm
npm run strapi generate plugin

$ strapi generate plugin
? Plugin name todo

We are going to call this plugin: todo

$ strapi generate plugin
? Plugin name todo
✔  +! 25 files added
...

You can now enable your plugin by adding the following in ./config/plugins.js.

─────────────────────────────────
module.exports = {
  // ...
  'todo': {
    enabled: true,
    resolve: './src/plugins/todo'
  },
  // ...
}
─────────────────────────────────

Strapi created a new ./src/plugins/todo folder containing the default files of your v4 plugin.

The result of the generate command invite you to update your ./config/plugins.js file if it already exists or to create it with the following:

// ./config/plugins.js
module.exports = {
  todo: {
    enabled: true,
    resolve: './src/plugins/todo',
  },
};

The last step of this section is to build the admin of your Strapi project.

Updating the admin requires building your Strapi project. By default, Strapi will inject some plugin components (menu link, homepage) in the admin which is why a build is required.

However, you can directly start your server with 'yarn'|'npm run' develop --watch-admin options. It will start your application with the autoReload enabled and the front-end development server. It allows you to customize the administration panel while not having to build every time.

Instead of building your application again and again during your plugin development, I advise you to work on your plugin while having your Strapi project running with the autoReload enabled by using: --watch-admin

Once you are done with your plugin development, you'll need to build your application

# yarn
yarn build
# or
yarn develop --watch-admin

# npm
npm run build
# or
npm run develop --watch-admin

If you start your server after building or after running develop --watch-admin, you should see your todo plugin in the main navigation linking to an empty homepage.

Step 2 - How to create a Strapi v4 plugin : File structure 2/6

Step 3- How to create a Strapi v4 plugin : Add a content-type to a plugin 3/6

Step 4- How to create a Strapi v4 plugin : Server customization 4/6

Step 5- How to create a Strapi v4 plugin : Admin customization 5/6

Step 6- How to create a Strapi v4 plugin : Publish on npm 6/6

How to Build a CRUD App with React and a Headless CMS

Shada — Fri, 20 May 2022 11:47:31 +0000

For many years, web projects have used Content Management Systems (CMS) to create and manage content, store it in a database, and display it using server-side rendered programming languages. WordPress, Drupal, Joomla are well-known applications used for this purpose.

One of the issues the traditional CMSes have is that the backend is coupled to the presentation layer. So, developers are forced to use a certain programming language and framework to display the information. This makes it difficult to reuse the same content on other platforms, like mobile applications, and here is where headless CMSes can provide many benefits.

A Headless CMS is a Content Management System not tied to a presentation layer. It's built as a content repository that exposes information through an API, which can be accessed from different devices and platforms. A headless CMS is designed to store and expose organized, structured content without concern over where and how it's going to be presented to users.

This decoupling of presentation and storage offers several advantages:

Flexibility: Developers can present content on different devices and platforms using the same single source of truth.
Scalability: Headless CMSes allow your content library to grow without affecting the frontend of your app and vice-versa.
Security: You can expose only the data you want on the frontend and have a completely separate login for web administrators who edit the content.
Speed: As data is consumed through an API, you can dynamically display data on pages without re-rendering the content.

In this article, I will show you how to create a Pet Adoption CRUD application. You will use a headless CMS, Strapi, for the backend, and React with Context Api. The application will display a list of pets with details related to each, and you will be able to add, edit or delete pets from the list.

Prerequisites

Before you can follow content properly, you need to have a basic understanding of the following.

Basic knowledge of JavaScript ES6 syntax and features
Basic knowledge of ReactJS terminology: JSX, State, Asynchronous JavaScript, etc.
Basic understanding of Strapi - get started here.
Basic understanding of Restful APIs.

Application Demo

CRUD stands for Create, Read, Update, and Delete. CRUD applications are typically composed of pages or endpoints. Most applications deployed to the internet are, at least, partially CRUD applications, and many are exclusively CRUD apps.

The image below resembles an application you will build in this article:

It has one Pet entity listed, a “Bird”, with details about that bird. You will be able to execute CRUD operations on that entity, such as:

Create:
- To perform a “Create” operation, i.e. to add a pet to the listing, you click on “Add Pet” button.
- Once you click on Add Pet, you’ll be redirected to a page similar to that below:
- Now, from the Add Pet page, you will have to fill in the pet details in each respective field.
- After that, you simply click ADD PET ENTRY button and that’s it! You have successfully created a pet entry.
Read:
- To “Read” all pet entries i.e to list all pets from the database. To execute this, in a nutshell, you need to loop through all the pet data using JavaScript.
- For example, the display shown under “Create” is just a ****loop in action displaying pet data except in a nice looking way.
Update:
- To Update a pet entry, i.e. to edit an already created pet entry, you have to click an Edit button.
- From the pet list, you will see a green pencil icon, see the circled icon below;
- The pencil icon is nothing more but an icon button, in this context, an “edit pet icon button”.
- Now, once you click that icon button you will be redirected to an Edit Page where you will re-enter pet details with alterations.
Delete:
- To delete a pet entry, you click on the bin icon located at the right side of the pencil icon.
- That bin icon is the icon button for “delete pet entry”, intuitive huh?

Headover to the next phase to first create a Strapi backend for your application.

Building the Backend Data Structure

To create, manage, and store the data related to the pets, we will use Strapi, an open-source headless CMS built on Node.js.

Strapi allows you to create content types for the entities in your app and a dashboard that can be configured depending on your needs. It exposes entities via its Content API, which you'll use to populate the frontend.

If you want to see the generated code for the Strapi backend, you can download it from this GitHub repository.

To start creating the backend of your application, install Strapi and create a new project:

    npx create-strapi-app@latest pet-adoption-backend --quickstart

This will install Strapi, download all the dependencies and create an initial project called pet-adoption-backend.

The --quickstart flag is appended to instruct Strapi to use SQLite for the database. If you don't use this flag, you should install a local database to link to your Strapi project. You can take a look at Strapi's installation documentation for more details and different installation options.

After all the files are downloaded and installed and the project is created, a registration page will be opened at the URL http://localhost:1337/admin/auth/register-admin.

Complete the fields on the page to create an Administrator user.

After this, you will be redirected to your dashboard. From this page, you can manage all the data and configuration of your application.

You will see that there is already a Users collection type. To create a new collection type, go to the Content-Type Builder link on the left menu and click + Create new collection type. Name it pet.

After that, add the fields to the content type, and define the name and the type for each one. For this pet adoption application, include the following fields:

name (Text - Short Text)
animal (Enumeration: Cat - Dog - Bird)
breed (Text - Short Text)
location (Text - Short Text)
age (Number - Integer)
sex (Enumeration: Male-Female)

For each field, you can define different parameters by clicking Advanced Settings. Remember to click Save after defining each entity.

Even though we will create a frontend for our app, you can also add new entries here in your Strapi Dashboard. On the left menu, go to the Pets collection type, and click Create new entry.

New entries are saved as "drafts" by default, so to see the pet you just added, you need to publish it.

Using the Strapi REST API

Strapi gives you a complete REST API out of the box. If you want to make the pet list public for viewing (not recommended for creating, editing, or updating), go to Settings, click Roles, and edit Public. Enable find and findone for the Public role.

Now you can call the [http://localhost:1337/pets](http://localhost:1337/pets) REST endpoint from your application to list all pets, or you can call http://localhost:1337/pets/[petID] to get a specific pet's details.

Using the Strapi GraphQL Plugin

If instead of using the REST API, you want to use a GraphQL endpoint, you can add one. On the left menu, go to Marketplace. A list of plugins will be displayed. Click Download for the GraphQL plugin.

Once the plugin is installed, you can go to http://localhost:1337/graphql to view and test the endpoint.

Building the Frontend

For the Pet List, Add Pet, Update Pet, and Delete Pet features from the application, you will use React with a Context API. A Context API is an easy to integrate state management solution, in-built to React. You do not need any third party tools using the Context API.

As my primary focus is to demonstrate creating a CRUD application using a headless CMS, I won't show you all the styling in this tutorial, but to get the code, you can fork this GitHub repository.

In addition to the Context API, you will also use an HTTP client library, Axios. This library use is to fetch data from the backend with the help of a readily available Strapi REST API.

First, create a new React application:

    npx create-react-app pet-adoption

Once you've created your React app, install the required npm packages:

    npm install @mui/material @emotion/react @emotion/styled @mui/icons-material axios

axios connects to the Strapi REST API.
@mui/material a React frontend UI library

Alright then, now that you have the above packages, move on to the next step to create an Axios base instance.

Setting up Axios Base Instance

There are many ways to set up Axios in a React application. In this tutorial, we are going to use the “Base Instance” approach.

Inside the src folder, create a separate helper http.js file, with code that will be used to interface with the Strapi REST API.

To set up an instance of Axios (Base Instance), you have to define two things:

a default URL (required) - in this context, http://localhost:1337/.
a request header - this is optional, since in this tutorial you do not have any authorization to do.

    import axios from 'axios';

    export default axios.create({
     baseURL: "http://localhost:1337/",
     headers: {
       "Content-type": "application/json",
     },
    });

Leave the instance file for now. You will import it later in our Pet Context for making HTTP requests.

Now, you need to create a store for all the data and functions for your application. To do that, create a file and name it PetContext.js in the directory: src/contexts/PetContext.js.

Since this file is going to make use of the Context API, the steps below will show you how to make use of the Context API to create a Pet Context.

Creating a Pet Context

There are three steps to create and implement a Context API in React:

Step 1: Create the Context

In this step, you are going to create a Context, PetContext.

Typically, in a React app you share data from one component from one component to another via prop drilling. Prop drilling, is the passing of data from one parent component to a child component via props. This is, without a doubt, limiting since you cannot share data to a component outside the parent-child branch.

Now, with the help of the Context API, you can create a Context in your App. This Context will help you share your in-app data globally irregardless of the tree structure in your React app.

In your file, PetContext.js, import createContext from 'react'.

Now, create a Context like in the code below:

    import React, { createContext } from 'react';

    // create Pet Context
    const PetContext = createContext();

Great!

Now, move on to the next step and create a provider for our newly created Pet Context.

Step 2: A Context Provider for the Pet Context

According to React, each Context you create must have a Provider. This provider is the one which takes values from your Context, and pass them to each component connected to your provider.

Create a Context Provider, PetProvider, and pass it an empty object (empty for now at-least) value as shown below:

    import React, { createContext } from 'react';

    // create Pet Context
    const PetContext = createContext({children});
    // create Pet Provider
    export const PetProvider = () => {
      const value = {};
      return(
        <PetContext.Provider value={value}>
          {children}
        </PetContext.Provider>
      )
    };

Lastly, you need consume any data you will pass down via the the provider to components connected to it. Headover to the next step to enable that.

Step 3: Connecting the Pet Context to Your Root App Component

Inorder to receive and use data from your Pet Context, you need to wrap or connect the PetProvider to a React root component, <App/>. This allows all the components in your app to have access to all the data they need from the Pet Context.

Navigate to your index.js file. Import PetProvider from PetContext.js and wrap it around the <App/> component:

    import React from 'react';
    import ReactDOM from 'react-dom/client';
    import './index.css';
    import App from './App';

    // contexts
    import { PetProvider } from './contexts/PetContext';

    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(
      <React.StrictMode>
        <PetProvider>
          <App />
        </PetProvider>
      </React.StrictMode>
    );

Congrats! You have successfully created a Pet Context for your application.

All you have to do now is to add data to your Pet Context. In your PetContext.js file paste the following code:

    import React, { createContext, useContext, useEffect, useState } from 'react';
    import http from '../http';
    const PetContext = createContext();

    export const usePetContext = () => {
        return useContext(PetContext);
    };

    export const PetProvider = ({children}) => {
        const [pets, setPets] = useState("");
        const [nav_value, set_nav_value] = useState("PetList");
        const [petId, setPetId] = useState("");

        // add new pet
        const createNewPet = async (data) => {
            await http.post("/api/pets", data);
        };
        // update a pet entry
        const updatePet = async (petId, data) => {
            await http.put(`/api/pets/${petId}`, data);
        };
        // delete a pet entry
        const deletePet = async (petId) => {
            await http.delete(`/api/pets/${petId}`);
        };
        // change navigation value
        const changeNavValue = (value) => {
            set_nav_value(value);
        };
        // get pet id value
        const getPetId = (id) => {
            setPetId(id);
        };

        useEffect(()=>{
            const readAllPets = async () => {
                const response = await http.get("/api/pets");
                const responseArr = Object.values(response.data.data);
                setPets(responseArr);
            };
            return readAllPets;
        }, []);

        const value = {
            createNewPet,
            pets,
            updatePet,
            deletePet,
            changeNavValue,
            nav_value,
            getPetId,
            petId
        };

        // context provider
        return(
            <PetContext.Provider value={value}>
                {children}
            </PetContext.Provider>
        )
    };

Done?

Awesome, now for the final part create the following components in src/components/:

BottomNav.js - for in-app navigation.
CreatePetEntry.js - a page with a form to add a new pet.
EditPetEntry.js - a page for editing an already existing pet entry.
PetList.js - page with a list of all pet data.
PetListItem.js - a template component for displaying a single pet entry item.
Interface.js - a component for rendering all the components.

Create a component for navigating to different parts of the app and name it BottomNav.js

Code for BottomNav.js component:

    import * as React from 'react';

    // core components
    import BottomNavigation from '@mui/material/BottomNavigation';
    import BottomNavigationAction from '@mui/material/BottomNavigationAction';

    // icons
    import {
        PetsOutlined,
        AddCircleOutline,
    } from '@mui/icons-material';

    // contexts
    import { usePetContext } from '../contexts/PetContext';

    export default function LabelBottomNavigation() {
        const { nav_value, changeNavValue } = usePetContext();
        const handleChange = (event, newValue) => {
            changeNavValue(newValue);
        };
        return (
            <BottomNavigation showLabels value={nav_value} onChange={handleChange}>
                <BottomNavigationAction
                    label="Pets"
                    value="PetList"
                    icon={<PetsOutlined />}
                />
                <BottomNavigationAction
                    label="Add Pet"
                    value="AddPet"
                    icon={<AddCircleOutline />}
                />
            </BottomNavigation>
        );
    };

Great!

Now, create PetListItem.js:

    import React, { useState } from 'react';

    // mui components
    import List from '@mui/material/List';
    import ListItemButton from '@mui/material/ListItemButton';
    import ListItemIcon from '@mui/material/ListItemIcon';
    import ListItemText from '@mui/material/ListItemText';
    import Collapse from '@mui/material/Collapse';

    // mui icons
    import { IconButton, ListItem } from '@mui/material';
    import {
        DeleteOutline,
        Edit,
        ExpandMore,
        ExpandLess,
        LabelImportantOutlined,
    } from '@mui/icons-material';

    // nav
    import { usePetContext } from '../contexts/PetContext';
    export default function PetListItem({ petType, id, petFieldData}) {
        const [open, setOpen] = useState(true);
        const { deletePet, changeNavValue, getPetId } = usePetContext();
        const handleClick = () => {
            setOpen(!open);
        };
        const handleEditButton = () => {
            getPetId(id);
            changeNavValue("EditPet");
        };
        return (
            <List
                sx={{ width: '100%', bgcolor: 'background.paper' }}
            >
            <ListItem
                secondaryAction={
                    <>
                        <IconButton onClick={handleEditButton} edge="end" aria-label="edit">
                            <Edit sx={{ color: 'green' }}/>
                        </IconButton>
                        <IconButton onClick={()=>deletePet(id)} edge="end" aria-label="delete" sx={{ padding: 2}}>
                            <DeleteOutline color="secondary"/>
                        </IconButton>
                    </>
                }
            >
                <ListItemButton disableRipple onClick={handleClick}>
                        <ListItemIcon>
                            <LabelImportantOutlined />
                        </ListItemIcon>
                        <ListItemText
                            primary={petType}
                            secondary="Name, Breed, Location, Age, Sex"
                        />
                        {open ? <ExpandLess /> : <ExpandMore />}
                </ListItemButton>
            </ListItem>
                <Collapse in={open} timeout="auto" unmountOnExit>
                    <List component="div" disablePadding>
                        {
                            petFieldData.map((item, i)=>(
                                <ListItemButton key={i} disableRipple sx={{ pl: 9 }}>
                                    <ListItemIcon>
                                        {item.icon}
                                    </ListItemIcon>
                                    <ListItemText primary={item.attrib} />
                                </ListItemButton>
                            ))
                        }
                    </List>
                </Collapse>
            </List>
        );
    };

Create PetList.js:

    import * as React from 'react';

    // mui components
    import Box from '@mui/material/Box';
    import CssBaseline from '@mui/material/CssBaseline';
    import List from '@mui/material/List';
    import Paper from '@mui/material/Paper';

    // custom components
    import BottomNav from './BottomNav';
    import PetListItem from './PetListItem';

    // data
    import { usePetContext } from '../contexts/PetContext';

    // icons
    import {
        PersonOutline,
        PetsOutlined,
        LocationOn,
        PunchClockOutlined,
        TransgenderOutlined,
    } from '@mui/icons-material';

    export default function PetList() {
        const { pets } = usePetContext();
        return (
            <Box sx={{ pb: 7 }}>
                <CssBaseline />
                <List>
                    {
                        pets && pets.map(
                            ({id, attributes: {name, animal, breed, location, age, sex}}, i)=>(
                            <PetListItem
                                key={i}
                                id={id}
                                petType={animal}
                                petFieldData={[
                                    {icon: <PersonOutline/>, attrib: name},
                                    {icon: <PetsOutlined/>, attrib: breed},
                                    {icon: <LocationOn/>, attrib: location},
                                    {icon: <PunchClockOutlined/>, attrib: age},
                                    {icon: <TransgenderOutlined/>, attrib: sex}
                                ]}
                            />
                        ))
                    }
                </List>
                <Paper sx={{ position: 'fixed', bottom: 0, left: 0, right: 0 }} elevation={3}>
                    <BottomNav/>
                </Paper>
            </Box>
        );
    };

Create EditPetEntry.js:

    import React, { useState, useEffect } from 'react';

    // mui components
    import {
        Typography,
        TextField,
        Box,
        Button,
        Paper
    } from '@mui/material';

    // mui icons
    import { Edit } from '@mui/icons-material';

    // custom components
    import BottomNav from './BottomNav';

    //axios
    import { usePetContext } from '../contexts/PetContext';
    export default function EditPetEntry() {
        // input data
        const [name, setName] = useState("");
        const [animal, setAnimal] = useState("");
        const [breed, setBreed] = useState("");
        const [age, setAge] = useState("");
        const [location, setLocation] = useState("");
        const [sex, setSex] = useState("");
        // edit req
        const { updatePet, petId } = usePetContext();
        const data = JSON.stringify({
            "data": {
                "name": name,
                "animal": animal,
                "breed": breed,
                "age": age,
                "location": location,
                "sex": sex
            }
        });
        const handleEditPet = () => {
            updatePet(petId, data);
        };
        return (
            <Box
                component="form"
                sx={{
                    '& .MuiTextField-root': { m: 1, width: '50ch' },
                    display: 'flex',
                    flexDirection: 'column'
                }}
                noValidate
                autoComplete="off"
            >
                <div>
                    <Typography variant="h3" gutterBottom component="div">
                        Edit Pet entry
                    </Typography>
                    <TextField
                        required
                        id="filled-name"
                        label="Name"
                        variant="outlined"
                        onChange={(e)=>setName(e.target.value)}
                    />
                    <TextField
                        required
                        id="filled-animal"
                        label="Animal"
                        variant="outlined"
                        helperText="Cat, Dog, Bird"
                        onChange={(e)=>setAnimal(e.target.value)}
                    />
                    <TextField
                        required
                        id="filled-breed-input"
                        label="Breed"
                        variant="outlined"
                        onChange={(e)=>setBreed(e.target.value)}
                    />
                    <TextField
                        required
                        id="filled-location-input"
                        label="Location"
                        variant="outlined"
                        onChange={(e)=>setLocation(e.target.value)}
                    />
                    <TextField
                        required
                        id="filled-age"
                        label="Age"
                        type="number"
                        variant="outlined"
                        onChange={(e)=>setAge(e.target.value)}
                    />
                    <TextField
                        required
                        id="sex"
                        label="Sex"
                        helperText="Male, Female"
                        variant="outlined"
                        onChange={(e)=>setSex(e.target.value)}
                    />
                </div>
                <div>
                    <Button variant="outlined" onClick={handleEditPet} startIcon={<Edit />}>
                        Edit Pet Entry
                    </Button>
                </div>
                <Paper sx={{ position: 'fixed', bottom: 0, left: 0, right: 0 }} elevation={3}>
                    <BottomNav/>
                </Paper>
            </Box>
        );
    }

Create CreatePetEntry.js:

    import React, { useState } from 'react';

    // mui components
    import {
        Typography,
        TextField,
        Box,
        Button,
        Paper
    } from '@mui/material';

    // icons components
    import { Add } from '@mui/icons-material';

    // custom components
    import BottomNav from './BottomNav';
    import { usePetContext } from '../contexts/PetContext';
    export default function CreatePetEntry() {
        // input data
        const [name, setName] = useState("");
        const [animal, setAnimal] = useState("");
        const [breed, setBreed] = useState("");
        const [age, setAge] = useState("");
        const [location, setLocation] = useState("");
        const [sex, setSex] = useState("");
        // axios
        const { createNewPet } = usePetContext();
        const data = JSON.stringify({
            "data": {
                "name": name,
                "animal": animal,
                "breed": breed,
                "age": age,
                "location": location,
                "sex": sex
            }
        })
        const handleCreateNewPet = () => {
            createNewPet(data);
        };
        return (
            <Box
                component="form"
                sx={{
                    '& .MuiTextField-root': { m: 1, width: '50ch' },
                    display: 'flex',
                    flexDirection: 'column'
                }}
                noValidate
                autoComplete="off"
            >
                <div>
                    <Typography variant="h3" gutterBottom component="div">
                        Add new Pet entry
                    </Typography>
                    <TextField
                        required
                        id="filled-name"
                        label="Name"
                        variant="filled"
                        onChange={(e)=>setName(e.target.value)}
                    />
                    <TextField
                        required
                        id="filled-animal"
                        label="Animal"
                        variant="filled"
                        helperText="Cat, Dog, Bird"
                        onChange={(e)=>setAnimal(e.target.value)}
                    />
                    <TextField
                        required
                        id="filled-breed-input"
                        label="Breed"
                        variant="filled"
                        onChange={(e)=>setBreed(e.target.value)}
                    />
                    <TextField
                        required
                        id="filled-location-input"
                        label="Location"
                        variant="filled"
                        onChange={(e)=>setLocation(e.target.value)}
                    />
                    <TextField
                        required
                        id="filled-age"
                        label="Age"
                        type="number"
                        variant="filled"
                        onChange={(e)=>setAge(e.target.value)}
                    />
                    <TextField
                        required
                        id="sex"
                        label="Sex"
                        helperText="Male, Female"
                        variant="filled"
                        onChange={(e)=>setSex(e.target.value)}
                    />
                </div>
                <div>
                    <Button onClick={handleCreateNewPet} variant="outlined" startIcon={<Add />}>
                        Add Pet Entry
                    </Button>
                </div>
                <Paper sx={{ position: 'fixed', bottom: 0, left: 0, right: 0 }} elevation={3}>
                    <BottomNav/>
                </Paper>
            </Box>
        );
    }

Create Interface.js:

    import React from 'react';

    // custom component
    import PetList from '../components/PetList';
    import CreatePetEntry from '../components/CreatePetEntry';
    import EditPetEntry from '../components/EditPetEntry';

    // contexts
    import { usePetContext } from '../contexts/PetContext';
    const Interface = () => {
        const { nav_value } = usePetContext();

        switch (nav_value) {
            case "PetList":
                return <PetList/>
            case "AddPet":
                return <CreatePetEntry/>
            case "EditPet":
                return <EditPetEntry/>
            default:
                return <PetList/>
        };
    };
    export default Interface;

Now, in your <App.js/> file import and render the <Interface.js/> component:

    import './App.css';
    import Interface from './main/Interface';

    function App() {
      return (
        <div className="App">
          <Interface/>
        </div>
      );
    }
    export default App;

Now Strapi will be running on port 1337, and the React app will be running on port 3000.

If you visit http://localhost:3000/, you should see the app running.

Conclusion

In this article, you saw how to use Strapi, a headless CMS, to serve as the backend for a typical CRUD application. Then, you used React and Context API to build a frontend with the managed state so that changes can be propagated throughout the application.

Headless CMSes are versatile tools that can be used as part of almost any application's architecture. You can store and administer information to be consumed from different devices, platforms, and services. You can use this pattern to store content for your blog, manage products in an e-commerce platform, or build a pet adoption platform like you've seen today.

To access the code for this article, check this GitHub repository.

How to Connect Strapi to PostgreSQL

Shada — Tue, 17 May 2022 10:24:34 +0000

It is often confusing how to connect a Strapi instance to a Postgres database, but in this article I will demystify it with examples and images.

Goals

In this article, we will learn how to connect Strapi to PostgreSQL. By default, Strapi uses the SQLite for content storage, but Strapi is not only limited to using SQLite as the database. It can be configured to use other databases like MongoDB, MySQL, MariaDB, PostgreSQL, etc.

We will also learn how to:

Create collections on Strapi,
Setup a Postgres database in our machine,
How to add API endpoints manually on Strapi, and
Create a Bank admin app in React to consume the Strapi API endpoints.

An Introduction to Strapi

Strapi is an open-source headless CMS based on Nodejs and used in designing APIS and managing content. Strapi helps us scaffold our backend quickly, build APIs and consume the APIs from the client-side. The client can be mobile, web, desktop, cURL, etc.

The APIs are created from the Strapi UI admin panel. We create collections as single-types; a collection in Strapi maps to the endpoints:

POST /YOUR_COLLECTION_s: Creates new content.
GET /YOUR_COLLECTION_s: Gets all the contents.
GET /YOUR_COLLECTION_s/:ID: Gets a single content based on its ID.
PUT /YOUR_COLLECTION_s/:ID: Edits content.
DELETE /YOUR_COLLECTION_s/:ID: Deletes content.

By default, Strapi gives us RESTful APIs, but also we can create GraphQL APIs in Strapi. We can then use the GraphQL playground in the browser to run the queries and mutations. Setting up Strapi is very easy; run the command below:

     npx create-strapi-app strapi-api
     # OR
     yarn create strapi-app strapi-api

Next, we’re going to install some other dependencies that are required in this project.

     npm install --save @strapi/utils
     # OR
     yarn add @strapi/utils

Then, we run the yarn develop command to start the server at localhost:1337. The API endpoints are consumed from the localhost:1337 URL. Also, we can load the admin UI from the same URL at localhost:1337/admin.

Strapi contains both a server and a database. The server hosts the APIs, and the database is used to store the application's content. Strapi uses the Koajs framework for its server.

To verify this, go to strapi-API/config/ folder. You should see the following:

    |---- config
    |     |- api.js
    |     |- admin.js
    |     |- database.js
    |     |- middleware.js
    |     |- server.js
    |     |- cron-tasks.js
    |     |- plugins.js

This is where Strapi API configurations are kept. The api.js file contains general settings for API calls.

    // path: ./config/api.js
    module.exports = ({ env }) => ({
      responses: {
        privateAttributes: ['_v', 'id', 'created_at'],
      },
      rest: {
        prefix: '/v1',
        defaultLimit: 100,
        maxLimit: 250,
      },
    });

The admin.js file contains an admin panel configuration for your Strapi application.

    // path: ./config/admin.js
    module.exports = ({ env }) => ({
      apiToken: {
        salt: env('API_TOKEN_SALT', 'someRandomLongString'),
      },
      auth: {
        secret: env('ADMIN_JWT_SECRET', 'someSecretKey'),
      },
    });

The cron-tasks.js file is where we can set our cron jobs on Strapi. These jobs are scheduled to run periodically based on the format we input: \[SECOND (optional)\] [MINUTE] \[HOUR\] [DAY OF MONTH] \[MONTH OF YEAR\] [DAY OF WEEK]. To enable cron jobs, set cron.enable to true in the ./config/server.js file.

    // path: ./config/cron-tasks.js
    module.exports = {
      /**
       * Simple example.
       * Every monday at 1am.
       */

      '0 0 1 * * 1': ({ strapi }) => {
        // Add your own logic here (e.g. send a queue of email, create a database backup, etc.).
      },
    };

The server.js file is where we configure the Strapi server. We can set our host, port, and session keys. Strapi, by default, serves at 0.0.0.0 at port 1337. We can change them in this file.

    // path: ./config/server.js
    module.exports = ({ env }) => ({
      host: env('HOST', '0.0.0.0'),
      port: env.int('PORT', 1337),
      app: {
        keys: env.array('APP_KEYS'),
      },
    });

The database.js file is where is the database that will be used to store application content is configured. The database's client, hostname, port, etc., are set here.

    // path: ./config/database.js
    module.exports = ({ env }) => ({
      connection: {
        client: 'sqlite',
        connection: {
          filename: env('DATABASE_FILENAME', '.tmp/data.db'),
        },
        useNullAsDefault: true,
        debug: false,
      },
    });

You see here that these are the default database settings for Strapi. It is using the SQLite database, as we said earlier.

The connection field contains database configuration options.
The settings field contains database settings that are specific to Strapi.
The connection.client field specifies the database client to create the connection.
The connection.connection field is used to configure database connection information.
The connection.connection.filename field defines the path to the database file for sqlite.

In the below section, we will install the PostgreSQL binary.

PostgresDB Setup

We need to set up and install PostgreSQL. If you don't have PostgresSQL installed in your machine, go to PostgresSQL downloads and download the binaries for your machine.

After installation, start the Postgres server. Make sure you remember the Postgres port, username, and password because we will use them in connecting Strapi to the Postgres.Create a database in PostgreSQL, name it bank because we will be building a bank app to demonstrate further how to use PostgreSQL DB with Strapi.

Also, if you want to build the PostgreSQL from the source, download the source code from here and compile it.

Configuring PostgreSQL in Strapi

To configure our Strapi to use our PostgreSQL, we will add some configurations in our strapi-api/config/database.js file.

Open the strapi-api/config/database.js and paste the below code in the file:

    // strapi-api/config/database.js
    module.exports = ({ env }) => ({
      connection: {
        client: 'postgres',
        connection: {
          host: env('DATABASE_HOST', 'localhost'),
          port: env.int('DATABASE_PORT', 5432),
          database: env('DATABASE_NAME', 'bank'),
          user: env('DATABASE_USERNAME', 'postgres'),
          password: env('DATABASE_PASSWORD', '0000'),
          schema: env('DATABASE_SCHEMA', 'public'), // Not required
          ssl: {
            rejectUnauthorized: env.bool('DATABASE_SSL_SELF', false),
          },
        },
        debug: false,
      },
    });

In the connection object, we set the client to postgres. This client is the PostgreSQL database client to create the connection to the DB.
The host is the hostname of the PostgreSQL server we set it to localhost.
The port is set to 5432, and this is the default port of the PostgreSQL server.
The database is set to the bank, and this is the name of the database we created in the PostgreSQL server.
The password is the password of our PostgreSQL server.
The username is the username of our PostgreSQL. It is set to Postgres because it is the username of our PostgreSQL server.
The schema is the database schema, and it is set to the public here. This schema is used to expose databases to the public.

With this, our Strapi is using PostgreSQL to persist our API content. Now, start Strapi.

     yarn develop

Strapi will load localhost:1337/admin on our browser. Now register and click on the LET'S START button, this will take you to the admin panel.

If you get a “cannot find module ‘pg’” error, install it by running yarn add pg or npm install --save pg

Building our Collections

Everything is ready to roll. We have connected our Strapi app to PostgreSQL. Now, we start building our collections. We are building a bank app; this is a bank admin app that bankers will use to manage accounts in Strapi, and the DB persistence will be PostgreSQL. Let's write out the core functions of our bank app.

New accounts can be created in the app.
Transactions can be carried out, i.e., money can be sent from a user to another user.

We will have two models: Account and Transact.

The Account holds the accounts in the bank, and the Transact holds the transactions carried out.

The Account Model

    Account {
      name
      balance
    }

The name field will hold the name of the account holder, and the balance will hold the balance of the account holder in Dollars.

The Transact Model

    Transact {
      sender
      receiver
      amount
    }

The sender field holds the name of the account holder that transfers the money.
The receiver is the beneficiary.
The amount is the amount the sender sends to the receiver.

Let's begin creating the collections in our Strapi admin. We will start with the Account model.

Click on the Create First Content Type button and type in "account" for a collection name.Now we add the fields for the account collection.
Click on the + Add another field button and select Text and type in name, and then click on the + Add another field button to add another field.
Select Number and on the Number format select float (ex. 3.3333333), then type in balance and click on the Finish button.
On the Account page that appears click on the Save button that is on the top-right corner of the page.

We generate the Transact collection:

Click on the + Create new collection type link, a modal will show up, type in transact. Click on the + Add another field button.
Add the fields: sender, receiver, and amount. The fields sender and receiver will be Text fields while amount will be a Number field with float (ex. 3.333333) Number format.
After adding them click on the Finish button and the Save button.

Now we have created our collections.

Business Logic

We need to implement our business logic. This business logic will be an API endpoint to transfer money from a sender to the recipient.

The logic will be this:

deduct the amount from the sender
add the amount to the receiver
add the transaction to transact collection

I want this to be done in the /transfer API, a POST method. A transfer HTTP request will look like this:

    http://localhost:1337/transfer
    Method: POST
    Body:
    {
      sender: nnamdi
      receiver: chidme
      amount:  10
    }

So we see that collections can't handle this. This is a single endpoint. The single-type does not do the job for me. I usually find it hard to create a single API endpoint from the Strapi admin panel, so I go to the project source code to add it.

APIs in a Strapi project are kept in the api folder. So we go to our src/api folder, we will see folders created for our APIs: transact and account.

    |--- src
    |    |--- api
    |    |    |--- account
    |    |    |    |--- content-types
    |    |    |    |    |--- account
    |    |    |    |    |    |- schema.json
    |    |    |    |--- controllers
    |    |    |    |    |- account.js
    |    |    |    |--- routes
    |    |    |    |--- services
    |    |    |--- transact
    ...

The routes/[apiName].js file contains the endpoints contained in an API. Strapi provides two different router file structures (core routers and custom routers). Core routers are the common CRUD operations automatically created by Strapi.

The controllers folder contains files that the user can use to customize the endpoints in an API. The user can apply his logic for an endpoint.

These two things are what we need in other to create our transfer API.
So we create a transfer folder in our api folder:

mkdir src/api/transfer
Next, we create routes and controllers folders inside the transfer folder.

mkdir src/api/transfer/routes src/transfer/controllers
Create a transfer.js file inside the routes folder:

touch src/api/transfer/routes/transfer.js

Inside it, we configure a custom router with a /transfer endpoint. Then, we will make the handler point to an index function that will export from controllers.

      module.exports = {
        routes: [
          {
            method: "POST",
            path: "/transfer",
            handler: "transfer.index",
            config: {
              policies: [],
              middlewares: [],
            },
          },
        ],
      };

Create a transfer.js file in the controllers folder.

touch src/api/transfer/controllers/transfer.js

Here, we will export an index function. This function will be called when the localhost:1337/transfer HTTP request is made. The function will handle that request. This is where we will apply our business logic of sending money from an account to another beneficiary account.

See the code below:

      "use strict";
      const { sanitize } = require("@strapi/utils");
      /**
       * A set of functions called "actions" for `transfer`
       */
      module.exports = {
        index: async (ctx) => {
          const {
            data: { sender, receiver, amount },
          } = ctx.request.body;
          let entity;
          // deduct amount from sender
          // add amount to reciver
          // add the transaction to transact
          const [senderAcc] = await strapi.entityService.findMany(
            "api::account.account",
            {
              filters: { name: { $eq: sender } },
            }
          );
          const [receiverAcc] = await strapi.entityService.findMany(
            "api::account.account",
            {
              filters: { name: { $eq: receiver } },
            }
          );
          senderAcc.balance = parseFloat(senderAcc.balance) - parseFloat(amount);
          receiverAcc.balance = parseFloat(receiverAcc.balance) + parseFloat(amount);
          await strapi.entityService.update("api::account.account", senderAcc.id, {
            data: senderAcc,
          });
          await strapi.entityService.update("api::account.account", receiverAcc.id, {
            data: receiverAcc,
          });
          entity = await strapi.entityService.create("api::transact.transact", {
            data: { sender, receiver, amount },
          });
          const sanitizedEntity = await sanitize.contentAPI.output(entity);
          return sanitizedEntity;
        },
      };

The ctx holds the res and req just like in Expressjs or Koajs. The ctx is an object that contains properties and methods for accessing the incoming message and for responding to the client.

We retrieved the sender, receiver, and amount from data field on the ctx.request.body.
Notice we have a strapi object. Yes, it is a Strapi object that is global in a Strapi project. We use the object to access different properties and methods.

Here we are using it to use the entityService API object, which contains methods to access the database. See the functions in it: create, update, find, findOne, etc. They are used to create data in the database, update the database, retrieve values from the database.

So, we retrieved the sender's account details and also the receiver's account details. We then made the transaction, subtracted the amount from the sender's balance, and added the receiver's balance.

Next, we updated the sender's and receiver's balances in the database with their new values.

Then, we created a new transaction in the transact table, and finally, we returned the result of the new transaction.

The sanitizeOutput function removes all private fields from the model and its relations.
Save the file and this will restart our Strapi server. You won't see the transfer API appear on the admin panel, and it is a standalone API, not a collection type.

Allow Access

Now, we will allow access to all our APIs.

Click on the Settings item on the sidebar menu, then on the Roles item on the second sidebar menu that appears. On the right section, click on the Public item and scroll down.
You will see all the APIs with their handlers. Click on the Select all checkbox in each API and click on the Save button at the top. This will allow public access to all the APIs in our Strapi project:

account
transact
transfer

Seed Data

Now, we seed our data.

Click on Content Manager in the left sidebar and click on the Account in the second left sidebar under Collection Types. Click on the + Create new entry button.
Add the data:

name -> nnamdi
balance -> 2000000
Click on the Save button and the Publish button.
Add another data:

name -> chidume
balance -> 1000000
Click on the Save button and the Publish button.

See our PostgreSQL UI, the contents were persisted on PostgreSQL:

Build the Frontend: Bank Admin

Our frontend will be a bank admin app. We will use Nextjs to build the app. So we scaffold our project.

    yarn create next-app strapi-bank

Our app will have two page routes:

/
/account/[id]

The index / route will display all the accounts on the system.

The /account/[id] route will display a particular account details. This is a dynamic route, the id can hold any value, its dynamic, and it will be the unique id of an account.

We will have components:

Header: This will render the Header.
AccountCard: This component will display a few of the account details in the / route.
AddAccountDialog: This is a dialog that renders the UI we will use to add new accounts to the system.
TransactionDialog: This dialog renders UI where transactions will be made, sending money from one Account to another.
TransactionCard: This component will render the transactions of a user.
Accounts: This is the page component for the / page. It displays all the accounts in the bank.
Account: This is the page component for the /account/[id] page.

Our final app will look like this:

OK, so we start creating the components.

     mkdir components

     mkdir components/TransactionCard
     touch components/TransactionCard/index.js
     touch components/TransactionCard/TransactionCard.module.css

     mkdir components/TransactionDialog
     touch components/TransactionDialog/index.js

     mkdir components/AddAccountDialog
     touch components/AddAccountDialog/index.js

     mkdir components/AccountCard
     touch components/AccountCard/index.js
     touch components/AccountCard/AccountCard.module.css

     mkdir components/Header
     touch components/Header/index.js
     touch components/Header/Header.module.css

     touch styles/AccountView.module.css
     mkdir pages/account
     touch pages/account/[id].js

Header

This will be a simple UI, it will display the text Bank Admin. Paste the below code on components/Header/index.js:

      import { header, headerName } from "./Header.module.css";

        export default function Header() {
          return (
            <section className={header}>
              <div className={headerName}>Bank Admin</div>
            </section>
          );
        }

AccountCard

This component will be rendered by the Accounts component. It will display a mini detail of an account.

Paste the below code in components/AccountCard/index.js:

      import styles from "./AccountCard.module.css";
      import Link from "next/link";
      export default function AccountCard({ account }) {
        const {
          id,
          attributes: { name, balance, createdAt },
        } = account;
        return (
          <Link href={`account/${id}`}>
            <div className={styles.account}>
              <div className={styles.accountdetails}>
                <div className={styles.accountname}>
                  <h3>
                    <span style={{ fontWeight: "100" }}>Account: </span>
                    {name}
                  </h3>
                </div>
                <div className={styles.accountbalance}>
                  <span>
                    <span style={{ fontWeight: "100" }}>Balance($): </span>
                    {balance}
                  </span>
                </div>
                <div className={styles.accountcreated_at}>
                  <span>Created: {createdAt}</span>
                </div>
              </div>
            </div>
          </Link>
        );
      }

It receives the account object in its props argument. Next, we destructure id, name, balance, createdAt from the account.attributes object.
Yes, id and createdAt are fields set by Strapi in each model content.

So, the AccountCard component renders the details.

TransactionCard

This component will render a specific transaction passed to it. It will display the sender, receiver, and the amount sent. The Account page component renders this component to show the transactions done by an account user—the debits and credits.

Paste the code below in components/TransactionCard/index.js:

      import styles from "./TransactionCard.module.css";
      export default function TransactionCard({ transaction }) {
        const {
          attributes: { sender, receiver, amount, createdAt },
        } = transaction;
        return (
          <div className={styles.transactionCard}>
            <div className={styles.transactionCardDetails}>
              <div className={styles.transactionCardName}>
                <h4>
                  <span>Sender: </span>
                  <span style={{ fontWeight: "bold" }}>{sender}</span>
                </h4>
              </div>
              <div className={styles.transactionCardName}>
                <h4>
                  <span>Receiver: </span>
                  <span style={{ fontWeight: "bold" }}>{receiver}</span>
                </h4>
              </div>
              <div className={styles.transactionCardName}>
                <h4>
                  <span>Amount($): </span>
                  <span style={{ fontWeight: "bold" }}>{amount}</span>
                </h4>
              </div>
              <div className={styles.transactionCardName}>
                <h4>
                  <span>Created At: </span>
                  <span style={{ fontWeight: "bold" }}>{createdAt}</span>
                </h4>
              </div>
            </div>
          </div>
        );
      }

It receives a transaction object in its props. The fields sender, receiver, amount, createdAt are destructured from the transaction.attributes object. These are then rendered by the component.

Accounts

This component is rendered when the index page / route is navigated. This component will make an HTTP request to the Strapi backend to retrieve the list of accounts and render them.

Paste the below code on pages/index.js:

      import Head from "next/head";
      import styles from "../styles/Home.module.css";
      import Header from "../components/Header";
      import AccountCard from "../components/AccountCard";
      import { useEffect, useState } from "react";
      import axios from "axios";
      import TransactionDialog from "../components/TransactionDialog";
      import AddAccountDialog from "../components/AddAccountDialog";
      export default function Home() {
        const [accounts, setAccounts] = useState([]);
        const [showTransactModal, setShowTransactModal] = useState(false);
        const [showAddAccountModal, setShowAddAccountModal] = useState(false);
        useEffect(() => {
          async function fetchData() {
            const { data } = await axios.get("http://localhost:1337/api/accounts");
            setAccounts(data?.data);
          }
          fetchData();
        }, []);
        return (
          <div className={styles.container}>
            <Head>
              <title>Bank Admin</title>
              <link rel="icon" href="/favicon.ico" />
            </Head>
            <main className={styles.main}>
              <Header />
              <div className={styles.breadcrumb}>
                <div>
                  <span style={{ margin: "1px" }}>
                    <button onClick={() => setShowTransactModal(true)}>
                      Transact
                    </button>
                  </span>
                  <span style={{ margin: "1px" }}>
                    <button onClick={() => setShowAddAccountModal(true)}>
                      Add Account
                    </button>
                  </span>
                </div>
              </div>
              <div className={styles.accountcontainer}>
                <div className={styles.youraccounts}>
                  <h3>Accounts</h3>
                </div>
                <div>
                  {accounts.map((account, i) => (
                    <AccountCard key={i} account={account} />
                  ))}
                </div>
              </div>
              {showAddAccountModal ? (
                <AddAccountDialog
                  closeModal={() => setShowAddAccountModal((pV) => !pV)}
                />
              ) : null}
              {showTransactModal ? (
                <TransactionDialog
                  closeModal={() => setShowTransactModal((pV) => !pV)}
                />
              ) : null}
            </main>
          </div>
        );
      }

We have three states:

accounts: is a state that holds the accounts retrieved from the /accounts endpoint.
showTransactModal: This is a boolean state that toggles the visibility of the TransactionModal.
showAddAccountModal: this is also a boolean state used to display and remove the AddAccountModal.

The useEffect callback calls the /api/accounts endpoint, and the result is set in the accounts state.

The accounts array is rendered and each account is rendered by the AccountCard component, each account is passed to the AccountCard via its account props.

See that we are conditionally rendering the AddAccountDialog and TransactDialog dialog components. The Transact button toggles the TransactDialog and the Add Account button toggles the AddAccountDialog.

See that we pass a function to each dialog via closeModal props. The function will enable the dialogs to close themselves from their components.

Account

This is a page component that is rendered when the /api/account/[id] route is navigated.
This component displays the account details and its transactions. We can delete an account from there also.

Paste the below code in pages/account/[id].js:

      import styles from "../../styles/AccountView.module.css";
      import { useRouter } from "next/router";
      import TransactionCard from "../../components/TransactionCard";
      import axios from "axios";
      import { useEffect, useState } from "react";
      export default function Account() {
        const router = useRouter();
        const {
          query: { id },
        } = router;
        const [account, setAccount] = useState();
        const [transactions, setTransactions] = useState([]);
        useEffect(() => {
          async function fetchData() {
            const { data: AccountData } = await axios.get(
              "http://localhost:1337/api/accounts/" + id
            );
            var { data: transactsData } = await axios.get(
              "http://localhost:1337/api/transacts"
            );
            transactsData = transactsData?.data?.filter(
              (tD) =>
                tD.attributes?.sender == AccountData?.data?.attributes?.name ||
                tD.attributes?.receiver == AccountData?.data?.attributes?.name
            );
            setAccount(AccountData?.data);
            setTransactions(transactsData);
          }
          fetchData();
        }, [id]);
        async function deleteAccount() {
          if (confirm("Do you really want to delete this account?")) {
            await axios.delete("http://localhost:1337/api/accounts/" + id);
            router.push("/");
          }
        }
        return (
          <div className={styles.accountviewcontainer}>
            <div className={styles.accountviewmain}>
              <div style={{ width: "100%" }}>
                <div className={styles.accountviewname}>
                  <h1>{account?.attributes?.name}</h1>
                </div>
                <div className={styles.accountviewminidet}>
                  <div>
                    <span style={{ marginRight: "4px", color: "rgb(142 142 142)" }}>
                      Balance($):
                    </span>
                    <span style={{ fontWeight: "600" }}>
                      {account?.attributes?.balance}
                    </span>
                  </div>
                  <div style={{ padding: "14px 0" }}>
                    <span>
                      <button onClick={deleteAccount} className="btn-danger">
                        Delete
                      </button>
                    </span>
                  </div>
                </div>
                <div className={styles.accountviewtransactionscont}>
                  <div className={styles.accountviewtransactions}>
                    <h2>Transactions</h2>
                  </div>
                  <div className={styles.accountviewtransactionslist}>
                    {!transactions || transactions?.length <= 0
                      ? "No transactions yet."
                      : transactions?.map((transaction, i) => (
                          <TransactionCard key={i} transaction={transaction} />
                        ))}
                  </div>
                </div>
              </div>
            </div>
          </div>
        );
      }

The component retrieves the id from the URL. We have states account and transactions, that hold the account and its transactions respectively.

The useEffect hook callback calls the /api/accounts/" + id endpoint with the id value to get the account via its id. Next, it calls the /api/transacts endpoint to retrieve the transactions and filter out the transaction made or received by the current account user. The result is set in the transactions state while the account details are set in the account state.

The UI then displays the account details and their transactions.

There is a Delete button that when clicked deletes the current account user. It does this by calling the endpoint /api/accounts/" + id over the DELETE HTTP method with the account's id. This makes Strapi delete the account.

AddAccountDialog

This component is a dialog that we use to add a new account.

Paste the below code in components/AddAccountDialog/index.js:

      import { useState } from "react";
      import axios from "axios";
      export default function AddAccountDialog({ closeModal }) {
        const [disable, setDisable] = useState(false);
        async function addAccount(e) {
          setDisable(true);
          const accountName = e.target.accountName.value;
          const accountBalance = e.target.accountBalance.value;
          // add account
          await axios.post("http://localhost:1337/api/accounts", {
            data: {
              name: accountName,
              balance: parseFloat(accountBalance),
            },
          });
          setDisable(false);
          closeModal();
          location.reload();
        }
        return (
          <div className="modal">
            <div className="modal-backdrop" onClick={closeModal}></div>
            <div className="modal-content">
              <div className="modal-header">
                <h3>Add New Account</h3>
                <span
                  style={{ padding: "10px", cursor: "pointer" }}
                  onClick={closeModal}
                >
                  X
                </span>
              </div>
              <form onSubmit={addAccount}>
                <div className="modal-body content">
                  <div style={{ display: "flex", flexWrap: "wrap" }}>
                    <div className="inputField">
                      <div className="label">
                        <label>Name</label>
                      </div>
                      <div>
                        <input id="accountName" name="accountName" type="text" />
                      </div>
                    </div>
                    <div className="inputField">
                      <div className="label">
                        <label>Balance($):</label>
                      </div>
                      <div>
                        <input
                          id="accountBalance"
                          name="accountBalance"
                          type="text"
                        />
                      </div>
                    </div>
                  </div>
                </div>
                <div className="modal-footer">
                  <button
                    disabled={disable}
                    className="btn-danger"
                    onClick={closeModal}
                  >
                    Cancel
                  </button>
                  <button disabled={disable} className="btn" type="submit">
                    Add Account
                  </button>
                </div>
              </form>
            </div>
          </div>
        );
      }

We have input boxes to type in the account name and its initial balance deposited. The Add Account button when clicked calls the addAccount function. This function retrieves the account name and balance and calls the /api/accounts endpoint via the POST HTTP with the payload: account name and balance. This creates a new account with this payload.

TransactionDialog

This component is where we send money from one account to another.

Paste the below code to components/TransactionDialog/index.js:

      import { useState } from "react";
      import axios from "axios";

      export default function TransactionDialog({ closeModal }) {
        const [disable, setDisable] = useState(false);
        async function transact(e) {
          setDisable(true);
          const sender = e.target.sender.value;
          const receiver = e.target.receiver.value;
          const amount = e.target.amount.value;
          await axios.post("http://localhost:1337/api/transfer", {
            data: { sender, receiver, amount },
          });
          setDisable(false);
          closeModal();
          location.reload();
        }
        return (
          <div className="modal">
            <div className="modal-backdrop" onClick={closeModal}></div>
            <div className="modal-content">
              <div className="modal-header">
                <h3>Transaction</h3>
                <span
                  style={{ padding: "10px", cursor: "pointer" }}
                  onClick={closeModal}
                >
                  X
                </span>
              </div>
              <form onSubmit={transact}>
                <div className="modal-body content">
                  <div style={{ display: "flex", flexWrap: "wrap" }}>
                    <div className="inputField">
                      <div className="label">
                        <label>Sender</label>
                      </div>
                      <div>
                        <input id="sender" type="text" />
                      </div>
                    </div>
                    <div className="inputField">
                      <div className="label">
                        <label>Receiver</label>
                      </div>
                      <div>
                        <input id="receiver" type="text" />
                      </div>
                    </div>
                    <div className="inputField">
                      <div className="label">
                        <label>Amount($)</label>
                      </div>
                      <div>
                        <input id="number" name="amount" type="text" />
                      </div>
                    </div>
                  </div>
                </div>
                <div className="modal-footer">
                  <button
                    disabled={disable}
                    className="btn-danger"
                    onClick={closeModal}
                  >
                    Cancel
                  </button>
                  <button disabled={disable} className="btn" type="submit">
                    Transact
                  </button>
                </div>
              </form>
            </div>
          </div>
        );
      }

The input boxes collect the sender and receiver names and the amount to transfer.

The transact function does the job. It retrieves the sender, receiver, and amount values from the input boxes, and then calls the endpoint /api/transfer via HTTP POST passing in the sender, receiver, and amount as payload. The /api/transfer endpoint will then transfer the amount from the sender to the receiver.

We are done building our components, let's test it.

Test

Add new account

Perform a transaction

Delete an account

Source Code

Conclusion

Strapi is great! It's awesome! You see how we were able to integrate PostgreSQL into our Strapi project seamlessly.

We started by introducing Strapi and the goodies it brings to software development. Later on, we learned about the default DB it uses for data persistence.

Next, we introduced PostgreSQL and showed where to download and install it. We learned how to configure a Strapi project to use PostgreSQL as the database to store its application content.

We went further to build a bank app to demonstrate how to use PostgreSQL in Strapi to the fullest.

Always consider using Strapi in your projects. It is straightforward and highly configurable.

Understanding and using Relations in Strapi

Shada — Mon, 16 May 2022 14:47:28 +0000

In this article, we will look into the relational fields in Strapi to see how we can utilize them to establish relationships in our models.

What is Strapi?

Strapi is an open-source Node.js headless CMS (Content Management System) based on Node.js used to develop APIs(RESTful and GraphQL APIs) and build the APIs content. The APIs in Strapi are built in the form of collections or single types.

A collection in Strapi will create and expose the endpoints on all the HTTP verbs. For example, if we have a blog collection. Strapi will create the following endpoints based on the collection:

blog GET: This will get all the blog entries from the endpoint.
blog POST: This will create a new blog post from the endpoint.
blog/:id GET: This will return the blog post with the id :id.
blog/:id DELETE: This will delete the blog post with the id :id from the endpoint.

Strapi creates all those APIs for us. We can then add content to the collection via the admin panel or the Strapi API.

Internally, Strapi is powered by Koajs, and its default database is SQLite, where it persists the content we add to the collections and single-types. We have learned a bit about Strapi. In the next sections, we will learn about relations in database models and establish the relations in Strapi collections.

Relations in Database Fields and Strapi

The database contains tables, columns, and records. Now, relationships can be defined in the database tables. In Strapi, we can use relations to create links between our Content Types. This relationship is like a pointer or reference. They point to data in a table that depicts what they contain.

There are types of relationships we can establish in Strapi:

One-to-one (1:1)
One-to-Many
Many-to-Many
One-Way
Many-way
Polymorphic

One-to-one (1:1)

In this one-to-one relationship, a column in a table points to only one column in another table.

For example, in a Student table, a studentId column can point to a StudentInfo table. A column in the StudentInfo table, studentId points back to the Student table. So here, the Student table is associated with one and only one record in the StudentInfo table. We can fetch a student's info from the Student table, and we can fetch a student from the StudentInfo table. That's a one-to-one relationship.

One-to-Many

This relation involves a table pointing to several or many tables. A column in table A can point to several tables(B, C, D), these tables in turn point to table A. Also, each table (A, B, C, D) can hold one or more records of the column in table A.

For example, let's say we have a Company table. This table holds the list of all the companies in a system. We can create an Employee table to hold the name of an employee. Now, we can add a companyId column to the Employee table, and this companyId will point to the Company table.

Now a Company table can point to many employee records in the Employee table. Also, each record in the Employee table points back to a record in the Company table. The relation here is one-to-many.

Many-to-Many

This relationship involves a column in a table pointing to many records in another table and a column in another table pointing to many records in the first table. For example, many doctors can be associated with many hospitals.

One-Way

This relationship involves a column pointing or linking to another column in a table. The thing here is that the other column does not point back to the "pointing" column. One-way relation is similar to One-to-One relation but differs because the column being "pointed" does not link back to the pointing column.

For example, in a User table, A detailsId column in the User table can point to a Details table. This means that the details of a user are in the detailsId column in the User table and the details are stored in the Details table.

So we see that the User table points to only one table, which is the Details table. The relationship is one-way. There is no column in the Details table that points back to the User table.

Many-way

This relation involves a column in a table pointing to many records in another table. The records being pointed to does not point back or link back to the record.

For example, a User table has a column carId that points to a Car table. The carId can point to many records in the Car table but the Car record does not point back to the User table, this relationship is a many-way relationship.

Polymorphic

This relationship involves a column in a table that can link to different columns in other tables. In a polymorphic relationship, a model/table can be associated with different models/tables.
In other relationships we have seen, it is mainly between a table and another table, not more than three tables are involved in the relationship. But in a polymorphic relationship, multiple tables are involved.

For example, a Tire table holds can be linked and have links to a Toyota table, Mercedes table, etc. So a Toyota can relate to the same Tire as a Mercedes.
We have seen all the relations we have. The below sections will explain and show how we can set the relations from both the Strapi admin UI and a Strapi project.

Where are relations set in Strapi?

Relationship links can be set in the Admin panel and manually from the generated Strapi project.

Via Strapi Admin Panel

Relations can be set in Strapi's Collection types, Single types, and Components. The relation is set when adding fields to our Collection, Single collection, or Component type. The relation field is selected:

Another UI is displayed in the modal:

This is where we set the relations between the current model we are creating and an existing model.

We have two big boxes in the above picture, the left box is the current model we are creating, and the right box is the model the current model will be having relations with. We can click on the dropdown icon to select the model we want to link relations within the right box.

The smaller boxes with icons are the relations we can establish between the two models in the bigger boxes.

Let's look at the smaller boxes starting from the left.

The first box represents the has one relation.

It establishes a one-way relation between content types in Strapi.

The second box is has one and belongs to one.

It links two content types in a one-to-one way relationship.

The third box is belongs to many.

It links two content types in a one-to-many relation. The content type in the left-bigger box will have a field that links to many records in the content type that is in the right-bigger box. The field in the content type in the right-bigger box will have a field that links to a single record in the left-content type.

The fourth box is has many.

This one links two content types in a many-to-one relation. Here, the content type at the left-bigger box has a field that links to many records to the content type at the right-bigger box. It is the reverse of the belongs to many boxes.

The fifth box is has and belongs to many.

This box links two content types in a many-to-many relationship. Both content types in the bigger boxes will have a field that links many records to each other.

The sixth box is has many.

It links two content types in a many-way relationship. The field on the left content type links to many records in the right content type. The right content type does not link back to the left content type.

2. Via Strapi Project

Let's see how we set relations in our content types from our Strapi project. The content types in a Strapi project are stored in the ./src/api/ folder in our Strapi project. The relations are set in the ./src/api/[NAME]/content-types/[NAME]/schema.json file.

Fields are set inside the attributes section. To set a relation field we use some properties like model, collection, etc. Let's see how we set the relations for all the types of relations in Strapi.

One-to-One (1:1)

To set a one-to-one relation between two content types, we’ll create a new property in the attributes property. Let's say we want to set a one-to-one between a Student model and a Student-info model, we will open the ./src/api/student/content-types/student/schema.json file and add the code:

    {
      "kind": "collectionType",
      "collectionName": "students",
      "info": {
        "singularName": "student",
        "pluralName": "students",
        "displayName": "Student",
        "description": ""
      },
      "options": {
        "draftAndPublish": true
      },
      "pluginOptions": {},

      // The fields are configured here
      "attributes": {
        "name": {
          "type": "string"
        },

        "student_info": { //field name
          "type": "relation", // field type
          "relation": "oneToOne", // relation type
          "target": "api::student-info.student-info", // the target of the relation
          "inversedBy": "student" // more info here - https://docs.strapi.io/developer-docs/latest/development/backend-customization/models.html#relations
        }
      }
    }

The relation field is student_info. The model refers to the content type in Strapi the field is pointing to. It is set to student_info and so this property in the Student content type points to the student_info content type.

We set the type as relation and the relation as oneToOne. All these state that the Student model has and belongs to one StudentInfo.

Let's see inside ./src/api/student-info/content-types/student-info/schema.json file

    {
      "kind": "collectionType",
      "collectionName": "student_infos",
      "info": {
        "singularName": "student-info",
        "pluralName": "student-infos",
        "displayName": "studentInfo"
      },
      "options": {
        "draftAndPublish": true
      },
      "pluginOptions": {},
      "attributes": {
        "bio": {
          "type": "text"
        },
        "student": {
          "type": "relation",
          "relation": "oneToOne",
          "target": "api::student.student",
          "inversedBy": "student_info"
        }
      }
    }

Here, we have a student property which points to the student collection type. The relation set here is also oneToOne

These two JSON configs of both Student and StudentInfo models establish a one-to-one relationship between them as you can see in the interface below. This is similar for all other relations.

One-to-Many

Let's say we have two content types, Employee and Company. The Company has many Employee records, and the Employee record points back to a Company record.
To establish this in the content types, we will go to their /schema.json files in our project and set relation fields.

For the Company model, we want an employees relation to point to many Employees. So we will do the below in the ./src/api/company/content-types/company/schema.json file.

    {
    ...  
    "attributes": {
        "name": {
          "type": "string"
        },
        "employees": {
          "type": "relation",
          "relation": "oneToMany",
          "target": "api::employee.employee",
          "mappedBy": "company"
        }
      }
    }

Also, in ./src/api/employee/content-types/employee/schema.json file:

    {
    ...  
      "attributes": {
        "name": {
          "type": "string"
        },
        "company": {
          "type": "relation",
          "relation": "manyToOne",
          "target": "api::company.company",
          "inversedBy": "employees"
        }
      }
    }

This sets a one-to-many relationship in the Company model.

Many-to-Many

In setting a many-to-many relation from our Strapi project, we will set the relation field of both content types.
For example, doctors can work in many hospitals and many hospitals can have many doctors. In this case, our Doctor model in ./src/api/doctor/content-types/doctor/schema.json will be this:

    {
      ...
      "attributes": {
        "name": {
          "type": "string"
        },
        "hospitals": {
          "type": "relation",
          "relation": "manyToMany",
          "target": "api::hospital.hospital",
          "inversedBy": "doctors"
        }
      }
    }

The hospital relation field points to many hospitals.

The Hospital model will be this:
./src/api/hospital/content-types/hospital/schema.json:

    {
      ...
      "attributes": {
        "name": {
          "type": "string"
        },
        "doctors": {
          "type": "relation",
          "relation": "manyToMany",
          "target": "api::doctor.doctor",
          "inversedBy": "hospitals"
        }
      }
    }

This effectively sets a many-to-many relation between the Doctor and Hospital models.

One-Way

To set this relation from our Strapi project between two models, we will define a relation field in one model's /schema.json file only. The other model will have no relation connecting to other model define in its /schema.json file.

For example, we have two models User and Detail and they have one-way relation. To set this up. We set the below in the User's model file user/models/user.settings.json file:

    {
      ...  
      "attributes": {
        "name": {
          "type": "string"
        },
        "details": {
          "type": "relation",
          "relation": "oneToOne", 
          "target": "api::detail.detail"
        }
      }
    }

There will be no relation setting in the Detail schema file that will point to the User model. So in this way, we have set a one-way relation between the User and Detail models in Strapi.

Many-Way

This is the same as the one-way relation but this one involves one model pointing to many records in another model, but this another model does not point back.
To set this manually in Strapi, we will set a relation field with the collection property in one model but no relation definition in the other model.

For example, a User has many Cars. The relation is many-way. A user can own many cars. The setting will be this for the User:
user/models/user.settings.json:

    {
      ...  
      "attributes": {
        "name": {
          "type": "string"
        },
        "cars": {
          "type": "relation",
          "relation": "oneToMany",
          "target": "api::car.car"
        }
      }
    }

The car relation has a collection property that is set to car. This setting tells Strapi that the cars field in the User model points to many Car records.
We will not make a relation in the Car model that will point back to the User model because this is a many-way relation.

We have learned all the relations in Strapi and also learned how to set them up both via the Strapi admin UI panel and from a Strapi project. Now, we show how to use some of the relations in Strapi to build a real-life app.

Setting up Strapi Project

We will create a QnA app just like Quora, and users can ask questions, answer questions, and comment on answers. We will build this app so as to demonstrate how we can use Strapi relations to link our models.

This project will be in two parts: the backend and the frontend. Of course, the backend will be built using Strapi, and the frontend will be built using Next.js.

We will create a central folder that will hold both backend and frontend projects:

    mkdir relations

We move into the folder:

    cd relations

Create the Strapi project:

    yarn create strapi-app qa-app --quickstart

The above command will create a Strapi project in qa-app folder inside the relations folder.

To start the project, run:

    yarn develop

Strapi will serve the project on localhost:1337. It will launch the Strapi admin UI panel on localhost:1337/admin.

Fill in your details and click on the LET'S START button. We will begin to build our collections but first, let's draw our models.

Models

We will have three models for our QnA app. We will have Question, Answer and Comment.
Our Question model will be this:

    Question {
        qText
        user
    }

qText: This will hold the question.
user: This holds the name of the user.

The Answer model will be this:

    Answer {
        aText
        question
        user
    }

aText: This holds the answer text.
question: This holds the reference to the question.
user: The user that answered.

The Comment model will look like this:

    Comment {
        cText
        answer
        user
    }

cText: This will hold the comment text on the answer.
answer: This is the reference to the answer.
user: The user that commented.

We have seen how our collection will look like, now let's build our collections. These models have relationships that connect them. Let's see them below.

One-to-Many

The Question model and the Answer model have a one-to-many relationship. A Question will have many Answers. Now, we will build a Question collection in Strapi, and also we will create the Answer collection and there we will establish the relation between them. Now, on the http://localhost:1337/admin/ page click on the Create First Content Type button, a modal will appear.
We will create the Question collection.

Type question in the Display name field.
Click on the text field.
Type qText in the Name field.
Select Long Text in the below radio button.

Click on + Add another field.
Select text.
Type in user.

Click on Finish.
Next, click on the Save button on the top-right of the page.

Next, we will create the Answer collection

Click on the + Create new collection type link, a modal will show up, type in answer. Click on the + Add another field button.
Select text and type in user.

Select relation field.
On the right box, press on the dropdown element and select Question.
Click on the fourth small box, counting from left. The box establishes a one-to-many relationship between the Question collection and the Answer collection.

Click on the Finish button.
Next, click on the Save button on the top-right of the page.

One-to-One

The Comment model and the Answer model have a one-to-one relationship. A comment has one answer.
We will create the Comment collection.

Click on the + Create new collection type link, a modal will show up, type in comment.

Click on the + Add another field button.
Select text field.
Type in cText and click on the + Add another field button.

Select relation field.
On the big box on the right, click on the dropdown element and select Answer.
Select the first small box, counting from the left. This box establishes the one-to-one relationship between the Comment and the Answer but not from Answer to comment. So, the comments field will not appear on the Answer response.

Click on the Finish button.
Next, click on the Save button on the top-right of the page.

We are done building our collections and establishing their relationships. Now, let's build the front end.

Before we start building the frontend, we have set the permissions for a Public unauthenticated user so that our Strapi API can return data from routes without authentication.

NOTE: You’d typically need authentication in your application, especially when dealing with create, delete and update endpoints

Building the QnA App

Our app will have two pages: the index and the question view page.

/ index: This page will display all questions in the app.
/questions/:id: This page is a dynamic page. It will display the details of a specific question. The details displayed are the answers to the question and the comments are replies to the answers.

Our app will look like this:

Viewing all questions

Adding new question

Answering a question

Commenting on an answer

Deleting a question

Viewing all answers and comments

We will start by scaffolding a Nextjs app. We will scaffold the Nextjs app inside the relations folder, so run the below command:

    yarn create next-app qa-front

Now, we move into the directory:

    cd qa-front

We will need the following dependencies:

axios: We will need this for making HTTP calls to our Strapi collection endpoints.
quill: An editor we will use for answering questions in our app.

We will install axios:

    yarn add axios

We install and use quill via CDN. Open the _app.js file and add the following code to it:

    import "../styles/globals.css";
    import Head from "next/head";

    function MyApp({ Component, pageProps }) {
      return (
        <>
          <Head>
            <script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>

            <link
              href="https://cdn.quilljs.com/1.3.6/quill.snow.css"
              rel="stylesheet"
            />
            <link
              href="https://cdn.quilljs.com/1.3.6/quill.bubble.css"
              rel="stylesheet"
            />
          </Head>
          <Component {...pageProps} />
        </>
      );
    }

    export default MyApp;

We added the CDN scripts and style files of the quill editor to the Head tags of the MyApp component.

Creating Pages

First, we will create a Header component, this component will render our header so it appears in our app.

Run the below command to generate the Header files:

    mkdir components components/Header
    touch components/Header/index.js components/Header/Header.module.css

Now, we open the Header/index.js and paste the below code to it:

    import { header, headerName } from "./Header.module.css";

    export default function Header() {
      return (
        <section className={header}>
          <div className={headerName}>Q/A App</div>
        </section>
      );
    }

This component just renders the text Q/A App in the header section of our app. Now, to make the component appear application-wide in our app we will go the the MyApp component in _app.js file and render the component.

    import "../styles/globals.css";
    import Header from "../components/Header";
    import Head from "next/head";

    function MyApp({ Component, pageProps }) {
      return (
        <>
          <Head>...</Head>
          <Header />
          <Component {...pageProps} />
        </>
      );
    }

    export default MyApp;

With this, our Header component will be rendered on all pages in our application.
Let's create our page components.

The index.js page will be loaded when the index route / is navigated to.
So, open the index.js file and paste the below code to it:

    import Head from "next/head";
    import styles from "../styles/Home.module.css";
    import QuestionCard from "../components/QuestionCard";
    import { useEffect, useState } from "react";
    import axios from "axios";
    import AddQuestionDialog from "../components/AddQuestionDialog";

    export const getServerSideProps = async () => {
      const { data } = await axios.get("http://localhost:1337/api/questions?populate=*");
      console.log(data);
      return {
        props: {
          the_questions: data.data
        }
      }
    }
    export default function Home({ the_questions }) {
      const [showAddQuestionModal, setShowAddQuestionModal] = useState(false);
      return (
        <div className={styles.container}>
          <Head>
            <title>Q/A App</title>
            <link rel="icon" href="/favicon.ico" />
          </Head>
          <main className={styles.main}>
            <div className={styles.breadcrumb}>
              <div>
                <span style={{ margin: "1px" }}>
                  <button
                    style={{
                      backgroundColor: "rgba(185, 43, 39, 1)",
                      border: "1px solid rgba(101, 20, 18, 1)",
                    }}
                    onClick={() => setShowAddQuestionModal(true)}
                  >
                    Add Question
                  </button>
                </span>
              </div>
            </div>
            <div className={styles.questioncontainerr}>
              <div>
                {the_questions?.map((question) => (
                  <QuestionCard key={question.id} question={question} />
                ))}
              </div>
            </div>
            {showAddQuestionModal ? (
              <AddQuestionDialog
                closeModal={() => setShowAddQuestionModal((pV) => !pV)}
              />
            ) : null}
          </main>
        </div>
      );
    }

Here, we’re using getServerSideProps to fetch our questions with axios from the [http://localhost:1337/api/questions?populate=*](http://localhost:1337/questions) endpoint. We return the questions as the_questions from the getServerSideProps in the props object, which we can access in Home component.

Note: The `populate=` query parameter allows us to fetch all fields relation, media and components fields

We have the showAddQuestionModal state. The showAddQuestionModal state is used to toggle the display of the AddQuestionsModal on and off.

In the UI, we have an Add Question button that will set the showAddQuestionModal state to true when clicked. This will make the AddQuestionDialog modal show up.

The questions in from the_questions prop are rendered. Each question in the the_questions array is rendered by a QuestionCard component. Now, we will create two components: QuestionCard and AddQuestionDialog.

QuestionCard

This presentational component will accept a question object and render a minimal detail of it. Let's create the files and folder.

    mkdir components/QuestionCard
    touch components/QuestionCard/index.js
    touch components/QuestionCard/QuestionCard.module.css

Open the index.js and paste the below code:

    import styles from "./QuestionCard.module.css";
    import Link from "next/link";
    export default function QuestionCard({ question }) {
      const { id } = question
      const { qText, user, answers } = question.attributes;
      return (
        <div className={styles.question}>
          <div className={styles.questiondetails}>
            <div
              style={{
                display: "flex",
                alignItems: "center",
              }}
            >
              <span
                style={{
                  display: "block",
                  width: "35px",
                  height: "35px",
                  backgroundColor: "grey",
                  borderRadius: "50%",
                }}
              ></span>
              <span style={{ paddingLeft: "4px" }}>{user}</span>
            </div>
            <Link href={`questions/${id}`}>
              <div className={styles.questionbalance} style={{ cursor: "pointer" }}>
                <h3>{qText}</h3>
              </div>
            </Link>
            <div
              style={{ display: "flex", alignItems: "center", color: "grey" }}
              title="Answers"
            >
              <MsgIcon />
              <span style={{ paddingLeft: "6px" }}>{answers.length}</span>
            </div>
          </div>
        </div>
      );
    }
    export function MsgIcon() {
      return (
        <svg width="24px" height="24px" viewBox="0 0 24 24">
          <g
            id="comment"
            className="icon_svg-stroke icon_svg-fill"
            stroke="#666"
            strokeWidth="1.5"
            fill="none"
            fillRule="evenodd"
          >
            <path d="M12.0711496,18.8605911 C16.1739904,18.8605911 19.5,15.7577921 19.5,11.9302955 C19.5,8.102799 16.1739904,5 12.0711496,5 C7.96830883,5 4.64229922,8.102799 4.64229922,11.9302955 C4.64229922,13.221057 5.02055525,14.429401 5.67929998,15.4641215 C5.99817082,15.9649865 4.1279592,18.5219189 4.56718515,18.9310749 C5.02745574,19.3598348 7.80252458,17.6358115 8.37002246,17.9406001 C9.45969688,18.5258363 10.7235179,18.8605911 12.0711496,18.8605911 Z"></path>
          </g>
        </svg>
      );
    }

We destructured question from the prop args.
Next, we destructured the id, qText, user, and answers from the question object. This question object contains the question details. The component then renders these details.

AddQuestionDialog

This component is a modal. New questions are created and added to this system from this component. Let's create the files:

    mkdir components/AddQuestionDialog
    touch components/AddQuestionDialog/index.js

Open the index.js and paste the below code:

    import { useState } from "react";
    import axios from "axios";
    export default function AddQuestionDialog({ closeModal }) {
      const [disable, setDisable] = useState(false);
      async function addQuestion() {
        setDisable(true);
        const qText = window.question.value;
        const user = window.user.value;
        // add question
        await axios.post("http://localhost:1337/api/questions", {
          data: {
            qText,
            user,
          }
        });
        setDisable(false);
        closeModal();
        location.reload();
      }
      return (
        <div className="modal">
          <div className="modal-backdrop" onClick={closeModal}></div>
          <div className="modal-content">
            <div className="modal-header">
              <h3>Add New Question</h3>
              <span
                style={{ padding: "10px", cursor: "pointer" }}
                onClick={closeModal}
              >
                X
              </span>
            </div>
            <div className="modal-body content">
              <div style={{ display: "flex", flexDirection: "column" }}>
                <div className="inputField">
                  <div className="label">
                    <label>User</label>
                  </div>
                  <div>
                    <input id="user" type="text" />
                  </div>
                </div>
                <div className="inputField">
                  <div className="label">
                    <label>Question:</label>
                  </div>
                  <div>
                    <input
                      id="question"
                      type="text"
                      placeholder="Start your question with 'What', 'How', 'Why', etc"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div className="modal-footer">
              <button
                disabled={disable}
                className="btn-danger"
                onClick={closeModal}
              >
                Cancel
              </button>
              <button disabled={disable} className="btn" onClick={addQuestion}>
                Add Question
              </button>
            </div>
          </div>
        </div>
      );
    }

We have a state here, disable. This state is used to toggle the disable state of the button in the UI. Looking at the UI, we have two inputs. The first input holds the name of the user that will ask the question and the second input is where the question will be typed.

The Add Question will call the addQuestion function. This addQuestion function will get the values from the user and question inputs, it will use it to call the http://localhost:1337/questions endpoint.

We passed the question and user texts as payload to the HTTP POST call, this creates the question in the Strapi backend.

Create Question View

This page will display a specified question along with its answers and comments to the answers.
Let's create the files:

    mkdir pages/questions
    touch pages/questions/[id].js

Open [id].js and paste the below code:

    import styles from "../../styles/QuestionView.module.css";
    import { useRouter } from "next/router";
    import axios from "axios";
    import { useEffect, useState, useRef } from "react";
    import { MsgIcon } from "../../components/QuestionCard";

    export const getServerSideProps = async ({ params }) => {
      const { id } = params
      const question = await axios.get(`http://localhost:1337/api/questions/${id}?populate=*`);
      const { data: { attributes: { answers } } } = question.data
      const comments = await axios.get(`http://localhost:1337/api/comments?populate=*`);
      console.log(question);
      console.log(answers);
      return {
        props: {
          id,
          question: question.data.data,
          answers: answers.data,
          comments: comments.data.data
        }
      }
    }
    export default function Question({ id, question, answers, comments }) {
      const router = useRouter();
      const [showAnswerQuestionSection, setAnswerQuestionSection] = useState(false);
      async function deleteQuestion() {
        if (confirm("Do you really want to delete this question?")) {
          await axios.delete(`http://localhost:1337/api/questions/${id}`);
          router.push("/");
        }
      }
      return (
        <div className={styles.questionviewcontainer}>
          <div className={styles.questionviewmain}>
            <div style={{ width: "100%" }}>
              <div className={styles.questionviewname}>
                <h1>{question?.attributes.qText}</h1>
              </div>
              <div className={styles.questionviewminidet}>
                <div style={{ display: "flex" }}>
                  <span>
                    <button
                      onClick={() => setAnswerQuestionSection((pV) => !pV)}
                      className="btn-danger"
                      style={{
                        backgroundColor: "unset",
                        color: "black",
                        border: "unset",
                        display: "flex",
                        alignItems: "center",
                        paddingLeft: "0",
                      }}
                    >
                      <AnswerIcon />
                      <span style={{ paddingLeft: "6px" }}>Answer</span>
                    </button>
                  </span>
                  <span>
                    <button
                      onClick={deleteQuestion}
                      className="btn-danger"
                      style={{
                        backgroundColor: "unset",
                        color: "black",
                        border: "unset",
                        display: "flex",
                        alignItems: "center",
                      }}
                    >
                      <DeleteIcon />
                      <span style={{ paddingLeft: "6px" }}>Delete</span>
                    </button>
                  </span>
                </div>
              </div>
              <div>
                {showAnswerQuestionSection ? (
                  <AnswerQuestionSection question={question} />
                ) : null}
              </div>
              <div className={styles.questionviewtransactionscont}>
                <div className={styles.questionviewtransactions}>
                  <h2>{answers?.length} Answers</h2>
                </div>
                <div
                  className={styles.questionviewtransactionslist}
                  style={{ padding: "unset" }}
                >
                  {!answers || answers?.length <= 0
                    ? "No Answers yet."
                    : answers?.map((answer, i) => <Answer key={answer.id} answer={answer} comments={comments} />)}
                </div>
              </div>
            </div>
          </div>
        </div>
      );
    }

This component gets the id of the question from the router object. This id is used in the useEffect hook callback to call the endpoint http://localhost:1337/api/questions/${id}.
This will return the question with its details.

The UI displays the question details and the answers to the question. The comments of the answers are also all displayed.

The deleteQuestion function deletes the question from our Strapi backend. It calls the http://localhost:1337/api/questions/${id} endpoint with the id of the question, the HTTP verb is DELETE which will delete the question from the backend.

The AnswerQuestionSection component is where the answer to the question is typed. This component is toggled by the showAnswerQuestionSection state, this state is manipulated by the MsgIcon.

Let's see the code for this AnswerQuestionSection component:

    function AnswerQuestionSection({ question }) {
      var options = {
        placeholder: "Write your answer",
        readOnly: false,
        theme: "snow",
      };
      const editorRef = useRef();
      const userRef = useRef();
      const [disable, setDisable] = useState(false);
      const [q, setQuill] = useState();
      useEffect(() => {
        if (q) return;
        const _q = new Quill(editorRef.current, options);
        setQuill(_q);
      }, [q]);
      function answerQuestion() {
        setDisable(true);
        axios.post("http://localhost:1337/api/answers", {
          data: {
            aText: q.getText(),
            user: userRef.current.value,
            question: question?.id,
          }
        });
        setDisable(false);
        window.location.reload();
      }
      return (
        <div
          style={{
            marginTop: "16px",
            backgroundColor: "white",
          }}
        >
          <>
            <div>
              <input type="text" placeholder="Enter user here..." ref={userRef} />
            </div>
            <div
              name="editor"
              ref={editorRef}
              style={{ backgroundColor: "white" }}
            ></div>
            <div
              style={{
                display: "flex",
                justifyContent: "flex-end",
                padding: "14px",
              }}
            >
              <button
                style={{ borderRadius: "14px" }}
                onClick={answerQuestion}
                disabled={disable}
              >
                Post
              </button>
            </div>
          </>
        </div>
      );
    }

This component initializes a Quill editor in the div[name="editor"]. We have an input that collects the name of the user answering the question. The Post button will call the answerQuestion function when clicked. This answerQuestion function will call the endpoint http://localhost:1337/answers. The answer text, user name, and the question id are sent to the endpoint call as payload. The page is reloaded to reflect the new additions.

Let's code the Answer component:

    function Answer({ answer, comments }) {
      const { id } = answer
      const { aText, user } = answer.attributes;
      console.log({ comments });
      const [_comments, setComments] = useState(comments ? comments.filter(comment => comment.attributes.answer.data?.id == id) : []);
      console.log(id, comments);
      const [showCommentInput, setShowCommentInput] = useState(false);
      const commentRef = useRef();
      const userRef = useRef();
      async function addComment() {
        const resultData = await axios.post("http://localhost:1337/api/comments", {
          data: {
            cText: commentRef.current.value,
            user: userRef.current.value,
            answer: id,
          }
        });
        setShowCommentInput(false);
        window.location.reload();
      }
      return (
        <div
          className={styles.question}
          style={{
            borderBottom: "1px solid rgba(234, 238, 243, 1)",
            padding: "14px",
          }}
        >
          <div className={styles.questiondetails}>
            <div
              style={{
                display: "flex",
                alignItems: "center",
              }}
            >
              <span
                style={{
                  display: "block",
                  width: "35px",
                  height: "35px",
                  backgroundColor: "grey",
                  borderRadius: "50%",
                }}
              ></span>
              <span style={{ paddingLeft: "4px" }}>{user}</span>
            </div>
            <div
              className={styles.questionbalance}
              style={{
                cursor: "pointer",
                paddingTop: "24px",
                paddingBottom: "24px",
              }}
            >
              <span>{aText}</span>
            </div>
            <div
              style={{
                display: "flex",
                alignItems: "center",
                color: "grey",
                cursor: "pointer",
              }}
              onClick={() => setShowCommentInput((pV) => !pV)}
            >
              <MsgIcon />
              <span style={{ paddingLeft: "6px" }}>{_comments?.length}</span>
            </div>
            <div>
              {showCommentInput ? (
                <div
                  style={{
                    display: "flex",
                    flexDirection: "row",
                    alignItems: "center",
                    marginTop: "9px",
                  }}
                >
                  <input
                    type="text"
                    placeholder="Enter user..."
                    style={{
                      borderRadius: "9px",
                      width: "110px",
                      marginRight: "3px",
                    }}
                    ref={userRef}
                  />
                  <input
                    type="text"
                    placeholder="Add comment..."
                    style={{ borderRadius: "9px" }}
                    ref={commentRef}
                  />
                  <button
                    style={{
                      borderRadius: "19px",
                      fontSize: "14px",
                      fontWeight: "bolder",
                      boxSizing: "content-box",
                    }}
                    onClick={addComment}
                  >
                    <div style={{ display: "flex", whiteSpace: "nowrap" }}>
                      Add Comment
                    </div>
                  </button>
                </div>
              ) : null}
            </div>
            <div
              style={{
                paddingTop: "14px",
                marginLeft: "23px",
                marginBottom: "14px",
              }}
            >
              {_comments?.map((comment) => (
                <Comment key={comment.id} comment={comment} />
              ))}
            </div>
          </div>
        </div>
      );
    }

This component is passed an answer object in its props object args. It uses the id from the answer object to filter all the fetched comments connected to the answer.

We have a showCommentInput state to toggles a UI section. This section is where users can comment on an answer. This section opens when the MsgIcon beneath each answer is clicked. The comment section has two inputs that hold the commenter's name and the comment text, then the Add Comment button adds the comment to the answer.

This Add Comment button calls the addComment function. This addFunction function makes an HTTP POST call to the http://localhost:1337/api/comments/ endpoint, the comment text, user name, and the answer id is sent also as the POST payload. This activity creates a new comment in our Comment collection.

The comments in the answer are rendered in this component, each comment is handled by the Comment component. Let's code the component:

    function Comment({ comment }) {
      const { user, cText } = comment.attributes;
      return (
        <div
          className={styles.question}
          style={{
            backgroundColor: "rgba(234, 238, 243, 1)",
            padding: "14px",
            marginBottom: "4px",
          }}
        >
          <div className={styles.questiondetails}>
            <div
              style={{
                display: "flex",
                alignItems: "center",
              }}
            >
              <span
                style={{
                  display: "block",
                  width: "35px",
                  height: "35px",
                  backgroundColor: "grey",
                  borderRadius: "50%",
                }}
              ></span>
              <span style={{ paddingLeft: "4px" }}>{user}</span>
            </div>
            <div
              className={styles.questionbalance}
              style={{
                cursor: "pointer",
                paddingTop: "14px",
                paddingBottom: "14px",
              }}
            >
              <span>{cText}</span>
            </div>
          </div>
        </div>
      );
    }

This component accepts a comment object in its props arg. This comment object contains the comment of an answer to render. The commenter and the comment text is de-structured from the comment object. These are then displayed in the UI.

Test the App

Add new question:

View a question:

Answer a question:

Comment on an answer:

Delete a question:

Source Code

Find the source code of the project below:

Conclusion

We covered a lot in this tutorial. We started by introducing relationships in the database and going through the types of relationships one after the other explaining what they are. Next, we saw how we can set up a Strapi project and how we can establish relations in Strapi collections.

Finally, we built a QnA app just like Quora to fully demonstrate how relations in Strapi can be used in a real-life app. This article is a goldmine of Strapi info.

Using Custom Controllers to Power a Next.js App

Shada — Wed, 11 May 2022 08:50:35 +0000

Strapi continues to be the most popular free, open-source, headless CMS, and, recently, it released v4. Built using Node.js with support for TypeScript, Strapi allows developers to perform CRUD operations using either REST or GraphQL APIs.

The best part of Strapi is that it allows users to customize its behavior, whether for the admin panel or the core business logic of your backend. You can modify its default controllers to include your own logic. For example, you might want to send an email when a new order is created.

In this tutorial, you’ll learn how to build a messaging app with Strapi on the backend and Next.js on the frontend. For this app, you’ll customize the default controllers to set up your own business logic.

What are Custom Controllers in Strapi?

Controllers stand for C in the MVC (Model-View-Controller) pattern. A controller is a class or file that contains methods to respond to the request made by the client to a route. Each route has a controller method associated with it, whose responsibility is to perform code operations and send back responses to the client.

In Strapi, whenever you create a new collection type, routes and controllers are created automatically in order to perform CRUD operations.

Depending on the complexity of your application, you might need to add your own logic to the controllers. For example, to send an email when a new order is created, you can add a piece of code to the controller associated with the /api/orders/create route of the Order collection type and then call the original controller code. This is where Strapi shines, because it allows you to extend or replace the entire core logic for the controllers.

You’re going to customize the core controllers in Strapi by building a small but fun messaging application.

In this application, a user will be able to:

Read the last five messages,
Send a message,
Edit a message, and
Delete a message

Prerequisites

To follow along with this tutorial, you’ll need the following:

Node.js—this tutorial uses Node v16.14.0
npm—this tutorial uses npm v8.3.1
Strapi—this tutorial uses Strapi v4.1.7

The entire source code is available in this GitHub repository.

Setting Up the Project

You’ll need a master directory that holds the code for both the frontend (Next.js) and backend (Strapi).

Open up your terminal, navigate to a path of your choice, and create a project directory by running the following command:

mkdir custom-controller-strapi

In the custom-controller-strapi directory, you’ll install both Strapi and Svelte.js projects.

Setting Up Strapi v4

In your terminal, execute the following command to create the Strapi project:

npx create-strapi-app@latest backend --quickstart

This command will create a Strapi project with quickstart settings in the backend directory.

Once the execution completes for the above command, your Strapi project will start on port 1337 and open up localhost:1337/admin/auth/register-admin in your browser.

Set up your administrative user:

Enter your details and click the Let’s Start button. You’ll be taken to the Strapi dashboard:

Creating Messages Collection Type

Under the Plugins header in the left sidebar, click the Content-Types Builder tab. Then click Create new collection type to create a new Strapi collection:

In the modal that appears, create a new collection type with Display Name - Message and click Continue:

Next, create the following four fields for your collection type:

content: Text field with Long text type
postedBy: Text field with Short text type
timesUpdated: Number field with number format as Integer
uid: UID field attached to the content field

Click the Finish button and save your collection type by clicking the Save button:

Your collection type is set up. Next you need to configure its permissions to access it via API routes.

Setting Up Permissions for Messages API

By default, Strapi API endpoints are not publicly accessible. For this app, you want to allow public access to it without any authentication. You need to update the permissions for the Public role.

First, click the Settings tab under the General header and then select Roles under the Users & Permissions Plugin. Click the Edit icon to the right of the Public Role:

Scroll down to find the Permissions tab and check all the allowed actions for the Message collection type. Click Save to save the updated permissions:

Next, you need to customize the controller to implement the business logic for your application.

Customizing Controllers in Strapi

There are three ways to customize the core controllers in Strapi:

Create a custom controller
Wrap a core action (leaves core logic in place)
Replace a core action

To implement the logic for your messaging application, you need to configure three controller methods: find, create, and update in the Messages collection type.

First, open message.js file in src/api/message/controllers and replace the existing code with the following:

"use strict";

/**
 *  message controller
 */

const { createCoreController } = require("@strapi/strapi").factories;

module.exports = createCoreController("api::message.message", ({ strapi }) => ({
  async find(ctx) {
    // todo
  },

  async create(ctx) {
    // todo
  },

  async update(ctx) {
    // todo
  },
}));

Add the following code for the find controller method:

async find(ctx) {
  // 1
  const entries = await strapi.entityService.findMany(
    'api::message.message',
    {
      sort: { createdAt: 'DESC' },
      limit: 5,
    }
  );

  // 2
  const sanitizedEntries = await this.sanitizeOutput(entries, ctx);

  // 3
  return this.transformResponse(sanitizedEntries);
},

In the above code:

You use Strapi’s Service API to query the data (strapi.entityService.findMany) from the Message collection type. You use the sort and limit filters to fetch the last five entries from the Message collection type.
You sanitize the entries using Strapi’s built-in sanitizeOutput method.
You transform the sanitizedEntries using Strapi’s built-in transformResponse method.

Basically, you replace an entire core action for the find controller method and implement your own logic.

For the create controller method, you need to add a uid and timesUpdated property to the request data. Add the following code for the create controller method:

'use strict';

// 1
const { nanoid } = require('nanoid');

...

module.exports = createCoreController('api::message.message', ({ strapi }) => ({
  ...

  async create(ctx) {
    // 2
    ctx.request.body.data = {
      ...ctx.request.body.data,
      uid: nanoid(),
      timesUpdated: 0,
    };

    // 3
    const response = await super.create(ctx);

    // 4
    return response;
  },
}));

In the above code:

You import the nanoid package.
You add the uid and timesUpdated properties to the request data (ctx.request.body.data). For generating the uid, you use the nanoid npm package.
You call the core controller method (super.create) for creating a new entry in the Message collection type.
You return the response that contains the details related to the newly created entry.

You can install the nanoid package by running the following command in your terminal:

npm i nanoid

Next, you need to customize the code for the update controller method.

Whenever the update controller method is called, you want to increment the timesUpdated property by one. Also, you want to prevent the update of uid and postedBy properties, because you only want the user to update the content property.

For this, add the following code for the update controller method:

async update(ctx) {
  // 1
  const { id } = ctx.params;

  // 2
  const entry = await strapi.entityService.findOne(
    'api::message.message',
    id
  );

  // 3
  delete ctx.request.body.data.uid;
  delete ctx.request.body.data.postedBy;

  // 4
  ctx.request.body.data = {
    ...ctx.request.body.data,
    timesUpdated: entry.timesUpdated + 1,
  };

  // 5
  const response = await super.update(ctx);

  // 6
  return response;
},

In the above code:

You get the id from the ctx.params by using object destructuring.
To update the timesUpdated property, you find the entry with id in the Message collection type using Strapi’s Service API (strapi.entityService.findOne) to get the existing value for the timesUpdated property.
You remove the uid and postedBy properties from the request body, since you don’t want the end user to update these properties.
You update the timesUpdated property by incrementing the existing value by one.
You call the core controller method (super.update) for updating the entry in the Message collection type.
You return the response that contains the details related to the updated entry.

Next, you need to connect to Strapi from your Next.js frontend application.

Setting Up Next.js Project

You need to build the Next.js frontend application and integrate it with the Strapi backend.

First, in the custom-controllers-strapi directory, run the following command to create a Next.js project:

npx create-next-app@latest

On the terminal, when you are asked about the project’s name, set it to frontend. It will install the npm dependencies.

After the installation is complete, navigate into the frontend directory and start the Next.js development server by running the following commands in your terminal:

cd frontend
npm run dev

This will start the development server on port 3000 and take you to localhost:3000. The first view of the Next.js website will look like this:

Installing Required npm Packages

To make HTTP calls to the backend server, you can use the Axios npm package. To install it, run the following command in your terminal:

npm i axios

Don’t worry about styling the app right now—you’re concentrating on core functionality. You can learn to set up and customize Bootstrap in Next.js later in case you’d like to use Bootstrap as your UI framework.

Writing an HTTP Service

You need an HTTP service to connect with the Strapi API and perform CRUD operations.

First, create a services directory in the frontend directory. In the services directory, create a MessagesApi.js file and add the following code to it:

// 1
import { Axios } from "axios";

// 2
const axios = new Axios({
  baseURL: "http://localhost:1337/api",
  headers: {
    "Content-Type": "application/json",
  },
});

// 3
const MessagesAPIService = {
  find: async () => {
    const response = await axios.get("/messages");
    return JSON.parse(response.data).data;
  },

  create: async ({ data }) => {
    const response = await axios.post(
      "/messages",
      JSON.stringify({ data: data })
    );
    return JSON.parse(response.data).data;
  },

  update: async ({ id, data }) => {
    const response = await axios.put(
      `/messages/${id}`,
      JSON.stringify({ data: data })
    );
    return JSON.parse(response.data).data;
  },

  delete: async ({ id }) => {
    const response = await axios.delete(`/messages/${id}`);
    return JSON.parse(response.data).data;
  },
};

// 4
export { MessagesAPIService };

In the above code:

You import the axios package.
You define an Axios instance (axios) and pass the baseURL and headers parameters.
You define the MessagesAPIService object and define the methods for the following:
- find: this method returns a list of the last five messages.
- create: this method is used to create a new message.
- update: this method is used to edit an existing message.
- delete: this method is used to delete a message.
You export the MessagesAPIService object.

Creating UI Components

You’re going to create two components, one for rendering search results and another for rendering the search suggestions.

Create a components directory in the frontend directory. In the components directory, create a Messagebox.js file and add the following code to it:

// 1
import { useState } from "react";

// 2
const formatDate = (value) => {
  if (!value) {
    return "";
  }
  return new Date(value).toLocaleTimeString();
};

// 3
function Messagebox({ message, onEdit, onDelete }) {
  // 4
  const [isEditing, setIsEditing] = useState(false);
  const [messageText, setMessageText] = useState(message.attributes.content);

  // 5
  const handleOnEdit = async (e) => {
    e.preventDefault();
    await onEdit({ id: message.id, message: messageText });
    setIsEditing(false);
  };

  // 6
  const handleOnDelete = async (e) => {
    e.preventDefault();
    await onDelete({ id: message.id });
  };

  // 7
  return (
    <div>
      <div>
        <p>{formatDate(message.attributes.createdAt)}</p>
        <b>{message.attributes.postedBy}</b>
        <p
          contentEditable
          onFocus={() => setIsEditing(true)}
          onInput={(e) => setMessageText(e.target.innerText)}
        >
          {message.attributes.content}
        </p>
      </div>
      <div>
        {message.attributes.timesUpdated > 0 && (
          <p>Edited {message.attributes.timesUpdated} times</p>
        )}
        {isEditing && (
          <>
            <button onClick={handleOnEdit}>Save</button>
            <button onClick={() => setIsEditing(false)}>Cancel</button>
          </>
        )}
        <button onClick={handleOnDelete}>Delete</button>
      </div>
    </div>
  );
}

// 8
export default Messagebox;

In the above code:

You import the useState hook from React.
You define the utility method (formatDate) for formatting the dates and times.
You define the Messagebox component that is used to render the data related to an individual message. This component takes in three props:
- message—A message object returned from the API.
- onEdit—Callback function to run when a message is edited.
- onDelete—Callback function to run when a message is deleted.
You define two state variables—isEditing and messageText.
You define the handler function (handleOnEdit) for the onEdit event in which you call the callback function passed to the onEdit prop.
You define the handler function (handleOnDelete) for the onDelete event in which you call the callback function passed to the onDelete prop.
You render the UI for the Messagebox component in which you use the <p> tag as a content editable element to edit the message’s contents.
You export the Messagebox component.

Next, create a PublicMessagesPage.js file in the components directory and add the following code to it:

// 1
import React, { useState, useEffect } from "react";
import Messagebox from "./Messagebox";
import { MessagesAPIService } from "../services/MessagesApi";

// 2
function PublicMessagesPage() {
  // 3
  const [user, setUser] = useState("");
  const [message, setMessage] = useState("");
  const [messages, setMessages] = useState([]);

  // 4
  const fetchMessages = async () => {
    const messages = await MessagesAPIService.find();
    setMessages(messages);
  };

  // 5
  useEffect(() => {
    fetchMessages();
  }, []);

  // 6
  const handleSendMessage = async (e) => {
    e.preventDefault();

    if (!user) {
      alert("Please add your username");
      return;
    }

    if (!message) {
      alert("Please add a message");
      return;
    }

    await MessagesAPIService.create({
      data: {
        postedBy: user,
        content: message,
      },
    });

    await fetchMessages();
    setMessage("");
  };

  // 7
  const handleEditMessage = async ({ id, message }) => {
    if (!message) {
      alert("Please add a message");
      return;
    }

    await MessagesAPIService.update({
      id: id,
      data: {
        content: message,
      },
    });

    await fetchMessages();
  };

  // 8
  const handleDeleteMessage = async ({ id }) => {
    if (confirm("Are you sure you want to delete this message?")) {
      await MessagesAPIService.delete({ id });
      await fetchMessages();
    }
  };

  // 9
  return (
    <div>
      <div>
        <h1>Random Talk</h1>
        <p>Post your random thoughts that vanish</p>
      </div>

      <div>
        <form onSubmit={(e) => handleSendMessage(e)}>
          <input
            type="text"
            value={user}
            onChange={(e) => setUser(e.target.value)}
            required
          />
          <div className="d-flex align-items-center overflow-hidden">
            <input
              type="text"
              value={message}
              onChange={(e) => setMessage(e.target.value)}
              required
            />
            <button onClick={(e) => handleSendMessage(e)}>Send</button>
          </div>
        </form>
      </div>

      <div>
        {messages.map((message) => (
          <Messagebox
            key={message.attributes.uid}
            message={message}
            onEdit={handleEditMessage}
            onDelete={handleDeleteMessage}
          />
        ))}
      </div>
    </div>
  );
}

// 10
export default PublicMessagesPage;

In the above code:

You import the required npm packages and hooks from React.
You define the PublicMessagesPage functional component.
You define the state variables for the PublicMessagesPage component using the useState React hook:
- user—Stores the current user’s name.
- message—Stores the currently typed message.
- messages—Stores all the messages fetched from the Strapi API.
You define the fetchMessages method to get messages from the API and then update the state.
You call the fetchMessage method when the component is mounted by using the useEffect hook.
You define the handleSendMessage method in which you validate whether the user and message state variables are not empty. Then you call the create method from the MessageAPIService and pass the required data. Once the request is successful, you refresh the messages by calling the fetchMessages method.
You define the handleEditMessage method in which you validate whether the message state variable is not empty. Then you call the update method from the MessageAPIService and pass the required id and data. Once the request is successful, you refresh the messages by calling the fetchMessages method.
You define the handleDeleteMessage method in which you call the delete method from the MessageAPIService and pass the required id. Once the request is successful, you refresh the messages by calling the fetchMessages method.
You return the UI for the PublicMessagesPage component.
You export the PublicMessagesPage component.

Next, in the pages directory, replace the existing code by adding the following code to the index.js file:

// 1
import PublicMessagesPage from "../components/PublicMessagesPage";

// 2
function Home() {
  return <PublicMessagesPage />;
}

// 3
export default Home;

In the above code:

You import the PublicMessagesPage component.
You define the Home component for the localhost:3000 route in which you return the PublicMessagesPage component.
You export the Home component as a default export.

Finally, save your progress and visit localhost:3000 to test your messaging app by performing different CRUD operations:

Send a message:

Edit a message:

Delete a message:

Refreshing Messages

Currently, if someone adds, edits, or updates messages, you need to refresh the whole page to see that. To fetch new messages, you can poll the localhost:1337/api/messages endpoint every few seconds or use WebSockets. This tutorial will use the former approach.

To implement polling, create a utils directory in the frontend directory. In the utils directory, create a hooks.js file and add the following code to it:

import { useEffect, useRef } from "react";

function useInterval(callback, delay) {
  const savedCallback = useRef();

  // Remember the latest callback.
  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  // Set up the interval.
  useEffect(() => {
    function tick() {
      savedCallback.current();
    }
    if (delay !== null) {
      let id = setInterval(tick, delay);
      return () => clearInterval(id);
    }
  }, [delay]);
}

export { useInterval };

In the above code, you have defined a custom hook, useInterval, that allows you to call the callback after every delay. This implementation is taken from software engineer Dan Abramov’s blog.

Next, update the PublicMessagesPage.js file by adding the following code to it:

...

// 1
import { useInterval } from "../utils/hooks";

function PublicMessagesPage() {
  ...

  // 2
  useInterval(() => {
    fetchMessages();
  }, 10000);

  ...
}

In the above code:

You import the useInterval hook.
You use the useInterval hook to call the fetchMessages method every ten seconds (10000 ms).

To test the auto-refresh of messages, open localhost:3000 in at least two browser tabs or windows and try sending messages by setting different usernames. Here’s how the application works now:

That’s it. You have successfully implemented a messaging application using Strapi and Next.js.

Conclusion

In this tutorial, you learned to create a messaging application using Strapi for building the backend and Next.js for building the frontend UI. You also learned to customize the controllers in Strapi to implement your own business logic.

To check your work on this tutorial, go to this GitHub repository.

How to Create a Blog with SvelteKit and Strapi

Shada — Tue, 10 May 2022 08:39:59 +0000

SvelteKit is a relatively new SSR framework for SvelteJS. We can compare it to NextJS, but instead of using React, it uses Svelte. In this tutorial, you'll learn how you can create a blog website with SvelteKit and Strapi as a CMS.

What is a CMS?

A Content Management System (CMS) is a popular tool for creating web pages, blogs, and online stores. They store your website's data, images, pictures, and other hosted content. They are popular among bloggers because anyone can spin up a blog pretty quickly.

Strapi is a headless CMS coded in Javascript. A headless CMS has no frontend, only an admin panel, so it is ideal for developers. In other words, a Headless CMS is an API that serves up your content to be consumed by a frontend.

Goals

In this tutorial, you'll code a blog website using the SvelteKit framework. You'll use Strapi for content management.

You'll learn how to use Strapi to manage your content and the basics of SvelteKit, including:

Filesystem based routing
Preloading content
Dynamic routing
404 Error handling
SvelteKit Layouts
And much more

Prerequisites

NodeJS and NPM installed on your machine.
Javascript and Svelte knowledge. (Svelte has a great tutorial)
Some coffee and articles to write on your new blog!

Creating a Strapi Project

Now that you know what a CMS and Strapi are, you can get started by locally hosting Strapi, or in other words, Creating a Strapi Project.

Run this command in an empty folder to create a Strapi project.

     npx create-strapi-app cms --quickstart

You can replace the word cms with anything you like. This command will be the name of the folder your new Strapi project will sit in.

Now sit back, relax, and wait for the project to create itself. After that, you should automatically be taken to localhost:1377.

If that's not the case, cd into the newly created folder and run this command.

     npm run strapi develop

This command will start Strapi up on port 1337. If a page is not automatically opened up for you, open localhost:1377 to launch the Strapi Admin Page.

It should present you with this page. You need to sign up for an account here. Remember that this account is locally-scoped to this project, meaning it won't work on other Strapi projects.

Creating Content Types

In the sidebar of Strapi admin http://localhost:1377, click the Content-Types Builder button. This button should take you to the Content Types builder page.

What are Content Types?

We can compare a content type to a table in SQL. Thus, content types help us structure and categorize our data.

Posts

Let's create a content type for posts. Then, click the Create new Collection Type button to launch a dialogue.

Enter Post as the name. Go to Advanced Settings at the top and disable the Drafts system. Click Continue

Add these fields. Refer to the image if you get stuck.

A title field with type Text.
A description field with type Text. Make sure the text is Long text.
A content field with the Rich Text type.

Let's also add a relation between Post and User from the users-permissions plugin. This relationship allows us to easily link a post to a user to display relevant information like the Author's name and profile picture, fetch the Author's posts, etc.

Add a new Relation field to the Post content type. The column on the left should be PostPost, and the column on the right should be User from users-permissions. Select the fourth relation; the User has many Posts and clicks Finish.

Refer to the below image if you get stuck:

Click Save to save your changes and restart the server.

Adding Slug to the Post Collection Type

Next, we will be adding a dynamic autogenerated slug system to the Post collection type. Using a slug will make it easier to query for our posts in the frontend.

First, navigate to Content-Types Builder and click Post, then click Add another field. Select UID. Set the field slug, and set the attached field to title. Save your changes and click Configure the view, and select the slug field.

Then, set the Editable field off in the window that appears. Click Save to register your changes.

With the slug system fully set up, a new slug will be automatically generated in an uneditable slug field anytime you create a new product. The Slug will be created from the product name.

Setting up Roles and Permissions

If you try querying the Content API for the posts content type, i.e., at http://localhost:1377/api/posts, you'll get a 403 FORBIDDEN error.

This error is because, by default, Strapi doesn't allow any man down the street to access your content. You're supposed to set rules and permissions for specific roles. Let's allow the Public role, i.e., an unauthenticated user, to read our posts.

In the sidebar, click on the Settings button. There, click on Roles in the Users & Permissions section. But, first, let's edit the permissions for the Public role.
We'll allow the Public role to count, find and findOne for Posts.

Next, let's do the same for the Authenticated role, but we'll also allow them to create, update and delete posts as well.

Creating a SvelteKit Project

Now for the main SvelteKit code. Create a new folder named frontend in the same directory as the folder for the Strapi project and cd into it.

Now, let's create a SvelteKit project with this command:

    npm init svelte@next

Add your preferred project name, and be sure to choose the options as shown in the below image.

Launch the app inside your favourite editor, for example, VSCode. Now, we can start the app with the below two commands:

     # To install packages
     npm I 

     # To start the app
     npm run dev

Here's how your app should look, hosted on localhost:3000

Install TailwindCSS

TailwindCSS is a straightforward way to style your apps, and it's clear to add them to SvelteKit.

We'll use SvelteAdd to add TailwindCSS to our application quickly.
Run the below command to add TailwindCSS to our project.

     npx svelte-add tailwindcss

Install the required dependencies.

    npm i

Be sure to stop the running server with Ctrl+C first.
Let's start our project from scratch.

Delete all the extra CSS, except the @tailwind parts in src/app.css. Delete all of the items in src/routes and src/lib, and now we should be left with an empty project.

Create a new file src/routes/index.svelte. All files in the src/routes folder will be mapped to actual routes. For example, src/routes/example.svelte will be accessible at /example, and src/routes/blog/test.svelte will be accessible at /blog/test. index.svelte is a special file. It maps to the base directory. src/routes/index.svelte maps to /, and src/routes/blog/index.svelte maps to /blog.

This is how filesystem based routing works in SvelteKit. Later, you'll learn to add routes with dynamic names.

For now, let's work on the basic UI. Add the following code to index.svelte

        <script lang="ts">
        </script>

        <div class="my-4">
            <h1 class="text-center text-3xl font-bold">My wonderful blog</h1>
        </div>

I've elected to use Typescript, which is just like Javascript, but with types. You can follow along with javascript, but types and interfaces won't work for you. Also, you shouldn't put lang="ts" in your script tag.`

Now you'll notice that TailwindCSS is no longer working. This is because we deleted __layout.svelte, the file importing src/app.css. Let's now learn what this __layout.svelte file is.

__layout.svelte is a special file that adds a layout to every page. __layout.sveltes can not only exist at the top level routes folder, but can also exist in subdirectories, applying layouts for that subdirectory.

Fetch Blog Posts

Now, we can fetch blog posts from Strapi and display them in index.svelte. We'll utilize SvelteKit Endpoints to make API fetching easier. Endpoints in SvelteKit are files ending with .js (or .ts for typescript) that export functions corresponding to HTTP methods. These endpoint files become API routes in our application.

Let's create an endpoint src/routes/posts.ts (use the .js extension if you're not using typescript)

// src/routes/posts.ts
import type { EndpointOutput } from '@sveltejs/kit';
export async function get(): Promise<EndpointOutput> {
    const res = await fetch('http://localhost:1337/api/posts?populate=*');
    const data = await res.json();
    return { body: data };
}
#Ignore the typings if you're using javascript.

Now, when we visit http://localhost:3000/posts, we'll receive the posts from Strapi. Let's implement this route in our index.svelte file using SvelteKit's Loading functionality.
Loading allows us to fetch APIs before the page is loaded using a particular <script context=" module"> tag.

Add this to the top of src/routes/index.svelte.

<script lang="ts" context="module">
    import type { Load } from '@sveltejs/kit';
    import { goto } from '$app/navigation';
    export const load: Load = async ({ fetch }) => {
        const res = await fetch('/posts');
        const response = await res.json();
        return { props: { posts: response.data } };
    };
</script>
<script lang="ts">
    export let posts: any;
</script>

You can see that the load function takes in the fetch function provided to us by SvelteKit and returns an object containing props. These props are passed down to our components.

<script lang="ts" context="module">
    import type { Load } from '@sveltejs/kit';
    import { goto } from '$app/navigation';
    export const load: Load = async ({ fetch }) => {
        const res = await fetch('/posts');
        const response = await res.json();
        return { props: { posts: response.data } };
    };
</script>
<script lang="ts">
    export let posts: any;
</script>
<div class="my-4">
    <h1 class="text-center text-3xl font-bold">My wonderful blog</h1>
</div>
<div class="container mx-auto mt-4">
    {#each posts as post}
        <div
            class="hover:bg-gray-200 cursor-pointer px-6 py-2 border-b border-gray-500"
            on:click={() => goto('/blog/' + post.id)}
        >
            <h4 class="font-bold">{post.attributes.title}</h4>
            <p class="mt-2 text-gray-800">{post.attributes.description}</p>
            <p class="text-gray-500">By: {post.attributes.author.data.attributes.username}</p>
        </div>
    {/each}
</div>

I've added a few typings in src/lib/types.ts. You can check it out in the Source Code. SvelteKit allows us to access any file in src/lib using the $lib alias.

I added a test user and a test post in Strapi, and this is how my app looks.

Posts Page

Now, let's add a route that'll allow us to view a post. Now, you'll learn about Dynamic Routes in SvelteKit.

If we enclose a string in brackets ([]) in a filename of a route, that becomes a parameter. So, for example, if I have a route called src/routes/blog/[post].svelte, the route maps to /blog/ANY_STRING where ANY_STRING will be the value of the post parameter. Let's use this to query posts with Strapi.

We can use the load function we talked about earlier to get the parameters. Create a file called src/routes/blog/[id].svelte and add the below code to it.

<!-- src/routes/blog/[id].svelte -->
<script lang="ts" context="module">
    import type { Load } from '@sveltejs/kit';
    export const load: Load = async ({ params, fetch }) => {

        // Now, we'll fetch the blog post from Strapi
        const res = await fetch(`http://localhost:1337/api/posts/${params.id}?populate=*`);
        // A 404 status means "NOT FOUND"
        if (res.status === 404) {
            // We can create a custom error and return it.
            // SvelteKit will automatically show us an error page that we'll learn to customise later on.
            const error = new Error(`The post with ID ${id} was not found`);
            return { status: 404, error };
        } else {
            const response = await res.json();
            return { props: { post: response.data.attributes } };
        }
    };
</script>
<script lang="ts">
    import type { Post } from '$lib/types';
    import { onMount } from 'svelte';
    export let post: Post;
    let content = post.content;
    onMount(async () => {
        // Install the marked package first!
        // Run this command: npm i marked
        // We're using this style of importing because "marked" uses require, which won't work when we import it with SvelteKit.
        // Check the "How do I use a client-side only library" in the FAQ: https://kit.svelte.dev/faq
        const marked = (await import('marked')).default;
        content = marked(post.content);
    });
</script>
<h1 class="text-center text-4xl mt-4">{post.title}</h1>
<p class="text-center mt-2">By: {post.author.data.attributes.username}</p>
<div class="border border-gray-500 my-4 mx-8 p-6 rounded">
    {@html content}
</div>

We need to use the @html directive when we want the content to be actually rendered as HTML.

When you go to a blog page, you should see something like this:

Authentication and Authorization

Let's get started with authenticating users to our blog. Strapi allows us to configure third-party providers like Google, but we'll stick to the good ol' email and password sign-in.

We don't want anybody to register to our blog, so we'll manually create a user with Strapi. Then, in the Strapi admin panel, click on the Users collection type in the sidebar.

There, click Add new Users and create your user. Here's mine, for example.

Click Save when done

We can test logging in to our user by sending a POST request to http://localhost:1337/auth/local. Follow the image below for the correct JSON body.

The REST client I'm using in the above image is Postman.

The Login Route

Let's create a new route src/routes/login.svelte. This will of course map to /login.

<script lang="ts">
    import type { User } from '$lib/types';
    import { goto } from '$app/navigation';
    import user from '$lib/user';
    let email = '';
    let password = '';
    async function login() {
        const res = await fetch('http://localhost:1337/api/auth/local', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
            body: JSON.stringify({ identifier: email, password })
        });
        if (res.ok) {
            const data: {user: User, jwt: string} = await res.json();
            localStorage.setItem("token", data.jwt)
            if (data) {
                $user = data.user;
                goto('/');
            }
        } else {
            const data: { message: { messages: { message: string }[] }[] } = await res.json();
            if (data?.message?.[0]?.messages?.[0]?.message) {
                alert(data.message[0].messages[0].message);
            }
        }
    }
</script>
<form on:submit|preventDefault={login} class="container mx-auto my-4">
    <h1 class="text-center text-2xl font-bold">Login</h1>
    <div class="my-1">
        <label for="email">Email</label>
        <input type="email" placeholder="Enter your email" bind:value={email} />
    </div>
    <div class="my-1">
        <label for="password">Password</label>
        <input type="password" placeholder="Enter your password" bind:value={password} />
    </div>
    <div class="my-3">
        <button class="submit" type="submit">Login</button>
    </div>
</form>
<style lang="postcss">
    label {
        @apply font-bold block mb-1;
    }
    input {
        @apply bg-white w-full border border-gray-500 rounded outline-none py-2 px-4;
    }
    .submit {
        @apply bg-blue-500 text-white border-transparent rounded px-4 py-2;
    }
</style>

I've created a store in src/lib/user.ts that will house the User to access the User in any component.

Here's the code:

import { writable } from 'svelte/store';
import type { User } from './types';
const user = writable<User | null>(null);
export default user;

Persisting Auth State

Great! Our /login page works flawlessly, but there's one problem - When we refresh the page, the user store gets reset to null. To fix this, we need to re-fetch the User every time the page reloads. That's right, we need a load function in __layout.svelte since it is present on every page.

Change __layout.svelte to this code:

<!-- src/routes/__layout.svelte -->
<script lang="ts">
    import '../app.css';
    import userStore from '$lib/user';
    import type { User } from '$lib/types';
    import { onMount } from 'svelte';
    let loading = true;
    onMount(async () => {
        // Check if 'token' exists in localStorage
        if (!localStorage.getItem('token')) {
            loading = false;
            return { props: { user: null } };
        }
        // Fetch the user from strapi
        const res = await fetch('http://localhost:1337/api/auth/me', {
            headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
        });
        const user: User = await res.json();
        loading = false;
        if (res.ok) {
            $userStore = user;
        }
    });
</script>
{#if !loading}
    <slot />
{/if}

Wait a minute! Why are we using onMount instead of load? Since load is executed on the server, we won't have access to localStorage, which is on the browser. Hence, we have to wait for the app to load before accessing localStorage.

If you visit your app, you'll get a 404 Error when trying to get the User from Strapi. This error is because /auth/me isn't a valid route. So let's create it ourselves.

Open the Strapi project in your favorite editor. Strapi allows us to add custom API routes to it. Let's use the strapi CLI to generate a route.

Run the following command to start the CLI.

bash npx strapi generate
Select controller and add controller name Auth. Also, click to add the new controller to a new API.

You'll find a new file called /src/api/auth/controllers/Auth.js. We need to add our simple controller here.

Update the /src/api/auth/controllers/Auth.js file code with the following code snippet.

    "use strict";

    /**
     * A set of functions called "actions" for `auth`
     */

    module.exports = {
      async me(ctx) {
        if (ctx.state.user) {
          return ctx.state.user;
        }

        ctx.unauthorized("You're not logged in");
      },
    };

This simple API route will return the User if it exists or give us a 401 UNAUTHORIZED error.
Now, we need to tell Strapi to register this controller at /auth/me.

To do that, create file /src/api/auth/config/routes.json, and add the following code snippet to the file.

`json

{
    "routes": [
        {
            "method": "GET",
            "path": "/auth/me",
            "handler": "Auth.me",
            "config": {
                "policies": []
            }
        }
    ]
}

Now, if we access /auth/me, we get 404 NotFoundError.

Like the post routes, Strapi doesn't, by default, allow anyone to access this route either. So, let's edit permissions like how we did earlier for the Authenticated role.

And now, everything should work flawlessly.

Navbar

Let's add a quick navbar to our app. Create file src/lib/Navbar.svelte and put the below code in it.

`js

<!-- src/lib/Navbar.svelte -->
<script lang="ts">
    import user from './user';
</script>
<nav class="bg-white border-b border-gray-500 py-2 px-4 w-full">
    <div class="flex items-center justify-between container mx-auto">
        <a href="/" class="font-bold no-underline">My blog</a>
        <section>
            {#if !$user}
                <a href="/login" class="font-mono no-underline">Login</a>
            {:else}
                <a href="/new" class="font-mono no-underline mr-3">New</a>
                <span class="font-mono text-gray-500">{$user.username}</span>
            {/if}
        </section>
    </div>
</nav>

`
Add the Navbar to __layout.svelte.

    <!-- src/routes/__layout.svelte -->
    <script lang="ts">
      // ...
      import Navbar from "$lib/Navbar.svelte";
    </script>

    <Navbar />
    <slot />

Create and Update Posts

Now, let's get to the juicy part. Add a file called src/routes/new.svelte. This file will contain the form used to create a new post on Strapi.

<!-- src/routes/new.svelte -->
<script lang="ts" context="module">
    import type { Load } from '@sveltejs/kit';
    import type { Post } from '$lib/types';
    export const load: Load = async ({ fetch, page: { query } }) => {
        // edit will be an optional query string parameter that'll contain the ID of the post that needs to be updated.
        // If this is set, the post will be updated instead of being created.
        const edit = query.get('edit');
        if (edit) {
            const res = await fetch('http://localhost:1337/api/posts/' + edit);
            if (res.status === 404) {
                const error = new Error(`The post with ID ${edit} was not found`);
                return { status: 404, error };
            } else {
                const data: Post = await res.json();
                return {
                    props: {
                        editId: edit,
                        title: data.attributes.title,
                        content: data.attributes.content,
                        description: data.attributes.description
                    }
                };
            }
        }
        return { props: {} };
    };
</script>
<script lang="ts">
    import { onMount } from 'svelte';
    import user from '$lib/user';
    import { goto } from '$app/navigation';
    export let editId: string;
    export let title = '';
    export let description = '';
    export let content = '';
    onMount(() => {
        if (!$user) goto('/login');
    });
    // To edit the post
    async function editPost() {
        if (!localStorage.getItem('token')) {
            goto('/login');
            return;
        }
        const res = await fetch('http://localhost:1337/api/posts/' + editId, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
                Accept: 'application/json',
                Authorization: 'Bearer ' + localStorage.getItem('token')
            },
            body: JSON.stringify({ title, description, content })
        });
        if (!res.ok) {
            const data: { message: { messages: { message: string }[] }[] } = await res.json();
            if (data?.message?.[0]?.messages?.[0]?.message) {
                alert(data.message[0].messages[0].message);
            }
        } else {
            const data: Post = await res.json();
            goto('/blog/' + data.id);
        }
    }
    async function createPost() {
        if (!localStorage.getItem('token')) {
            goto('/login');
            return;
        }
        if (editId) {
            // We're supposed to edit, not create
            editPost();
            return;
        }
        const res = await fetch('http://localhost:1337/api/posts', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                Accept: 'application/json',
                Authorization: 'Bearer ' + localStorage.getItem('token')
            },
            body: JSON.stringify({ title, description, content })
        });
        if (!res.ok) {
            const data: { message: { messages: { message: string }[] }[] } = await res.json();
            if (data?.message?.[0]?.messages?.[0]?.message) {
                alert(data.message[0].messages[0].message);
            }
        } else {
            const data: Post = await res.json();
            goto('/blog/' + data.id);
        }
    }
</script>
<form on:submit|preventDefault={createPost} class="my-4 mx-auto container p-4">
    <div class="my-1">
        <label for="title">Title</label>
        <input type="text" placeholder="Enter title" id="title" bind:value={title} />
    </div>
    <div class="my-1">
        <label for="description">Description</label>
        <input type="text" placeholder="Enter description" id="description" bind:value={description} />
    </div>
    <div class="my-1">
        <label for="title">Content</label>
        <textarea rows={5} placeholder="Enter content" id="content" bind:value={content} />
    </div>
    <div class="my-2">
        <button class="submit" type="submit">Submit</button>
    </div>
</form>
<style lang="postcss">
    label {
        @apply font-bold block mb-1;
    }
    input {
        @apply bg-white w-full border border-gray-500 rounded outline-none py-2 px-4;
    }
    textarea {
        @apply bg-white w-full border border-gray-500 rounded outline-none py-2 px-4 resize-y;
    }
    .submit {
        @apply bg-blue-500 text-white border-transparent rounded px-4 py-2;
    }
</style>

Don't try this out yet, since there's currently no way to determine the Author of the PostPost. We need to code that in Strapi explicitly.

Let's create custom controllers for the Post content type. Here, we'll make it so that the Author of a post will be the currently logged-in User.

Edit api/post/controllers/post.js in the Strapi project.

'use strict';
/**
 *  post controller
 */
const { createCoreController } = require('@strapi/strapi').factories;
const { parseMultipartData, sanitizeEntity } = require("strapi-utils");
/**
 * Read the documentation (https://docs.strapi.io/developer-docs/latest/development/backend-customization.html#core-controllers)
 * to customize this controller
 */
module.exports = {
    async create(ctx) {
        let entity;
        if (ctx.is("multipart")) {
            const { data, files } = parseMultipartData(ctx);
            data.author = ctx.state.user.id;
            entity = await strapi.services.post.create(data, { files });
        } else {
            ctx.request.body.author = ctx.state.user.id;
            entity = await strapi.services.post.create(ctx.request.body);
        }
        return sanitizeEntity(entity, { model: strapi.models.post });
    },
    async update(ctx) {
        const { id } = ctx.params;
        let entity;
        const [article] = await strapi.services.post.find({
            id: ctx.params.id,
            "author.id": ctx.state.user.id,
        });
        if (!article) {
            return ctx.unauthorized(`You can't update this entry`);
        }
        if (ctx.is("multipart")) {
            const { data, files } = parseMultipartData(ctx);
            entity = await strapi.services.post.update({ id }, data, {
                files,
            });
        } else {
            entity = await strapi.services.post.update({ id }, ctx.request.body);
        }
        return sanitizeEntity(entity, { model: strapi.models.post });
    },
    async delete(ctx) {
        const { id } = ctx.params;
        let entity;
        const [article] = await strapi.services.post.find({
            id: ctx.params.id,
            "author.id": ctx.state.user.id,
        });
        if (!article) {
            return ctx.unauthorized(`You can't delete this entry`);
        }
        await strapi.services.post.delete({ id });
        return { ok: true };
    },
};
module.exports = createCoreController('api::post.post');

If you get confused, checkout the Strapi Documentation

Install strapi-utils with the following command.
bash npm install strapi-utils
And now, you should be able to create and update posts all from one route. Let's make the update process easier. Change src/routes/blog/[id].svelte to the code below:

`js

<br> import type { Load } from '@sveltejs/kit';<br> export const load: Load = async ({ params, fetch }) => {</p> <div class="highlight"><pre class="highlight plaintext"><code> // Now, we'll fetch the blog post from Strapi const res = await fetch(`http://localhost:1337/api/posts/${params.id}?populate=*`); // A 404 status means "NOT FOUND" if (res.status === 404) { // We can create a custom error and return it. // SvelteKit will automatically show us an error page that we'll learn to customise later on. const error = new Error(`The post with ID ${params.id} was not found`); return { status: 404, error }; } else { const response = await res.json(); return { props: { post: response.data.attributes } }; } }; </script> <script lang="ts"> import type { Post } from '$lib/types'; import { onMount } from 'svelte'; import { goto } from '$app/navigation'; import user from '$lib/user'; export let post: Post; let content = post.content; onMount(async () => { // Install the marked package first! // Run this command: npm i marked // We're using this style of importing because "marked" uses require, which won't work when we import it with SvelteKit. // Check the "How do I use a client-side only library" in the FAQ: https://kit.svelte.dev/faq const marked = (await import('marked')).default; content = marked(post.content); }); async function deletePost() { // TODO } </script> <h1 class="text-center text-4xl mt-4">{post.title}</h1> <p class="text-center mt-2">By: {post.author.data.attributes.username}</p> {#if $user && post.author.id === $user.id} <p class="my-2 flex justify-center items-center gap-3"> <button class="bg-blue-500 text-white font-bold py-2 px-4 rounded border-transparent" on:click={() => goto('/new?edit=' + post.id)}>Update post</button > <button class="bg-red-500 text-white font-bold py-2 px-4 rounded border-transparent" on:click={deletePost}>Delete post</button > </p> {/if} <div class="border border-gray-500 my-4 mx-8 p-6 rounded"> {@html content} </div> </code></pre></div> <p>`<code></code></p> <p>Now, when the Author visits their PostPost, they'll see two buttons to Update and Delete the PostPost, respectively.</p> <p>Don't try this out yet, since there's currently no way to determine the Author of the PostPost. We need to code that in Strapi explicitly.<br> Let's create custom controllers for the <code>Post</code> content type. Here, we'll make it so that the Author of a post will be the currently logged-in User.<br> Edit <code>api/post/controllers/post.js</code> in the Strapi project.</p> <p><code></code>`</p> <div class="highlight"><pre class="highlight plaintext"><code> "use strict"; const { parseMultipartData, sanitizeEntity } = require("strapi-utils"); /** * Read the documentation (https://docs.strapi.io/developer-docs/latest/development/backend-customization.html#core-controllers) * to customize this controller */ module.exports = { async create(ctx) { let entity; if (ctx.is("multipart")) { const { data, files } = parseMultipartData(ctx); data.author = ctx.state.user.id; entity = await strapi.services.post.create(data, { files }); } else { ctx.request.body.author = ctx.state.user.id; entity = await strapi.services.post.create(ctx.request.body); } return sanitizeEntity(entity, { model: strapi.models.post }); }, async update(ctx) { const { id } = ctx.params; let entity; const [article] = await strapi.services.post.find({ id: ctx.params.id, "author.id": ctx.state.user.id, }); if (!article) { return ctx.unauthorized(`You can't update this entry`); } if (ctx.is("multipart")) { const { data, files } = parseMultipartData(ctx); entity = await strapi.services.post.update({ id }, data, { files, }); } else { entity = await strapi.services.post.update({ id }, ctx.request.body); } return sanitizeEntity(entity, { model: strapi.models.post }); }, }; </code></pre></div> <p>`<code></code></p> <blockquote> <p>If you get confused, checkout the <a href="https://docs.strapi.io/developer-docs/latest/guides/is-owner.html#introduction">Strapi Documentation</a></p> </blockquote> <p>And now, you should be able to create and update posts all from one route. Let's make the update process easier. Change <code>src/routes/blog/[slug].svelte</code> to the code below:</p> <p><code></code>`</p> <div class="highlight"><pre class="highlight plaintext"><code> <script lang="ts" context="module"> import type { Load } from '@sveltejs/kit'; export const load: Load = async ({ page: { params }, fetch }) => { // The params object will contain all of the parameters in the route. const { slug } = params; // Now, we'll fetch the blog post from Strapi const res = await fetch('http://localhost:1337/posts/' + slug); // A 404 status means "NOT FOUND" if (res.status === 404) { // We can create a custom error and return it. // SvelteKit will automatically show us an error page that we'll learn to customise later on. const error = new Error(`The post with ID ${slug} was not found`); return { status: 404, error }; } else { const data = await res.json(); return { props: { post: data } }; } }; </script> <script lang="ts"> import type { Post } from '$lib/types'; import { onMount } from 'svelte'; import { goto } from '$app/navigation'; import user from '$lib/user'; export let post: Post; let content = post.content; onMount(async () => { // Install the marked package first! // Run this command: npm i marked // We're using this style of importing because "marked" uses require, which won't work when we import it with SvelteKit. // Check the "How do I use a client-side only library" in the FAQ: https://kit.svelte.dev/faq const marked = (await import('marked')).default; content = marked(post.content); }); async function deletePost() { // TODO } </script> <h1 class="text-center text-4xl mt-4">{post.title}</h1> <p class="text-center mt-2">By: {post.author.username}</p> {#if $user && post.author.id === $user.id} <p class="my-2 flex justify-center items-center gap-3"> <button class="bg-blue-500 text-white font-bold py-2 px-4 rounded border-transparent" on:click={() => goto('/new?edit=' + post.id)}>Update post</button > <button class="bg-red-500 text-white font-bold py-2 px-4 rounded border-transparent" on:click={deletePost}>Delete post</button > </p> {/if} <div class="border border-gray-500 my-4 mx-8 p-6 rounded"> {@html content} </div> </code></pre></div> <p>`<code></code></p> <p>Now, when the Author visits their PostPost, they'll see two buttons to Update and Delete the PostPost, respectively.</p> <h2> <a name="deleting-posts" href="#deleting-posts" class="anchor"> </a> Deleting Posts </h2> <p>Let's add functionality to the <code>Delete Post</code> button. Edit the <code>deletePost()</code> function in the file we just modified (<code>src/routes/blog/[id].svelte</code>) and change it to this:</p> <p><code></code>`</p> <div class="highlight"><pre class="highlight plaintext"><code> async function deletePost() { if (!localStorage.getItem('token')) { goto('/login'); return; } const res = await fetch('http://localhost:1337/api/posts/' + post.id, { method: 'DELETE', headers: { Authorization: 'Bearer ' + localStorage.getItem('token') } }); if (res.ok) { goto('/'); } else { const data: { message: { messages: { message: string }[] }[] } = await res.json(); if (data?.message?.[0]?.messages?.[0]?.message) { alert(data.message[0].messages[0].message); } } } </code></pre></div> <p>`<code></code><br> Now, obviously, we don't want anybody to delete a post by someone else. Let's add another method in <code>api/post/controllers/post.js</code> in our Strapi App.</p> <p>This is how your code should look now:</p> <p><code></code>`</p> <div class="highlight"><pre class="highlight plaintext"><code>'use strict'; /** * post controller */ const { createCoreController } = require('@strapi/strapi').factories; const { parseMultipartData, sanitizeEntity } = require("strapi-utils"); /** * Read the documentation (https://docs.strapi.io/developer-docs/latest/development/backend-customization.html#core-controllers) * to customize this controller */ module.exports = { async create(ctx) { let entity; if (ctx.is("multipart")) { const { data, files } = parseMultipartData(ctx); data.author = ctx.state.user.id; entity = await strapi.services.post.create(data, { files }); } else { ctx.request.body.author = ctx.state.user.id; entity = await strapi.services.post.create(ctx.request.body); } return sanitizeEntity(entity, { model: strapi.models.post }); }, async update(ctx) { const { id } = ctx.params; let entity; const [article] = await strapi.services.post.find({ id: ctx.params.id, "author.id": ctx.state.user.id, }); if (!article) { return ctx.unauthorized(`You can't update this entry`); } if (ctx.is("multipart")) { const { data, files } = parseMultipartData(ctx); entity = await strapi.services.post.update({ id }, data, { files, }); } else { entity = await strapi.services.post.update({ id }, ctx.request.body); } return sanitizeEntity(entity, { model: strapi.models.post }); }, async delete(ctx) { const { id } = ctx.params; let entity; const [article] = await strapi.services.post.find({ id: ctx.params.id, "author.id": ctx.state.user.id, }); if (!article) { return ctx.unauthorized(`You can't delete this entry`); } await strapi.services.post.delete({ id }); return { ok: true }; }, }; module.exports = createCoreController('api::post.post'); </code></pre></div> <p>`<code></code></p> <p>And now, the author should be able to delete posts.</p> <h2> <a name="custom-error-page" href="#custom-error-page" class="anchor"> </a> Custom Error Page </h2> <p>You may have noticed that the 404 page looks terrible. It has almost no styling. With SvelteKit, we're allowed to create a <a href="https://kit.svelte.dev/docs#layouts-error-pages">custom error page</a>. So we need to name this file <code>__error.svelte</code> and place it in <code>src/routes</code>.</p> <p><code></code>`</p> <div class="highlight"><pre class="highlight plaintext"><code> <script lang="ts" context="module"> import type { ErrorLoad } from '@sveltejs/kit'; export type { ErrorLoad } from '@sveltejs/kit'; export const load: ErrorLoad = ({ error, status }) => { return { props: { error, status } }; }; </script> <script lang="ts"> export let error: Error; export let status: number; </script> <div class="fixed w-full h-full grid place-items-center"> <section class="p-8 border-gray-500 rounded"> <h1 class="text-center text-4xl font-mono-mt-4">{status}</h1> <p class="text-center">{error.message}</p> </section> </div> </code></pre></div> <p>`<code></code></p> <p>Here's how our error page will look like when you search for a blog post with wrong id.</p> <p><img src="https://paper-attachments.dropbox.com/s_4057050B8A7592A58E25D8AF215C61A9A9589163DB136EFCE8661C471A2F341E_1645742392877_Screen+Shot+2022-02-24+at+11.39.48+PM.png" alt="The Error Page"/></p> <p>Much better right?</p> <p>Now, obviously, we don't want anybody to delete a post by someone else. Let's add another method in <br> <code>api/post/controllers/post.js</code> in our Strapi App.<br> This is how your code should look now:</p> <p><code></code>`<br> // api/post/controllers/post.js<br> "use strict";</p> <div class="highlight"><pre class="highlight plaintext"><code> const { parseMultipartData, sanitizeEntity } = require("strapi-utils"); /** * Read the documentation (https://docs.strapi.io/developer-docs/latest/development/backend-customization.html#core-controllers) * to customize this controller */ module.exports = { async create(ctx) { let entity; if (ctx.is("multipart")) { const { data, files } = parseMultipartData(ctx); data.author = ctx.state.user.id; entity = await strapi.services.post.create(data, { files }); } else { ctx.request.body.author = ctx.state.user.id; entity = await strapi.services.post.create(ctx.request.body); } return sanitizeEntity(entity, { model: strapi.models.post }); }, async update(ctx) { const { id } = ctx.params; let entity; const [article] = await strapi.services.post.find({ id: ctx.params.id, "author.id": ctx.state.user.id, }); if (!article) { return ctx.unauthorized(`You can't update this entry`); } if (ctx.is("multipart")) { const { data, files } = parseMultipartData(ctx); entity = await strapi.services.post.update({ id }, data, { files, }); } else { entity = await strapi.services.post.update({ id }, ctx.request.body); } return sanitizeEntity(entity, { model: strapi.models.post }); }, async delete(ctx) { const { id } = ctx.params; let entity; const [article] = await strapi.services.post.find({ id: ctx.params.id, "author.id": ctx.state.user.id, }); if (!article) { return ctx.unauthorized(`You can't delete this entry`); } await strapi.services.post.delete({ id }); return { ok: true }; }, }; </code></pre></div> <p>`<code></code></p> <p>And now, the author should be able to delete posts.</p> <h2> <a name="conclusion-amp-resources" href="#conclusion-amp-resources" class="anchor"> </a> Conclusion & Resources </h2> <p>And there you have it! Your blog website is made with SvelteKit and Strapi. If you got stuck anywhere, be sure to check the <a href="https://kit.svelte.dev/docs">SvelteKit Docs</a>, the <a href="https://docs.strapi.io/">Strapi Docs</a>, and the <a href="https://github.com/Quadrisheriff/Svelte-strapi-tutorial">source code on Github</a>.</p>

DEV Community: Shada

How to Build a blog using Strapi, Nuxt (Vue) and Apollo

Goal

Prerequisites

Step 1: Backend Setup

Step 2: Frontend Setup

Step 3: Query Strapi with GraphQL

Step 4: Styling with UIkit

Step 5: Designing the Data Structure

Step 6: Create the Layout of the Application

Step 7: Create the Articles Component

Step 8: Index Page

Step 9: Create Article Page

Step 10: Categories

Conclusion

Building a Personal Habit Tracker App with Custom DB Queries in Strapi

Custom DB Queries in Strapi

Build a Habit Tracker App with Strapi

Set Up a Strapi Project

Set Up a React Frontend

Post and Fetch Data from Strapi

Implement Custom Queries in Strapi

Query Your New Custom Endpoint

Conclusion

Here are 5 Reasons to Add On-Site Search to Your Website

Goals

What is On-site Search?

Why and When Do We Use This?

Here are 5 Benefits of adding On-Site Search Feature

What is Meilisearch?

Why Should You Use Meilisearch?

What is Strapi CMS?

Using Meilisearch in a Movies Web Application as a Use Case

Frontend and Strapi Setup

Connecting Strapi Collection

Installing the Meilisearch

Fetching Data from Meilisearch

Integrating Search Functionality in Our Application

Conclusion

How to build a productivity tips application with Render, Remix, and Strapi

Prerequisites

Why Remix?

Why Strapi?

With Strapi you can create an API that is the following:

Why Render?

The Strapi Application

Before using your API, you need to add sample productivity tips:

The Remix App

Step 1: Initialize the Remix App

Step 2: Add Styling

1. Import the Pico CSS library.

2. Change the page title

3. Add "Productivity Tips" header and link it to /

Step 3: Edit the Content [Add the Tips]

1. Add a paragraph that describes the app:

2. Add a link to /tips

Step 4: Create New Files

Step 5: Define Dynamic Routes and Style

Deploy to Render

Conclusion

Strapi Internals: Customizing the Backend [Part 1 - Models, Controllers & Routes]

Goal

What is Koa?

Use Case

Prerequisites

Setting up

Creating our Models

Product Content-Type Schema

Order Content-Type Schema

What We’re Building

Custom Controllers and Routes

Create a Controller

Create a Route

Test the Custom Controllers and Routes

Building the Logic for the "confirmOrder" Controller

Getting the Order id

Getting the User

Getting the Order Data

Update Order Data

Create an Order

3. Add "Productivity Tips" header and link it to `/`

2. Add a link to `/tips`

Getting the Order `id`