Laravel E-Commerce Application Development – Assets Setup Using Laravel Mix
Laravel E-Commerce Application Development ( 27 Lessons )
In this course, you’ll learn how to create an E-Commerce Website from scratch in Laravel. The process has never been easier I’ll take you from the very beginning stages of setting up Laravel till the last steps of adding products to the cart. If you’ve good understanding & experience in PHP & MySQL then this course is for you.
see full series- Laravel E-Commerce Application Development – Introduction
- Laravel E-Commerce Application Development – Initial Project Setup
- Laravel E-Commerce Application Development – Assets Setup Using Laravel Mix
- Laravel E-Commerce Application Development – Admin Model and Migration
- Laravel E-Commerce Application Development – Backend Admin Authentication
- Laravel E-Commerce Application Development – Base Controller and Repository
- Laravel E-Commerce Application Development – Settings Section Part 1
- Laravel E-Commerce Application Development – Settings Section Part 2
- Laravel E-Commerce Application Development – Categories Section Part 1
- Laravel E-Commerce Application Development – Categories Section Part 2
- Laravel E-Commerce Application Development – Attributes Section Part 1
- Laravel E-Commerce Application Development – Attributes Section Part 2
- Laravel E-Commerce Application Development – Attributes Section Part 3
- Laravel E-Commerce Application Development – Brands Section
- Laravel E-Commerce Application Development – Products Section Part 1
- Laravel E-Commerce Application Development – Products Section Part 2
- Laravel E-Commerce Application Development – Products Section Part 3
- Laravel E-Commerce Application Development – Products Section Part 4
- Laravel E-Commerce Application Development – Frontend Login & Registration
- Laravel E-Commerce Application Development – Categories Navigation
- Laravel E-Commerce Application Development – Catalog Listing
- Laravel E-Commerce Application Development – Product Details Page
- Laravel E-Commerce Application Development – Shopping Cart
- Laravel E-Commerce Application Development – Checkout
- Laravel E-Commerce Application Development – Payment Processing
- Laravel E-Commerce Application Development – Order Management
- Laravel E-Commerce Application Development – Wrap Up
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.
Note
You will need to have NodeJS and NPM installed on your machine.
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.
assets()
.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.
Code Repository
You can find the code base of this series on Laravel eCommerce Application repository.
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.