Laravel E-Commerce Application Development – Assets Setup Using Laravel Mix

This is the second part of Laravel E-Commerce Application Development tutorial series, in this part, we will set up the static assets using Laravel Mix.

You should have your e-commerce application project on your machine, which we set up in the last part of this series.

.gitigonre Changes

First thing first, we have to add a couple of lines in our .gitignore file. This file is used to list all folders and files which we don’t want to add to our Git repository. It’s always helpful to think ahead about any folders and files which you want to exclude from Git.

So let’s start, we know we will be building backend (Admin Section) and frontend (Store Website) in this series. So we will have to manage our backend assets and frontend assets. It’s entirely up to you how you want to manage your assets. I will be showing how I will manage the assets for this project (normally I use the modular structure for a project but this series is to help newbies so I will keep it simple).

Having said that, we will have to manage two folders for static assets in our public/ folder named backend and frontend (you can name them whatever you are fancy).

Also, we will have another folder named uploads where we will be uploading all our products and other images from the backend.

Open you .gitignore file from the root of your application and add a couple of below lines in it.

.idea
/public/backend
/public/frontend
/public/uploads

The first line is adding .idea folder, you have to add this line if you are using PHPStorm IDE. Next, we are excluding backend, frontend and uploads folder from the Git.

Copying Assets into the Project

Managing static assets is the most tedious job when creating a project. Luckily, we don’t have to process any SASS, LESS or CSS files so we will be just copying pasting the assets to the project. So let’s start adding the assets to the project.

In the last part of this series, I shared the repository through which I shared the starting templates for both frontend and backend. Download the repository from here and unzip the repository folder anywhere on your computer.

From ecommerce-templates/vali-admin folder, copy css and js folders and paste them in resources/backend. You will need to create backend folder inside the resources folder.

Next, from ecommerce-templates/ui-ecommerce folder, copy css, fonts, images, js and plugins folders and paste them in resources/frontend folder. You will need to create frontend folder.

After copying assets into the project, your resources folder structure will look like below.

Installing Laravel Mix

Now we need to install the Laravel Mix, go to your terminal and run the below command within the root of your project.

npm install

When Laravel Mix is installed, move on to the next step.

Setting Up webpack.mix.js File

Now we need to configure the webpack.mix.js file to copy our assets from the resources foldet to public folder. Open webpack.mix.js file and replace with below:

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.copyDirectory('resources/backend', 'public/backend');
mix.copyDirectory('resources/frontend', 'public/frontend');

// mix.js('resources/js/app.js', 'public/js')
//    .sass('resources/sass/app.scss', 'public/css');

As you can see in the above code we are simply copying directories to the public folder. I have commented out the mix.js, which we will use in the future to compile our VueJS Components.

Compiling Assets

After updating webpack.mix.js file, go to terminal and run:

npm run watch

After running above command, Laravel Mix will copy the folders from resources to public folder.

So far, we are done with the Laravel Mix setup.

Setting Up Admin Route

Now we will start making the layout files for our admin section (for frontend we will do this when we will start working on frontend). Open your routes/web.php file and add below route in it.

Route::view('/admin', 'admin.dashboard.index');

Now if you run, php artisan serve which will fire up a PHP server and you will be able to access you site from localhost:8000 in your browser. Try to visit /admin and you will get an error View [admin.dashboard.index] not found..

Setting Up Admin Layout and Partials

It’s time to create some blade views for backend area. We will create a new folder named admin inside resources/views folder. Inside admin folder, we will create a new file called app.blade.php.

