How to convert HTML to Laravel blade – Front-End in Laravel

We have a lot of frameworks in the market now, it might be Front-End or Back-End frameworks. Options are many. Just one scenario I’m going to explain today. 

You are a Front-End Developer and the project you are working on is completely on the Laravel framework. But you can’t give the HTML files to the developers, that’s not the good way to be in the project. Being involved in the project as Front-End Developer you must deliver the static files through the framework by converting HTML to Laravel blade.

How to convert HTML template to Laravel project in 5 simple steps

1. Copy all .html files to Your Laravel Project Folder > Resources > Views.
2. Rename all .html files to .blade.php
3. Copy all CSS, JS, Images and fonts folder to Public Folder
4. Link all CSS, JS, Images by using {{ asset(‘/’) }}
   Just one example::
   

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

5. Create Route in Routes > web.php file.
   For example: To create a route for about page use this code.
   

   Route::get('/about', function () {
       return view('about');
   });

That’s it. This is how to convert HTML to Laravel blade.

Well, this is fine to some extent. But we can do a lot more in the Laravel framework. Follow along with me to know more.

Frameworks help developers in many ways, it makes our work very simple and easy. Even though we are using the Laravel framework which is a pure Back-End framework but still you find a lot of benefits for frontend and it is ten times better than creating static files here.

So let’s start developing step by step from scratch

For reference, I have both codebases in GitHub. If you feel difficult to understand the process, visit these links.

1. Bootstrap-page (HTML template)
2. mywebsite (Laravel project converted from HTML template)

Table of content

1. Install Laravel Project (Skip this if you already have the project)
2. Convert HTML to Laravel blade
3. Place CSS, JS, and Images in the right place
4. Create Routes
5. Partials(For reusable code)
6. Master layout file

1. Install Laravel Project – It’s very easy

Just with 3 steps, our Laravel project will be in the folder. Follow these commands to install the project. I will explain briefly why these commands are used.

composer global require laravel/installer

laravel new my-website

php artisan serve

2. Convert HTML to Laravel blade

In simple, Laravel doesn’t render .html format, so simple change extension from .html to .blade.php. For example, change index.html to index.blade.php. 

Let us do it practically.

Now copy all HTML files from bootstrap-page project and paste inside Resources > views folder of mywebsite project. Then change all .html files to .blade.php.

3. Place Assets (CSS, JS, Images, more)

Once HTML files are converted to blade files we will copy and paste asset files (CSS, JS, Images, etc.). In the Laravel framework, we have to place asset files in the Public folder. If you are using any preprocessor like SASS then it is a good idea to place SASS files in Resources > assets folder and then compile it to the Public folder. This process is a different concept, I will explain in a separate blog post. For now, just copy-paste assets to the Public folder. 

Accessing these assets is very simple. Refer the code below.

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

Or

<link rel="stylesheet" type="text/css" href="{{ url('/') }}/css/style.css">

Or

<link rel="stylesheet" type="text/css" href="css/style">

All three works. But it is recommended to use with asset() method. Use the asset() method for accessing anything from the Public folder.

4. Create Routes

To create a route go to Routes > web.php. Here you can manage all routes or simple links to access the pages. Here is an example of creating a route to about page.

Route::get('/about', function () {
    return view('about');
});

To check, go to the browser and type /about. If you are running the project it should be like this. http://localhost:8000/about 

The same way create routes for all pages.

5. Partials 

The partials folder is created for reusable codes. It can be accessed multiple times in the projects. For example navbar, footer, Blog card, Profile card, etc.

In our project, we need 2 partials(navbar and footer). So let us create partials folder inside views. Then add two files naming navbar.blade.php and footer.blade.php.

Copy the navbar content to navbar.blade.php and footer content to footer.blade.php.

To access this just use the below code anywhere it is required.

@include("partials.navbar")

For now, you can try this in your project.

6. Master Layout

This is very important. Creating a Master layout will ease a lot of work. This page will dynamically access other pages. 

Let’s create one now.

Add a new folder named Layouts in view folder, and add a new file by naming it master.blade.php. The folder names or file name which I have given master here can be anything, it’s up to your usability. I feel this describes better in readability, hence created like this.

Master file filters all the common stuff in the pages and loads unique content dynamically.

Let’s copy everything from index.blade.php to master.blade.php. 

In master file remove everything between @include(“partials.navbar”) and @include(“partials.footer”). Once removed add @yield(‘content’) inbetween navbar and footer. Just like this code:

@include("partials.navbar")

@yield('content')

@include("partials.footer")

Yield is something that pulls the content on a particular page, You will understand better once we create individual pages. 

Along with this, you can add a yield() method for page title also. So that every page will be unique with the respective titles, which will help in SEO and page readability.

Replace <title>Index page<title> to <title>@yield(‘title’)</title>

This is good to go with the master page. Let’s move on to individual pages now.

Individual blade files

To make you understand better I’m taking about us page here. In about.blade.php remove everything apart from the unique content.

The first step, extent the master layout to this page. We use extends() method for that.

@extends("layouts.master")

This line of code adds all the HTML content with navbar and footer.

Now to Yield the content we have to use section() method. Just like the below code.

For @yield(‘title’) use:

@section("title")
// Title text goes here
@endsection

For @yield(‘content’) use:

@section("content")
// page content goes here
@endsection

Whatever you put inside @section(“content”) Will appear inside @yield(‘content’) and for @section(“title”) -> @yield(‘title’) respectively. Simple right!

Now the full page looks something like this.

@extends("layouts.master")

@section("title")
About us | MyWebsite
@endsection

@section("content")

  <section class="section-100">
    <div class="container">
      <h1>About Us</h1>
      <p>Description of About us page here.</p>
    </div>
  </section>

@endsection

Well done! Now we are ready to build Front-End for any massive Laravel projects. Congratulations!