Creare un Ecommerce con Laravel, Inertia.js e React
L'e-commerce è diventato un elemento essenziale del panorama commerciale moderno. La capacità di vendere prodotti o servizi online ha aperto un mondo di opportunità per imprenditori e piccole imprese. La realizzazione di un e-commerce, tuttavia, può essere una sfida complessa.
In questa serie di post, vedremo il processo di creazione di un e-commerce completamente funzionale utilizzando tre potenti tecnologie: Laravel, Inertia.js e React.
Presumo che tutti conoscano o abbiano quantomeno sentito parlare di Laravel e React, per quanto riguarda Inertia.js si tratta di una libreria JavaScript che offre un modo moderno e flessibile per costruire applicazioni web interattive. La sua caratteristica distintiva è quella di combinare il potere di framework JavaScript come React o Vue.js con l'eleganza e la semplicità di framework back-end come Laravel.
In questa prima parte ci occuperemo di impostare il progetto, mentre nei prossimi articoli andremo a gestire gli utenti con i relativi ruoli e autorizzazioni, creeremo categorie, brand e prodotti e tutte le funzionalità che un e-commerce deve avere per essere definito tale.
Così, senza ulteriori indugi, iniziamo il nostro viaggio verso la creazione di un e-commerce.
Impostiamo il progetto
Iniziamo creando un nuovo progetto laravel
laravel new ecommerceSpostiamoci nella cartella del progetto appena creato e aggiungiamo al progetto laravel breeze. Si tratta di un pacchetto di autenticazione e scaffolding. Questo pacchetto oltre a semplificare notevolmente la creazione di un sistema di autenticazione completamente funzionante ci offre anche il vantaggio di utilizzare Tailwind CSS e ci fornisce l'opzione di integrare React con Inertia.js, togliendoci l'incombenza di dover installare quest'ultimo manualmente.
composer require laravel/breeze --devDopo che composer ha installato il pacchetto lanciamo il comando
php artisan breeze:installCi verrà chiesto quale stack vogliamo installare, selezioniamo React with Inertia.
Scegliamo None alla richiesta se vogliamo qualche funzionalità opzionale e PHPUnit alla domanda successiva.
Procediamo installando alcuni pacchetti che utilizzeremo più avanti durante lo sviluppo:
npm install framer-motionFramer motion è una libreria per l'animazione dei componenti in React
npm install react-responsiveQuesto pacchetto ci permetterà di utilizzare le media queries in React.
npm install react-icons -–saveReact Icons ci consentirà di importare le icone nel nostro progetto.
Tocca ora a dei pacchetti per tailwind css; Il primo pacchetto che andremo ad installare è un plugin che ordina automaticamente le classi tailwind
npm install -D prettier prettier-plugin-tailwindcsscreiamo un file .prettierrc all'interno del progetto il cui contenuro sarà
{
"tabWidth": 4,
"singleQuote": true,
"plugins": ["prettier-plugin-tailwindcss"],
"tailwindConfig": "./tailwind.config.js"
}
Il secondo pacchetto ci permette di modificare lo stile delle scrollbar
npm install -D tailwind-scrollbarApriamo il file tailwind.config.js e nella sezione plugin aggiungiamo
plugins: [
...
require('tailwind-scrollbar'),
],
Apriamo il file app.blade.php e aggiungiamo al tag html queste classi
<html class="bg-gray-100/50 scrollbar-thin scrollbar-track-slate-100 scrollbar-thumb-sky-700" lang="{{ str_replace('_', '-', app()->getLocale()) }}">Proseguiamo installando flowbite react. Si tratta di una libreria open source di componenti UI basati su tailwind
npm install flowbite-reactModifichiamo il file tailwind.config.js come segue
content: [
...,
'node_modules/flowbite-react/**/*.{js,jsx,ts,tsx}'
],
plugins: [..., require('flowbite/plugin')],L'ultimo pacchetto che andremo ad installare ci permette di tradurre la nostra app in italiano
composer require laravel-lang/common --dev
php artisan lang:add it
php artisan lang:updatePer abilitare la lingua italiana andiamo nel file config/app.php e modifichiamo il locale in it
'locale' => 'it',Possiamo ora creare il database
mysql -u root -p
create database ecommerce;
quitModifichiamo il file .env nella sezione database per permettere la connessione
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=ecommerce
DB_USERNAME=root
DB_PASSWORD=la_tua_passwordL'ultimo passaggio, del tutto opzionale, è quello di creare un Makefile che ci permettà di lanciare simultaneamente il server vite e quello laravel
Creiamo un file Makefile e al suo interno inseriamo questo snippet
dev:
@echo "Starting Dev Environment"
npm run dev &
php artisan serve
Ora da terminale lanciamo
make devNota: Se sul vostro sitema non è presente make installate chocolatey seguendo questa guida, aprite la powershell di windows come amministratore e date il comando choco install make .
Vistitando l'indirizzo 127.0.0.1:8000 dovremmo vedere la classica pagina di benvenuto di laravel con i collegamenti per effettuare il login e la registrazione
Nel prossimo post andremo a lavorare sugli utenti, aggiungeremo un comando per dare il ruolo di super admin ad un utente e utilizzeremo un paccheto per creare la logica di autorizzazione.