Inside app.blade.php file, add below markup:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>@yield('title') - {{ config('app.name') }}</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" type="text/css" href="{{ asset('backend/css/main.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('backend/css/font-awesome/4.7.0/css/font-awesome.min.css') }}"/>
</head>
<body class="app sidebar-mini rtl">
    @include('admin.partials.header')
    @include('admin.partials.sidebar')
    <main class="app-content">
        @yield('content')
    </main>
    <script src="{{ asset('backend/js/jquery-3.2.1.min.js') }}"></script>
    <script src="{{ asset('backend/js/popper.min.js') }}"></script>
    <script src="{{ asset('backend/js/bootstrap.min.js') }}"></script>
    <script src="{{ asset('backend/js/main.js') }}"></script>
    <script src="{{ asset('backend/js/plugins/pace.min.js') }}"></script>
</body>
</html>

In this layout file, you can see we are specifying the placeholder for a title using the @yield('title') directive and then adding the application name.

This layout depends on two partial views header and sidebar. Let’s create a folder inside resources/admin folder called partials and add two new files named header.blade.php and sidebar.blade.php.

Open header.blade.php file and add below markup:

<header class="app-header">
    <a class="app-header__logo" href="#">{{ config('app.name') }}</a>
    <a class="app-sidebar__toggle" href="#" data-toggle="sidebar" aria-label="Hide Sidebar"></a>
    <ul class="app-nav">
        <li class="app-search">
            <input class="app-search__input" type="search" placeholder="Search" />
            <button class="app-search__button">
                <i class="fa fa-search"></i>
            </button>
        </li>
        <li class="dropdown">
            <a class="app-nav__item" href="#" data-toggle="dropdown" aria-label="Show notifications"><i class="fa fa-bell-o fa-lg"></i></a>
            <ul class="app-notification dropdown-menu dropdown-menu-right">
                <li class="app-notification__title">
                    You have 4 new notifications.
                </li>
                <div class="app-notification__content">
                    <li>
                        <a class="app-notification__item" href="javascript:;">
                            <span class="app-notification__icon">
                                <span class="fa-stack fa-lg">
                                    <i class="fa fa-circle fa-stack-2x text-danger"></i>
                                    <i class="fa fa-hdd-o fa-stack-1x fa-inverse"></i>
                                </span>
                            </span>
                            <div>
                                <p class="app-notification__message">
                                    Mail server not working
                                </p>
                                <p class="app-notification__meta">5 min ago</p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a class="app-notification__item" href="javascript:;">
                            <span class="app-notification__icon">
                                <span class="fa-stack fa-lg">
                                    <i class="fa fa-circle fa-stack-2x text-success"></i>
                                    <i class="fa fa-money fa-stack-1x fa-inverse"></i>
                                </span>
                            </span>
                            <div>
                                <p class="app-notification__message">
                                    Transaction complete
                                </p>
                                <p class="app-notification__meta">2 days ago</p>
                            </div>
                        </a>
                    </li>
                </div>
                <li class="app-notification__footer">
                    <a href="#">See all notifications.</a>
                </li>
            </ul>
        </li>
        <!-- User Menu-->
        <li class="dropdown">
            <a class="app-nav__item" href="#" data-toggle="dropdown" aria-label="Open Profile Menu"><i class="fa fa-user fa-lg"></i></a>
            <ul class="dropdown-menu settings-menu dropdown-menu-right">
                <li>
                    <a class="dropdown-item" href="page-user.html"><i class="fa fa-cog fa-lg"></i> Settings</a>
                </li>
                <li>
                    <a class="dropdown-item" href="page-user.html"><i class="fa fa-user fa-lg"></i> Profile</a>
                </li>
                <li>
                    <a class="dropdown-item" href="page-login.html"><i class="fa fa-sign-out fa-lg"></i> Logout</a>
                </li>
            </ul>
        </li>
    </ul>
</header>

Now open sidebar.blade.php file and add below markup:

<div class="app-sidebar__overlay" data-toggle="sidebar"></div>
<aside class="app-sidebar">
    <div class="app-sidebar__user">
        <div>
            <p class="app-sidebar__user-name">John Doe</p>
            <p class="app-sidebar__user-designation">Frontend Developer</p>
        </div>
    </div>
    <ul class="app-menu">
        <li>
            <a class="app-menu__item active" href="#"><i class="app-menu__icon fa fa-dashboard"></i>
                <span class="app-menu__label">Dashboard</span>
            </a>
        </li>
        <li class="treeview">
            <a class="app-menu__item" href="#" data-toggle="treeview"><i class="app-menu__icon fa fa-users"></i>
                <span class="app-menu__label">Users</span>
                <i class="treeview-indicator fa fa-angle-right"></i>
            </a>
            <ul class="treeview-menu">
                <li>
                    <a class="treeview-item" href="#"><i class="icon fa fa-circle-o"></i> Admin Users</a>
                </li>
                <li>
                    <a class="treeview-item" href="#" target="_blank" rel="noopener noreferrer"><i class="icon fa fa-circle-o"></i> Roles</a>
                </li>
                <li>
                    <a class="treeview-item" href="#"><i class="icon fa fa-circle-o"></i> Permissions</a>
                </li>
            </ul>
        </li>
        <li>
            <a class="app-menu__item" href="#"><i class="app-menu__icon fa fa-cogs"></i>
                <span class="app-menu__label">Settings</span>
            </a>
        </li>
    </ul>
</aside>

Until now we have set up the layout and its partials, still if you try to visit /admin URL you will get the same error. We will add a dashboard view in the next section.

Creating Dashboard View

Inside resources/admin folder, create a new folder named dashboard and add a new file called index.blade.php. In this file add below markup:

@extends('admin.app')
@section('title') Dashboard @endsection
@section('content')
    <div class="app-title">
        <div>
            <h1><i class="fa fa-dashboard"></i> Dashboard</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 col-lg-3">
            <div class="widget-small primary coloured-icon">
                <i class="icon fa fa-users fa-3x"></i>
                <div class="info">
                    <h4>Users</h4>
                    <p><b>5</b></p>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-lg-3">
            <div class="widget-small info coloured-icon">
                <i class="icon fa fa-thumbs-o-up fa-3x"></i>
                <div class="info">
                    <h4>Likes</h4>
                    <p><b>25</b></p>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-lg-3">
            <div class="widget-small warning coloured-icon">
                <i class="icon fa fa-files-o fa-3x"></i>
                <div class="info">
                    <h4>Uploades</h4>
                    <p><b>10</b></p>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-lg-3">
            <div class="widget-small danger coloured-icon">
                <i class="icon fa fa-star fa-3x"></i>
                <div class="info">
                    <h4>Stars</h4>
                    <p><b>500</b></p>
                </div>
            </div>
        </div>
    </div>
@endsection

In this view we are extending the layout file app.blade.php and passing the title to view. Next we are passing the main content using the @section('content') directive. Nothing fancy, simple blade view.

Now if you visit /admin URL, you will be presented with a webpage like below.

Conclusion

So far, we have added the assets to our project and set up the admin layout using Laravel blade layouts. In the next part, we will start designing our database using Laravel Migrations.

I am trying my best to keep these tutorials as simple as possible and taking baby steps. Keep following this series, and we will have a fully functional application by the end of this series.

If you have any questions or suggestions, please leave them in the comments box below and I will try to answer them ASAP.