This is a great open source tool, so here I will walk through how I got my strapi back end up and running so that I could build out a functional React front end using this content.
First off, for strapi to work smoothly your local environment needs the most current LTS (long term support) version of Node.js, which is currently 14.16. Once that is done, all you need to do to make sure the most recent strapi is installed, and also create your strapi app is run this command.
npx create-strapi-app <your-project-name> — quickstart
The quickstart flag defaults to using a SQLite database, and if you would like to use one of the other compatible databases, (PostgreSQL, MySQL, MariaDB, MongoDB) then you can leave that flag off and navigate the menu that runs in your command line. Make sure to run this command in the directory that you would like your project created. If you kept the quickstart flag, the application will automatically open in develop mode, which will open a new tab of your browser to localhost:1337/admin, where you will be prompted to create a user. This will be the super admin, who can add and remove new admins, and also edit all of the content and permissions. That url is also where you will go to login and edit your content after the initial setup.
At this point, we have a new strapi application, and an admin logged in. So now we’re looking at the strapi admin page with a menu toolbar on the right hand side that looks like this:
Mine has a few items that I have already added, which is everything under Collection Types, and Single Types. Every section that is under those two headers are essentially endpoints in our api, and in there we can customize the content that they produce. When starting a new application, we want to start out by creating these pieces of content. We do that by clicking on the Content-Types Builder under the Plugins header. This page has the same headers, Collection Types and Single Types, but under that is a button where we can add a new one. We will use collection types for larger pieces of content, that has multiple images or text to make up a section, or a single type if we want just a single piece of data to be attached to that endpoint. When we create a new content type, first you give that piece of content a name, which will also be the endpoint url. For example, my piece of content long about will be accessed by sending a get request to localhost:1337/long-about. Once the name is given the menu gives you options to what type of content will be provided, and that will set up the template for our API.
These are all fairly straight forward, other than relation where we can set up a relationship between two different pieces of content. For example if this is a blogging page, we may have a piece of content that holds all of our authors, and another that holds all of the blogs, we can set up a one to many relationship for author to blogs, and a belongs to for the blog to author. Once that template is all set for your content, you can then click each piece of content in the right hand menu that I showed earlier, and add the data for each piece of content in there. This is what an end user would be doing to update their webpage.
Great, so far we created a strapi app, logged in as admin, created templates for content and then added the data inside of that template. We’re done right? Almost! All that needs to be done is set the permissions for those endpoints for customization and security. How do we do that? The plugin for roles & permissions is installed by default, so to access it we just click on settings in that main toolbar on the right, and then click Roles, under the Users & Permissions Plugin header. This page has a list of all the roles available, by default is Public and Authenticated. For my app, everything will be able to be viewed by the public so I will go through how to get that going. For authenticated users, you will need to set that user up and when making calls to the API, have the authentication key passed into the header, using a JWT. For public access all you need to do is click on the Public edit button, and scroll down to permissions. Here we can select “find” and “findone” for all of the pieces of content we want publicly accessible, click save and VIOLA!! If you followed along and finished saving, we can now go to localhost:1337/long-about and in the browser we would see a JSON response with the content that is stored in that location.
That is a quick walkthrough on how to setup a strapi backend. Since it is a REST api, it is very easy to then create a React front end with this content api, and have a user friendly way to edit all of the content on the page without digging into the code.