Using Strapi and Laravel

Strapi and Laravel are both powerful tools that are making developers' lives easier. Both are different in their domains.

We will look at these two technologies and see how they can be used together. It would be nice to talk about these technologies independently before we dive into how we can use Strapi and Laravel.

To follow this, here are some requirements:

• Node.js (10 +)
• Yarn
• PHP 7+
• Composer (for laravel installation, this is optional if you are using docker)

What is Laravel

Laravel is a free, open-source PHP web framework intended to develop web applications following the model–view–controller(MVC) architectural pattern. Laravel is used mainly for full-stack web development.

You can learn Laravel using Laravel tutorial: The Ultimate Guide 2021.

What is Strapi

Strapi is based on Node.js( Javascript runtime). It is a headless content management system(CMS). It is 100% Javascript also open-source.

STRAPI VS LARAVEL

First, these two technologies have different approaches:

Strapi is concerned mainly with data management and seamless distribution to any frontend application. While Laravel is usually referred to as The Full-Stack Framework, it can route requests and serve them through its Blade template. However, Laravel is an API Backend for frontend applications.

This is where I personally like Strapi. With Strapi, you can get a secure REST API and GRAPHQL(v4) out of the box without coding because it has been made easy for you.

This article is not a Strapi over Laravel or the other way round. It can never be for me.

I want to talk about the database. Both technologies are powerful. Laravel currently supports MySQL, Postgres, SQLite, and SQL Server, and this is configured after installation of your project, the .env that is copied from .env.example is where this is done.

In Strapi, you get to choose and configure your database during installation.

Now, can they be used together? Yes. Strapi Graphical User Interface for managing content with collections types makes your code less and visually understand your data. There are many more things to explore between these two technologies.

So we are going to install and Laravel and Strapi and connect a Strapi to the Laravel project. That is, Strapi houses and manages data. Laravel will use this data.

Setting up a Strapi Project

To get started, run this:

    npx create-strapi-app strapilara --quickstart

We will use strapilara as our folder's name where the Strapi will be installed. The --``quickstart flag automatically uses the SQLite database option(That's is fine for this use case).

Navigate to move to strapilara on a successful installation and run:

    yarn develop

The command will build the project, and automatically launch it at http://localhost:1337/admin/auth/register-admin, where you can need to register yourself as a super admin.

Creating Strapi Colleaction

Next, we will add data by creating collection types. Let’s say we want to build a blog. We are going to have these as the schema: author's name, blog title, blog post, date.

These are the field we are going to add to the Blog collection that we will create.

On the admin page, Click on Content-Types Builder → Create a new collection type

It will pop up this:

Input Blog as the display name

Next, add your fields.

Click on Text, Input Title as the the Name and click on Add another field, and repeat this step for author

Now the blog post has to be Rich Text

Finally, click on the Date field

Then input date as the Name and select the Type to be date. Click Finish button.

All the fields that we need for our blog schema has been created. It is time save.

Hitting on Save will restart the server.

We now have our collection type Blogs(Strapi uses pluralize) and we can now add new contents.

This is how Strapi folder structure looks like:

All collections created are added in the api folder.

So I will go ahead and two blog posts, save and publish them.

Setting the permission

For security reasons, this blog won't be available to the public. We are going to fix that by making it publicly available. That is, we want the public users to be able to view.

On your admin, click on Settings→Roles→Public

Check the following and Save:

Here we want the public to able to find an item, find all items and even insert item(s).

Setting Up Laravel Project

Now let us set up our Laravel Project that will communicate our Strapi instance soonest. I will use composer to install mine and run this in a different folder other than your Strapi instance.

1composer create-project laravel/laravel lara

Where lara is the project folder’s name. After this is done, change directory

    cd lara

then:

    php artisan serve

This will serve the application at http://localhost:8000.

This is how Laravel folder structure looks like:

Connecting Laravel and Strapi

