Questa repo template contiene una versione modificata del pacchetto laravel/laravel. Tale versione differisce nei seguenti punti:
PostCSSè stato rimosso- È stato installato
SASS - È stato installato
Bootstrap - La cartella
resources/cssè stata rimossa - È stata aggiunta la cartella
resources/scsscontenente il fileapp.scss - Il file
vite.config.jsè stato modificato al fine di includere i fileresources/scss/app.scsseresources/js/app.jsnella compilazione. Sono stati inoltre aggiunti gli alias per le cartelle/resources/enode_modules/bootstrap - Nella view
welcome:- Sono stati inclusi gli asset tramite direttiva
@vite - È stato rimosso lo stile preesistente
- È stato modificato il contenuto
- Sono stati inclusi gli asset tramite direttiva
- Modificare il file
package.json- Aggiornare la versione del pacchetto
"vite"alla versione"^3.0.0" - Aggiornare la versione del pacchetto
"laravel-vite-plugin"alla versione"^0.6.0"
- Aggiornare la versione del pacchetto
- Eseguire il comando
npm remove postcssper rimuovere PostCSS - Eseguire il comando
npm iper installare tutti i pacchetti di NPM (comprese le versioni aggiornate diviteelaravel-vite-plugin) - Eseguire il comando
npm i --save-dev sassper installare SASS - Rinominare la cartella
cssche si trova nella cartellaresources/inscss - Rinominare il file
app.cssche si trova nella nuova cartellaresources/scssinapp.scss - Modificare il file vite.config.js:
- Cambiare la sezione
laravel(...)in:
per includere i filelaravel({ input: [ 'resources/scss/app.scss', 'resources/js/app.js' ], refresh: true })resources/scss/app.scsseresources/js/app.jsnella compilazione (npm run dev/build)- Aggiungere la sezione:
dopo la sezioneresolve: { alias: { '~resources': '/resources/', } },plugins: [...]per creare un alias della cartella/resources/(evitandoci di doverla richiamare in questo modo tutte le volte) - Cambiare la sezione
- Aggiungere la riga import
'~resources/scss/app.scss';nel fileresources/js/app.jsper importare tramite JS il file SCSS principale - Aggiungere la direttiva
@vite('resources/js/app.js')nella sezione<head>del fileresources/views/welcome.blade.phpper includere gli asset nella view - Aggiungere le righe:
nel file
import.meta.glob([ '../img/**' ]);resources/js/app.jsper istruire Vite e Blade affinché processino correttamente i nostri asset - Aggiungere la riga
package-lock.jsonnel file.gitignoreche si trova nellarootdel progetto per evitare di pubblicarlo nella repo (è un file che viene generato ed aggiornato automaticamente dopo l'esecuzione del comandonpm i) - Installare
Bootstrap:- Eseguire il comando
npm i --save bootstrap @popperjs/coreper installare sia la parteCSSche la parteJSdiBootstrap - Aggiungere la riga
const path = require('path');nel filevite.config.jssubito prima della rigaexport default defineConfig({ - Aggiungere la riga
'~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap')nell'oggettoresolve.aliasnel filevite.config.js - Aggiungere la riga
@import "~bootstrap/scss/bootstrap";in alto nel fileresources/scss/app.scssper importare la parteCSSdi Bootstrap - Aggiungere la riga
import * as bootstrap from 'bootstrap';nel fileresources/js/app.jsper importare la parteJSdi Bootstrap
- Eseguire il comando
- Aprire questa repository su github e cliccare sul pulsante
Use this template > Create a new repository - Clonare la repository appena creata su
VS Code - Aprire il
terminale - Copiare il file
.env.examplee rinominarlo in.env - Eseguire il comando
composer install - Eseguire il comando
php artisan key:generate - Eseguire il comando
npm ionpm install - Aprire un secondo
terminale - In uno dei due terminali, eseguire il comando
php artisan serve. Nell'altro,npm run dev
- Aprire la repo su github
- Cliccare su
Settings - Spuntare la casella
Template repository
In alternativa, è stato sviluppato il pacchetto laravel-9-preset da @fabiopacificom che ci evita di effettuare tutti i passaggi.