Building a “CRUD” app (Larafirebase) with Google Firebase using PHPFirebase, Laravel & VueJS.

Lots of hype has been for Google Firebase. PHP however, don’t have much support on the Google Firebase platform. Today, I will be sharing with you how easy it can be building a CRUD app using PHP and Firebase.

This article will be about a simple app I built recently with PHP(Laravel) and Google Firebase. I will be taking you step by step on how I got to do it.

Image for post
Image for post
Meet Larafirebase — The app we will be talking about here

What we need

For every project, planing and timing is important. It’s same with this small one. Below are the things we need to achieve what we want and how fast we want to get it done.

Tools

  1. PHPFirebase Library
  2. Laravel
  3. VueJS
  4. Any good editor or IDE (I use PHPStorm)

Time

~ 1hr 30mins.

Getting started

I started by installing Laravel and PHPFirebase library for performing CRUD actions on Google Firebase.

Since I already have laravel installed globally on my machine, I just did this.

laravel new larafirebase

Next, is the installation of the library.

composer require coderatio/phpfirebase:v1.0

Because, I will be using VueJS for my front-end, I had to install all npm dependencies. I did that by using this command.

npm install

We will do this in our app.js file inside resources => js folder.

We will be needing only two controllers for this project.

  1. WelcomeController (Responsible for handling welcome page request)
  2. PostsController (Responsible for handling all our CRUD actions requests)

We will create components for each of our CRUD action except the Delete and the browse component as well.

  1. CreatePost or AddPost
  2. ReadPost
  3. UpdatePost or EditPost
  4. Posts (Which is responsible for displaying all our created posts).

To render our welcome page, we need routes(Laravel & Vue), a controller action and a Vue component.

The routes.

The controller (Found in app/Http/Controllers/WelcomeController.php)

The welcome page request is handled by our WelcomeController which has only one method for now. The method will return our welcome view.

The component (Found in resources/js/components/Home.vue)

Image for post
Image for post
What our welcome page looks like.

The add post page, has Laravel and Vue routes. We then have the AddPost.vue component.

The routes

The controller action

This snippet is from our app/Http/Controllers/PostsController.php

The component (AddPost.vue)

This is found in resources/js/components/AddPost.vue

Image for post
Image for post
How our Add post page looks like.

This page displays all our stored posts on Google Firebase. Just like the steps taken to display our add page, we need controller, routes and components to render our Posts page. However, we will be doing a small http request to our server to get all stored posts. Let’s see how we can do all these.

The routes

The controller (found in app/Http/Controllers/PostsController.php)

The component (found in resources/js/components/Posts.vue)

Image for post
Image for post
Posts page

To render this page, we need the laravel api route and vue route, controller as well as a component. Here, we will be checking for internet connection. There, we have a child component for this page called NoInternet.

The routes

Note: We have something like :postId. This, means that we are accepting the post id as a parameter from the url. So, we will have something like …./post/1/edit. The checkInternetConnection(), is a tiny method within our controller that checks for internet connection since we are communicating Firebase.

The controller action

This is done in app/Http/Controllers/PostsController.php

The component (EditPost.vue)

This component has a child component. All of which can be found inside resources/js/components. I will past the code for NoInternet component at the end of this article.

Image for post
Image for post
What our Edit Post page looks like

The read post page is where we display a single post to be read. This process works as the edit post. See how can achieve the read post page below.

The routes (Found in routes/web.php and resources/js/app.js)

The controller action (Found in app/Http/Controllers/PostsController.php)

The component (Found in resources/js/components/ReadPost.vue)

Image for post
Image for post
The read post page

Summary

I earlier said I will be dropping the snippet for our NoInternet component. Here it is:

This article, is not that explained but I do hope it would guide you to building your first app using PHP(Laravel) with Google Firebase.

I’ve hosted the app Here and you can as well find the source code on Github Here.

In case, you have any difficulty going through this tutorial or see need to contribute to the PHP library (PHPFirebase), kindly find me on Twitter Here or on Github Here.

A big thank you to the creator of Firebase Admin SDK for PHP. You made it easier for the library I built.

Written by

Full Stack Developer. PHP, JavaScript, Python.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store