Laravel Ecommerce Tutorial: Part 1, Introduction

I recently built custom ecommerce sites for a couple of clients, and I decided to make a tutorial from my experience using Laravel to build those sites.

In this tutorial, we will build a fully active Laravel Ecommerce site for a mobile phone dealership called Appleplug.Store. Appleplug sells mobile phones and accessories, and they wanted to upgrade their current ecommerce site powered by WordPress to a custom solution. View their live website at appleplug.store

In this tutorial, we will take on this project and build the ecommerce site.

This is going to be an ongoing series, starting with this introduction. In this part of the series, we will do a basic project setup and install the required tools.

What you’ll learn

By the end of this series, you will have

• Built a working Ecommerce website deployed in production

• Learned to do Test Driven Development in Laravel

• Understand Laravel beyond basic crud

• Learned to use Laravel’s Background jobs

• Learned to handle authorization

• And some other cool stuff

Minimum requirements

In order to follow along this tutorial, you will need:

A few things to note, we will be using

• Bootstrap CSS for our styling, you’re, however, welcome to use any CSS framework of your choice

• Stisla Admin template

• The Hotwired Stack (Turbo, Stimulus)

Basic setup

I’m assuming you already have composer installed, let’s start by creating a project in Laravel

composer create-project laravel/laravel --prefer-dist ecommerce

or using the laravel binary

laravel new ecommerce

This will create a new project and install all the dependencies in the ecommerce directory.

Next, let us set up our database

sudo mysql

In the MySQL console, create a user and a database and grant rights on the database to our newly created user.

create database ecommerce;

create user laravel@localhost identified by 'secure password';

grant all on ecommerce.* to laravel@localhost;

After granting rights, open the project folder in your favorite text editor, I’m using JetBrains PhpStorm, If you’re interested in using PhpStorm also checkout Jeffry Way’s video on Laracasts about how to set it up.

In your text editor, open the .env file and edit DB_XX to match the user and database we just created.

Next, open the terminal in the working directory and run our first migrations with

php artisan migrate

Other tools

Next, let’s install other tools we will be using throughout the development of this application.

First, this package allows us to use Turbo within our application.

composer require tonysm/turbo-laravel

After installing, execute the turbo:install Artisan command, which will add a couple JS dependencies to your package.json file.

Next, let’s install another package to let use Stimulus in Laravel

composer require tonysm/stimulus-laravel

After installing, execute the stimulus:install Artisan command to stimulus as dependency and basic scaffolding.

Last, let’s install some blade helper functions to use with stimulus

composer require flixtechs-labs/turbo-laravel-helpers

Now that our basic setup is done, let’s install the dependencies by running yarn or npm install and then start the dev server with

php artisan serve

In the next blog post, we will begin to actually build our ecommerce site. We will set up user authentication authorization.

Subscribe to the newsletter and get notified when I post the next tutorial