Laravel 10 project

Make a new Laravel 10 project

Go to the folder C:\sites_laravel and open Git Bash
Start a new project where vinyl_shop is the folder of your new project and specify the desired (major) version of Laravel:
composer create-project --prefer-dist laravel/laravel:^10 vinyl_shop

WARNING - Git Bash

Make sure to create the vinyl_shop project with the Git Bash as we've noticed some version irregularities with other terminals

Install the necessary dependencies

Go inside the folder C:\sites_laravel\vinyl_shop: cd vinyl_shop

Blade icons

We will use the Blade UI kit Icons to easily make use of a variety of SVG icons in our views
We install only the Fontawesome icon, Simple icon, Phosphor icon and Hero icon icon packages:
(If these three sets are not enough, you can always install additional icon packages)
Run the command composer require blade-ui-kit/blade-icons to add the Blade UI kit Icons package
Run the command composer require owenvoke/blade-fontawesome codeat3/blade-simple-icons codeat3/blade-phosphor-icons blade-ui-kit/blade-heroicons to add the four icon packages

IMPORTANT NOTE ABOUT BLADE UI KIT ICONS!

The more packages you install, the slower the application will become!
To solve this issue, you must enable caching for the icons with the command php artisan icons:cache
This command will generate a bootstrap/cache/blade-icons.php file that contains a manifest of all the icons that are currently installed
If you want to install additional icon packages, you must run the command php artisan icons:clear to clear the cache, install the new icon packag(es) and run the command php artisan icons:cache again to generate a new manifest file

Intervention Image

The Intervention Image package is an open source PHP image handling and manipulation library that we will use to upload images (record covers) in our webserver

Run the command composer require intervention/image:^2 to install the Intervention Image package

After you have installed Intervention Image, open the Laravel config file config/app.php and add the following lines:

Line 11: in the providers array add the service provider for this package:
Line 22: in the aliases array add the facade for this package:

php

'providers' => [

    /*
     * Laravel Framework Service Providers...
     */
    ....
  
    /*
     * Package Service Providers...
     */
    Intervention\Image\ImageServiceProvider::class,  

    /*
     * Application Service Providers...
     */
    ....
]

/* ... */

'aliases' => Facade::defaultAliases()->merge([
    'Image' => Intervention\Image\Facades\Image::class,  
])->toArray(),

'providers' => [

    /*
     * Laravel Framework Service Providers...
     */
    ....
  
    /*
     * Package Service Providers...
     */
    Intervention\Image\ImageServiceProvider::class,  

    /*
     * Application Service Providers...
     */
    ....
]

/* ... */

'aliases' => Facade::defaultAliases()->merge([
    'Image' => Intervention\Image\Facades\Image::class,  
])->toArray(),

Jetstream Authentication

Run the command composer require laravel/jetstream:^4 to scaffold authentication views and routes with Jetstream
- Install the Livewire + Blade stack: php artisan jetstream:install livewire
- Run npm install && npm run dev to complete the installation

Configure Homestead

Update the file C:\vagrant\homestead\Homestead.yaml

Map the public folder of your new project

yaml

sites:
  - map: homestead.test
    to: /home/vagrant/code 
    php: "8.1"
  - map: vinyl_shop.test                        
    to: /home/vagrant/code/vinyl_shop/public 
    php: "8.1" 
  - map: php8.test

sites:
  - map: homestead.test
    to: /home/vagrant/code 
    php: "8.1"
  - map: vinyl_shop.test                        
    to: /home/vagrant/code/vinyl_shop/public 
    php: "8.1" 
  - map: php8.test

Create a new vinylshop database

yaml

databases:
  - homestead 
  - vinylshop

databases:
  - homestead 
  - vinylshop

(Re)start Homestead: use option 2 in laravel.bat

Configure PhpStorm

Open this project in PhpStorm
Wait until the project is fully indexed! (See bottom right of editor)
Switch the PHP to version: 8.1 AFTER indexing is completed (Navigate to composer.json and change the PHP version there)

