02. Laravel for Frontend developers – Getting up and running

Read the previous post. There’s also a screencast version of this.

Before we get started, make sure you have the following installed on your machine:

The first thing we’re going to do is create our laravel app using composer, which is the de-facto package manager for php – think of it as being the npm of php. Open the terminal, navigate to the directory where you want to create your application, and run the following command:

composer create-project --prefer-dist laravel/laravel food-tracker

Now that the food-tracker project was created, open it in your favorite code editor. If you’re new to php development, you should open your editor’s plugin or extension manager and look for a php IntelliSense plugin to get autocompletion to work. In this series, I’ll be using VS code as it’s popular in the frontend community. If you’re using it too, I recommend going with the PHP Intelephense extension created by Ben Mewburn.

Looking for php extensions in VS Code
Looking for php extensions in VS Code

Once you’ve installed the extension, the first thing we’ll going to take a look at is the routes/api.php file. Laravel has four different route files, but since we are building an API for a frontend application, the one we are interested in is the api.php file.

Open it and delete everything inside it, except the <?php tag.

Routing

In a typical frontend application, routing works by matching a URL to a given page or component. Bellow is a route definition in an angular app:

{ path: 'first-page', component: FirstPage }

In Laravel, routing works pretty much in the same way. The only different thing is that you need to consider the type of request you are making (GET/PUT/POST/DELETE), and the route itself doesn’t match a whole component as it would in a frontend app, but a specific method of it.

Laravel route explained
Laravel route explained

The route above matches a GET request to an api/foods segment that, when accessed, calls the index method on the FoodsController. Write the following in your api.php file:

<?php

use Illuminate\Support\Facades\Route;

Route::get('foods', 'FoodsController@index');

The use statement you see above is very similar to an import statement you’d have in your frontend application. It pulls in a class that you can use in your file.

Generating Laravel Controllers

Laravel comes with a command-line interface called artisan that provides several commands to assist you while you build your application. To generate a controller, open your terminal and enter the following command:

php artisan make:controller FoodsController

If you look inside the app/Http/Controllers directory, you’ll see that we now have a new file calledFoodsController. Open it.

Since the route we defined above expects an index() method to exist, let’s create it and have it return something so we can test and see if everything is working.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class FoodsController extends Controller
{
    public function index()
    {
        return [
            [
                'id' => 1,
                'name' => 'Milk'
            ]
        ];
    }
}

Serving your laravel application

Now that the route is defined and points to an existing controller with an existing index method, we can start serving the application. To do that, open the terminal and run the following artisan command:

php artisan serve

As you can see, this is very similar to npm run start or npm run serve.

To test that everything works as it should, open the browser and go to the URL displayed in the terminal + /api/foods (all api.php routes are prefixed with api).

You should see a json response like this:

Laravel JSON response
Laravel JSON response

Route parameters

Route parameters in Laravel work pretty much the same as they do in a frontend application. Let’s say we want to pass an id parameter to our route such we get a specific food item. Go to your api.php file and change the route as below:

Route::get('foods/{id}', 'FoodsController@index');

Now, the next segment that comes after foods will be regarded as the id parameter, and it will be passed as an argument to the index method inside the FoodsController. Update the controller method as bellow:

public function index($id)
{
    return [
        [
            'id' => $id,
            'name' => 'Milk'
        ]
    ];
}

Now, if we go in our browser and visit /api/foods/2, the returning result will use the passed in parameter.

Laravel JSON response for route with parameter
Laravel JSON response for route with parameter

What’s next?

In the next post, we’ll see how one connects to a mysql database, creates tables, and pulls and returns records from the database, not just some hard coded json. Stay tuned!

Read the previous post. There’s also a screencast version of this.


Playlist: LFFD

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.