Now to interact with Strapi through Laravel, we need to install this package laravel-strapi in our application.

So in the root of our application, stop the Laravel running and run:

1    composer require dbfx/laravel-strapi

This will install the package.

In the .env file, add this:

1    STRAPI_URL=http://localhost:1337
2    STRAPI_CACHE_TIME=3600

Add config to your project by creating a strapi.php file inside the config folder and copy and paste this into it.

1    //php
2    <?php
3    return [
4        'url' => env('STRAPI_URL'),
5        'cacheTime' => env('STRAPI_CACHE_TIME', 3600),
6    ];

This file is essential as it points to your URL and cache time. Remember that we defined this in the .env file.

I will go ahead inside the routes folder, in the web.php file, and do the following:

Paste this at the top of the file:

1    //php
2    use Dbfx\LaravelStrapi\LaravelStrapi;

Then below the home route that displays the welcome.blade.php file in the resources→views, we created another route known as /test.

1    //php
2    Route::get('/test', function () {
3        $strapi = new LaravelStrapi();
4        return $blogs = $strapi->collection('blogs');
5    });

Notice how we created a variable that instantiated the class LaravelStrapi?

Now, if we run http://127.0.0.1:8000/test in our browser, we will get this:

This is the whole collection of the blog. We can also get an entry of a collection like so:

1    //php
2    Route::get('/test/{id}', function ($id) {
3        $strapi = new LaravelStrapi();
4        return $blogs = $strapi->entry('blogs', $id);
5    });

Now, if we run http://127.0.0.1:8000/test/1 in our browser, we get just a single entry:

What we did is that we made the id that is unique to every post dynamic in the route. Changing the http://127.0.0.1:8000/test/1 to http://127.0.0.1:8000/test/2 will fetch to the second post and so forth.

Where You Could Go from Here

Laravel is great at web development, and we could do so much more with it. Serving data from Strapi makes sense as you get to easily and visually manage your data. What we have done so far is get the response from the Strapi and displayed it in our Laraval project.

Now, what’s more? We could go ahead and integrate this in an actual view. There are some things one can do with these two techs aside from a blog schema we are using.

I will go ahead and make a controller for the blog. You can stop the project from serving and run this:

1    php artisan make:controller BlogController

After this, you can serve your project again using:

1    php artisan serve

The make controller command that we just ran creates a BlogController.php file inside the app→Http→Controllers folder. This file has a boilerplate code like so:

1    <?php
2    namespace App\Http\Controllers;
3    use Illuminate\Http\Request;
4    class BlogController extends Controller
5    {
6        //
7    }

Now, inside the BlogController.php, I will create a function that I can call along with the controller.

1    public function blog()
2        {
3            return view('blog');
4        } 

This does nothing other than return a view that we will soon create inside the resources→views folder.

Let us create a route inside routes→web.php:

1    Route::get('/blog', [BlogController::class, 'blog']);

Let us go back to the BlogController to use and instantiate the LaravelStrapi package.

1    //php
2    <?php
3    namespace App\Http\Controllers;
4    use Dbfx\LaravelStrapi\LaravelStrapi;
5    use Illuminate\Http\Request;
6    class BlogController extends Controller
7    {
8        public function blog()
9        {
10            $strapi = new LaravelStrapi();
11            $blogs = $strapi->collection('blogs');
12            return view('blog', compact(['blogs']));
13        }
14    }

Inside the resources→views folder, create a file blog.blade.php,copy this code, and paste it there.

Go to this route: http://127.0.0.1:8000/blog , you should have this:

Github Link

You can take it further by styling it to your taste.

Conclusion

We have made it to the end of this tutorial. We have also seen how to connect a Laravel application to Strapi using the Laravel-strapi package.

We explained how to set up Strapi and Laravel projects. They are straightforward to understand because a lot of work has been lifted away from us. We were able to focus on the essential parts of the project without worrying about security issues.