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.
How are you Sir…
How to change error message whoops looks like something went wrong error text in laravel Plz help me
where is the path in this page
You have to catch the exception and throw your logic in it. Look into app/Exeptions/Handler.php file for more information.
Thanks You Sir..
I am waiting for your Ans thanks
what if you use public Storage folder instead of a Upload?
Yes, you can do that, I just kept it simple for any beginners who are just embarking on Laravel framework.
hi thanks for everything
but what is other lessons ?
Hi,
A new lesson will be published tomorrow.
You can find all the lessons of this series Laravel E-commerce Application Development
Thanks
Hi
This is cool tutorial and very interesting . I was surprised how to integrate the admin panel with the laravel mix .I have watched many tutorial no one is doing like you. We’re waiting for more tutorial
Thanks, Bernard.
when do you post next chapter ?
Next post will be published today.
Thanks
i am getting this error when i entered localhost:8000 in my web browser
error”
Forbidden
You don’t have permission to access /8000 on this server.
”
how can i solve this?
Make sure your 8000 port is free on the server.
i killed the task running on that port number and tried but still didnt work it shows the following error
This site can’t be reached localhost refused to connect.
Did you mean http://localhost8000.com/?
Search Google for localhost 8000
ERR_CONNECTION_REFUSED
Hi! Hamisu
Another option is to run the server in a different port, for example: 8080
In the command line type: php artisan serve –port=8080
Nice
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:
i don’t understand this, i found this webpack.mix.js in the root folder, please explain, tks all
Check this post.
https://www.larashout.com/laravel-mix
php -S localhost:8000 -t public
run this
This challenge is the best . thank’s for this shere.
I run my localhost like http://localhost:8000/admin, after running this, I can see full admin page without design I meant apart from CSS. Now, my question is, why this CSS part is missing, only showing HTML part my admin page? I keep my folder inside my e-commerce project like resources->views->admin->{(dashboard->index.blade.php) and (partials->header.blade.php and sidebar.blade.php)
Make sure you add the CSS and JS files with
assets('')
helper function.I have the same problem.
I have the following folder structure:
/resources/backend/css
/resources/backend/js
/resources/frontend/css
/resources/frontend/js
and following assets(”) in my
/resources/views/admin/app.blade.php
as shown in your example
What is the exact problem?
the result is
https://prnt.sc/pdaz6c
You need to compile the assets which will copy the assets from the resources folder to the public folder.
Thank you for your help.
I have some problems with my NodeJS and NPM installation and compilation problems as a result.
Thank you for help
Hi
Your tutorials are grate. I have a suggestions that you can use @section(‘title’, ‘Dashboard’) instead if this @section(‘title’) Dashboard @endsection. It’s so simple and handy.
Thanks
I am sure he knows that option, but he just wanted to keep it simple for beginners to grasp.
Otherwise, thanks man.
i so much love what i am reading…wishing i saw it earlier .Thanks for sharing.
Thank you for this great tutorial, specially for showing us how to come up with a structured approach.
One quick question about the frontend. What is the bootstrap version you are using? because I saw some different css classes (app-header, app-header__logo for instance) you are using for frontend which i was unable to find in getbootstrap.com or mdbootstrap.com.
Cheers
It’s Bootstrap 4.
Hello Sir am following your tutorial and it’s great till now am gonna end it but my I ask you can I extend this eCommerce to be a multi-vendor shop where other sellers beside admin can their items just like Epay
Yest you can but it will take a lot more effort, this was just a bare bone project.
Thanks, this is cool stuff man!
Hello, I’m stuck in this part:
Route::view(‘/admin’, ‘admin.dashboard.index’);
it doesn’t work, says 404 not found
However if i do this Route::view(‘/’, ‘admin.dashboard.index’);
it works. How to route to /admin?
It’s because you might have the admin folder inside public folder.
1) Let’s create a folder inside resources/admin folder called partials => resources/views/admin
2) Inside resources/admin folder, create a new folder named dashboard => resources/views/admin
I’m following this series. Its good for quickly understand the whole eCommerce application idea in laravel.
You need to make 1 article for upgrade this application code into laravel 8 as well..
Thanks, I will be posting a Laravel 8 upgrade guide soon for this series.
Sorry I was able to figure it out