How to Work with Laravel as a Front-End Dev

Credit: Laravel

In this article, I’ll be explaining the front-end aspect of Laravel. The article explains how to set up a Laravel Project cloned from a Github repository to run on your local server, how to set up a route to enable you to test a view or a page independently from the entire project and provides practical examples each aspect explained.

Requirements

• Composer: A composer is used to manage Laravel’s dependencies. If you don’t have Composer installed on your machine, you can download one here
• PHP >= 7.1.3 (To upgrade your PHP in wamp click here or Click here if you are using Xamp)

For more details of the requirements for Laravel 5.6 (which is the latest version of Laravel at the point of writing this article) click here

• Command line interface (CLI)

Intro

Laravel is one of the leading PHP frameworks the reasons I cannot explain here, I leave it for you to find out.

As a front-end developer, you sometimes find yourself collaborating with a team working on a Laravel project and because you don’t understand the basic things you need to in order to blend with Laravel workflow, you tend to create an extra job for the Laravel guys. Yes! extra job because after you’re done with your native front-end coding, another guy who understands laravel would have to refactor your code to blend with Laravel blade. The Blade is a special view rendering technique used by Laravel.

Another challenge is how to set up the project base you cloned from the repo and make it run on your local machine and how to test your part and confirm that the views are displaying accurately.

Now follow along as I explain how to bring the above challenges to a stop.

Part I

Setting Up a Cloned Laravel Project on Local Machine

Before you begin this section, ensure that you’ve already met the requirements above.

Step 1

For the purpose of practice, click here to clone a test project that you can use throughout this article.

The first thing to do after cloning the project is to create a .env file at the project root folder. This file is most of the times if not always gitignored, meaning that it’s excluded while pushing the project to the repo. Instead, a .env.example is included.

Create a new file in the project root folder and name it .env

Note .envfile has no extension.

Next, copy the content of the .env.example and paste in the .env file you just created.

Next is to download the dependencies or the vendor files.

Step 2

Another important resource that is usually gitignored is the vendor folder. Vendor directory contains all the Composer dependencies that are required for a Laravel app to function. It’s usually gitignored because, the composer.json contains all the necessary information to install all the vendors you need.

To install the vendors, open your CLI, cd to the project and run,

composer install

Once the installation is complete, proceed to the next step to generate the APP_KEY.

Step 3

Without the APP_KEY, the app cannot serve which means it cannot run on your local server.

Run the command below to generate the APP_KEY

php artisan key:generate

Now open the .env file. Check if the key generated has been automatically assigned to the APP_KEY. If not, copy the key generated from the CLI and paste as the value of the APP_KEY in the .env.

It’ll look like below:

APP_KEY=base64:RXnnH/y2TNk/kmxkkUYyyCltqIKxxpG+Q5Vpah2bIbg=

If the APP_KEY is like the one shown above, you’re good to go, proceed to run your Laravel app

by running the command below:

php artisan serve

On successful execution of the command above, you’ll see

Laravel development server started: <http://127.0.0.1:8000>

Now, open your browser and type localhost:8000.

Awesome! the project is now running on your local machine.

Part II

Understanding and Interacting with Blade

The blade is the templating engine provided with Laravel. Blade supports normal PHP codes. All blade view files use .blade.php and are stored in the resources/views directory. For more explanation about the blade, read the Laravel documentation. The documentation contains everything you need to know about blade.

The following are the few things you need to know about Laravel as a front-end Dev:

• Laravel Assets:

All assets such as CSS files, Javascript files, images etc are stored in the public folder with each occupying its own folder.

Laravel assets scaffolding

• How to link the assets to the blade

Unlike normal HTML templates, Blade has it’s special way of linking assets. Below are the examples:

Assuming you want to link public/css/style.css, public/js/script.js and public/images/avartar.jpg to a blade view, blade’s way of doing it is shown below:

<link href="{{ asset('css/style.css')}}" rel="stylesheet"> // for css asset

<script src="{{ asset('js/script.js')}}"></script> // for js asset

<img src="{{ asset('images/avartar.jpg')}}" alt=""> // for image asset

• Creating a Simple Route for a Blade View

Once you’ve created your blade view, you might want to view it on the browser, to achieve that, you need to create a route for that particular view.

Let’s create a blade view called test.blade.php in the resoures/views directory. Add a HTML boilerplate in the test.blade.php file as shown belo:

<!DOCTYPE html>
<html>
<head>
 <title>Laravel</title>
</head>
<body>
  <h1> {{ "Hello Word!"}}</h1>
</body>
</html>

Open routes/web.php and add the code below

Route::get('/test', function () {
    return view('test'); // test here is the test.blade.php
});

You have registered the route for accessing the test.blade.php. Now open your browser and enter localhost:8000/test.

Awesome! you discover that your browser displays the content of test.blade.php.

Now let me briefly explain the route code above. Notice the return statement, Laravel ships with a helper function view() for accessing the view templates. The parameter it accepts is the name of the blade template, in our case, we name it test.blade.php and hence we pass test to the view() function as view(‘test’).

Note: if the blade template is located in a sub-directory of the reources/views

for example resources/views/email, then we can access it as view(‘email.test’).

• Adding a Generic Route

Since you’d be needing many templates, it’d be boring and time-consuming adding routes for each blade template you create. The trick I’m going to show will enable your access all your templates with a single route using the name of the template as the route. The code is shown below:

Route::get(/{$route}, function (){
    
     return view($route);
});

Note: All the templates must be in the root directory of the resources/views for the code above to work, except you modify it to suit your directory structure.

Summary

So far you’ve learned how to set up a cloned Laravel project from Github repository and make it run on your local machine. You’ve also learned the basics of Laravel blade that you need to be able to collaborate with a team of Laravel Devs as a frontend Dev.

Be sure to visit the Laravel docs to study more about the blade templates and how you can use Layouts to minimize unnecessary repetitions. Once more click here to clone a test project for your practice.

I hope this helps you.