Laravel Idea plugin

Laravel support is provided by means of the Laravel Idea plugin (Free to install with your JetBrains student account)
Open https://plugins.jetbrains.com/ and login with your Thomas More account
Search for Laravel Idea and click on Buy
Select the free version from the dropdown menu and click on Apply
Install the plugin in PhpStorm
Restart PhpStorm and activate the plugin
Open menu Laravel -> Generate Helper Code... to update code completion

Alpine.js plugin

Alpine.js is a tiny JavaScript framework composing Javascript behavior directly in your HTML markup and works perfectly with Livewire because it is developed by the same creator
The Alpine.js CDN is automatically injected to your project when one of the pages contains Alpine.js code
Because Alpine.js is linked via a CDN, there is no code completion for this framework
To enable code completion, you have to install the Alpine.js Support Plugin

Set (Git) bash as the default terminal

Configure the (source) directories

Configure the following Directories in PhpStorm
- If necessary: set app as Sources and prefix it with App\
- Set public as Sources
- Set public as Resource Root

Change default project settings

config/app.php

Update timezone

If you create a new Laravel application, you may notice that all created_at and other timestamp fields in the database are being saved in UTC timezone
Open the Laravel project file config/app.php and look for this entry 'timezone' => 'UTC',
Change the default timezone (UTC) to your local timezone, i.e. Europe/Brussels

php

/*
|--------------------------------------------------------------------------
| Application Timezone
|--------------------------------------------------------------------------
|
| Here you may specify the default timezone for your application, which
| will be used by the PHP date and date-time functions. We have gone
| ahead and set this to a sensible default for you out of the box.
|
*/

'timezone' => 'Europe/Brussels',

/*
|--------------------------------------------------------------------------
| Application Timezone
|--------------------------------------------------------------------------
|
| Here you may specify the default timezone for your application, which
| will be used by the PHP date and date-time functions. We have gone
| ahead and set this to a sensible default for you out of the box.
|
*/

'timezone' => 'Europe/Brussels',

.env

Open the Laravel project file .env which contains all the environment variables

Name and URL settings

Change APP_NAME to "The Vinyl Shop" (Quotes are required if a value in the .env-file contains spaces!)
Change APP_URL to http://vinyl_shop.test/

bash

APP_NAME="The Vinyl Shop"            
APP_ENV=local
APP_KEY=base64:NSKiPfWcKekv2PxLEnJO3xl7JCKmyEt5E881v1EPrnA=
APP_DEBUG=true
APP_URL=http://vinyl_shop.test/

APP_NAME="The Vinyl Shop"            
APP_ENV=local
APP_KEY=base64:NSKiPfWcKekv2PxLEnJO3xl7JCKmyEt5E881v1EPrnA=
APP_DEBUG=true
APP_URL=http://vinyl_shop.test/

Database settings

Change the database configuration

bash

DB_CONNECTION=mysql
DB_HOST=localhost           # change to localhost, try 127.0.0.1 or 192.168.56.56 if localhost doesn't work     
DB_PORT=2200                # change to 2200 (see remarks)
DB_DATABASE=vinylshop       # change to vinylshop
DB_USERNAME=homestead       # change to homestead
DB_PASSWORD=secret          # change to secret

DB_CONNECTION=mysql
DB_HOST=localhost           # change to localhost, try 127.0.0.1 or 192.168.56.56 if localhost doesn't work     
DB_PORT=2200                # change to 2200 (see remarks)
DB_DATABASE=vinylshop       # change to vinylshop
DB_USERNAME=homestead       # change to homestead
DB_PASSWORD=secret          # change to secret

REMARKS

If the changes in the .env file are not immediately visible, clear the config cache with the command php artisan config:clear or php artisan optimize:clear
If you still have problems, try to restart Homestead

Database migration

Migrate the database with the command php artisan migrate
Browse to the project via the URL http://vinyl_shop.test

Install some Chrome extensions

