Laravel 11 project

Make a new Laravel 11 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:^11 vinyl_shop
Congratulations! You have created your first Laravel 11 project, and it's already configured with with Herd.
Go to the UTL http://vinyl_shop.test to see the Laravel welcome page

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-laravel to install the Intervention Image package for Laravel
Run the command php artisan vendor:publish --provider="Intervention\Image\Laravel\ServiceProvider" to publish the configuration file for the Intervention Image package

Jetstream Authentication

Run the command composer require laravel/jetstream:^5 to scaffold authentication views and routes with Jetstream
- Install the Livewire + Blade stack: php artisan jetstream:install livewire
- Click Enter to confirm that you want to re-run your migrations
Reload the homepage http://vinyl_shop.test. At the top right, you will see a Login and Register link.
Register yourself as a new user and log in to the application (password must be at least 8 characters long)
After registration, you will be redirected to the dashboard page where you can see your name and a dropdown menu with the Profile and Logout links

Localization (optional)

The vinyl shop website is only available in English.
This section is optional and only needed if you want to make your website multilingual,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

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

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

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.3 AFTER indexing is completed

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
- Set public as Sources and as Resource Root

Change some environment settings

Most of the settings can be found in the .enc_ file, in the root of your project.
Open, in the root of your project, the .env file which contains all the environment variables
- Change APP_NAME to "The Vinyl Shop" (Quotes are required if a value in the .env file contains spaces!)
- Change APP_TIMEZONE to your local timezone, i.e. Europe/Brussels
- Change APP_URL to http://vinyl_shop.test/
  php
```
APP_NAME="The Vinyl Shop"
APP_ENV=local
APP_KEY=base64:NSKiPfWcKekv2PxLEnJO3xl7JCKmyEt5E881v1EPrnA=
APP_DEBUG=true
APP_TIMEZONE=Europe/Brussels
APP_URL=http://vinyl_shop.test/
```
  1
  2
  3
  4
  5
  6

REMARK

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

Https: secure connection (optional)

If you want to use e.g. your webcam, microphone, geolocation, etc. you need to use a secure connection, even in development
To do this, you need to serve your application over https instead of http
All you have to do is the website in Herd and check the HTTPS checkbox

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 11), 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 11.13.0

Or php artisan about for more details about the project

$ php artisan about

  Environment .........................................................................
  Application Name ..................................................... The Vinyl Shop
  Laravel Version ............................................................. 11.13.0
  PHP Version ................................................................... 8.3.8
  Composer Version .............................................................. 2.7.7
  Environment ................................................................... local
  Debug Mode .................................................................. ENABLED
  URL ................................................................ vinyl_shop.test/
  Maintenance Mode ................................................................ OFF
  Timezone ............................................................ Europe/Brussels
  Locale ........................................................................... en

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

  Drivers .............................................................................
  Broadcasting .................................................................... log
  Cache ...................................................................... database
  Database ..................................................................... sqlite
  Logs ................................................................. stack / single
  Mail ............................................................................ log
  Queue ...................................................................... database
  Session .................................................................... database

  Livewire ............................................................................
  Livewire ..................................................................... v3.5.1

Laravel 11 project ​

Make a new Laravel 11 project ​

Install the necessary dependencies ​

Blade icons ​

Intervention Image ​

Jetstream Authentication ​

Localization (optional) ​

Configure PhpStorm ​

Laravel Idea plugin ​

Alpine.js plugin ​

Set (Git) bash as the default terminal ​

Configure the (source) directories ​

Change some environment settings ​

Https: secure connection (optional) ​

Install some Chrome extensions ​

Update an existing project (optional) ​