How to Work with Laravel as a Front-End Dev
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 .env
file 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.
- 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.