JSON Viewer Pro: makes JSON easy to read.
Tailwind Devtools: a sidebar pane for Tailwind CSS classes.
Livewire Devtools: for debugging Livewire applications.
Fake Filler: a form filler that fills all inputs on a page with fake/dummy data.

Update an existing project (optional)

To update an existing project to the latest (backwards compatible) Laravel version (for example the latest version of Laravel 10), use the command composer update in a (Git Bash) terminal within the project folder

TIP

To check the version of a Laravel project, open a (Git Bash) terminal inside the project folder and use the command
php artisan --version

$ php artisan --version
Laravel Framework 10.22.0

$ php artisan --version
Laravel Framework 10.22.0

Or php artisan about for more details about the project

$ php artisan about

  Environment ........................................................................................................
  Application Name .................................................................................... The Vinyl Shop
  Laravel Version ............................................................................................ 10.22.0
  PHP Version ................................................................................................. 8.1.22
  Composer Version ............................................................................................. 2.5.8
  Environment .................................................................................................. local
  Debug Mode ................................................................................................. ENABLED
  URL ............................................................................................... vinyl_shop.test/
  Maintenance Mode ............................................................................................... OFF

  Cache ..............................................................................................................
  Config .................................................................................................. NOT CACHED
  Events .................................................................................................. NOT CACHED
  Routes .................................................................................................. NOT CACHED
  Views ....................................................................................................... CACHED

  Drivers ............................................................................................................
  Broadcasting ................................................................................................... log
  Cache ......................................................................................................... file
  Database ..................................................................................................... mysql
  Logs ................................................................................................ stack / single
  Mail .......................................................................................................... smtp
  Queue ......................................................................................................... sync
  Session ................................................................................................... database

  Livewire ...........................................................................................................
  Livewire .................................................................................................... v3.0.1

$ php artisan about

  Environment ........................................................................................................
  Application Name .................................................................................... The Vinyl Shop
  Laravel Version ............................................................................................ 10.22.0
  PHP Version ................................................................................................. 8.1.22
  Composer Version ............................................................................................. 2.5.8
  Environment .................................................................................................. local
  Debug Mode ................................................................................................. ENABLED
  URL ............................................................................................... vinyl_shop.test/
  Maintenance Mode ............................................................................................... OFF

  Cache ..............................................................................................................
  Config .................................................................................................. NOT CACHED
  Events .................................................................................................. NOT CACHED
  Routes .................................................................................................. NOT CACHED
  Views ....................................................................................................... CACHED

  Drivers ............................................................................................................
  Broadcasting ................................................................................................... log
  Cache ......................................................................................................... file
  Database ..................................................................................................... mysql
  Logs ................................................................................................ stack / single
  Mail .......................................................................................................... smtp
  Queue ......................................................................................................... sync
  Session ................................................................................................... database

  Livewire ...........................................................................................................
  Livewire .................................................................................................... v3.0.1

Localisation (optional)

You have a non-English website or a multilingual website?
Then you can use the laravel-lang package to make your website multilingual
Install the required translation packages with the command:

composer require laravel-lang/lang laravel-lang/publisher laravel-lang/attributes --dev

composer require laravel-lang/lang laravel-lang/publisher laravel-lang/attributes --dev

The next step is to publish the default (English) files end the extra translation files for the languages you want to use
For example, to publish the Dutch translation files, use the command:

php artisan lang:publish
php artisan lang:add nl

php artisan lang:publish
php artisan lang:add nl

More information about the Laravel Localization can be found in the Config -> Localization section

Laravel 10 project ​

Make a new Laravel 10 project ​

Install the necessary dependencies ​

Blade icons ​

Intervention Image ​

Jetstream Authentication ​

Configure Homestead ​

Configure PhpStorm ​

Laravel Idea plugin ​

Alpine.js plugin ​

Set (Git) bash as the default terminal ​

Configure the (source) directories ​

Change default project settings ​

config/app.php ​

Update timezone ​

.env ​

Name and URL settings ​

Database settings ​

Database migration ​

Install some Chrome extensions ​

Update an existing project (optional) ​

Localisation (optional) ​