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

/ August 21, 2020 / Front-End, Laravel
convert html template to laravel project

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

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.

Install Composer

Composer is a dependency manager or simply called a package manager for PHP. After Installing the Composer run the below command in command prompt.

composer global require laravel/installer

After the first command, go to the respective folder where you want to install the project. It should be in htdocs or www folder if you have installed XAMPP or WAMP respectively. Then run the below command in command prompt or any other command-line interface.

laravel new my-website

Application ready! Build something amazing. This is the message you see once the installation is done. In the command “my-website” specify the project/folder name.

Now you can see the folder named my-website. Go to the folder and type command php artisan serve.

php artisan serve

You should see the live URL http://localhost:8000 like this. Go to the browser and see if it is running successfully. 

If it’s not running or getting errors please visit Laravel official site documentation.

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.

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.

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.

Laravel routes
Laravel routes

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.

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.

Master page layout in laravel
Master page layout in laravel

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
login page code after integrating master layout
login page code after integrating master layout
html to laravel in 5 easy steps
html to laravel in 5 easy steps

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


Related Post

SASS Architecture
It is always a good idea to keep things organized. It could be your room, bookshelf, computer, table, work, codebase, office, literally anything. When things…

Front-End, SASS / August 31, 2020

Categories