Building a Blog With Reactjs And Laravel

Building a Blog With Reactjs And Laravel Part 1

In this tutorial we will build a blog application using laravel framework as the backend and reactjs as the frontend.

 

 

Requirements:

  • Laravel framework (preferable 5.8)
  • Reactjs
  • React redux store
  • Token authentication

 

In this series we will build a full featured application using Laravel and Reactjs. The app we are going to implement is a small blog and we will cover creating admin panel and website using reactjs. This is a big series so be aware to follow each article carefully to get the idea. In this article we will start by preparing the project then in each article i will discuss one or more topics until we finish it.

 

What you learn from this series

  • Using Reactjs to build a big project.
  • Using React router and define routes in separate files for a big project.
  • Using Redux to manipulate the store and how to define actions and reducers.
  • Using multiple stores and combine them together using combineReducer.
  • Dealing with async requests in redux actions.
  • Accessing the store in components using props.
  • Using components inside other components and displaying modals.
  • Submitting forms and displaying validation errors.
  • Using pagination to paginate long lists.

 

For the purpose of this tutorial i will choose version 5.8 of laravel framework, so let’s begin by creating a fresh laravel project using composer:

 

Add the proper database settings in .env file:

 

Next let’s create some migrations that represent those tables:

  • Categories
  • Posts
  • Comments
  • Tags

Besides that laravel provides the users migration out of the box so we don’t need to create it. Now we will open each migration and add the needed columns to create such migration.

database/migrations/YYYY_mm_dd_XXXXX_create_categories_table

database/migrations/YYYY_mm_dd_XXXXX_create_posts_table

database/migrations/YYYY_mm_dd_XXXXX_create_tags_table

database/migrations/YYYY_mm_dd_XXXXX_create_post_tag_table

database/migrations/YYYY_mm_dd_XXXXX_create_comments_table

Also we need to update the users migration, so we need to include two columns ‘is_admin‘ which indicates the admin user, and ‘api_token‘ which will be in the authentication process to store tokens when we login and register users.

database/migrations/YYYY_mm_dd_XXXXX_create_users_table

Run

The next step is to create the models, we can do this manually or by using laravel artisan command:

app/Category.php

app/Comment.php

app/Post.php

app/Tag.php

app/User.php

In the above code i have added the required relations in each model that we will need when we retrieve or insert. At first i have setup a relation between categories and posts. The category has many posts and the post belongs to one category represented as:

Next i have added a relation between post and comment, the comment belongs to one post and the post has many comments. Also the post belongs to one user and the user has many posts.

For the tags the relation is many to many so the post belongs to many tags and tag belongs to many posts so i added two relations in both models which is the belongsToMany() method like this in Post model:

Users Table Seeder

Let’s create a seeder for the users table. We will insert the admin user for our app.

database/seeds/UserTableSeeder.php

Update database/seeds/DatabaseSeeder.php to include the seeder

In terminal run

Now after we created the database and models let’s move on to create the controllers.

 

Handling Authentication

The first step we want to handle is the authentication process as all other system operations based on this process for example you can’t add or delete posts unless you login.

Open app/Exceptions/Handler.php and update it as follows:

Here we overrided the unauthenticated() method which called when user tries to access a protected resource, in this case i check if the request is a json request then it returns a json response with ‘unauthenticated’ message otherwise it redirect to the login page.

 

Open app/Http/Middleware/Authenticate.php and update it as follows

 

Login and register controllers

We need to update both the login and register controllers so that they can work with api requests.

Open app/Http/Controllers/Auth/LoginController.php

In the above code i have override the logout and login methods. The login method store the api token after successful login and return this token in the response. The logout method clears the api token.

app/Http/Controllers/Auth/RegisterController.php

In the register controller we save the api_token with the user and return it back in the response.

Now add the auth routes in routes/api.php

routes/api.php

To confirm that login and register routes is working, you can try them in Postman as shown in these screenshots:

postman login

postman register

postman logout

 

Continue to part2: Blog Controllers

 

Share this: