Laravel 12 Project

After setting up your work environment, the fastest way to create a new Laravel application is using the Laravel CLI, which is bundled with Herd.

We start out project with a fresh Laravel 12 installation and add some additional packages to make our vinyl shop website complete.

Livewire starter kit

The Livewire starter kit is one of the authentication scaffolding option in Laravel that uses Livewire components instead of traditional JavaScript frameworks.
It provides:

• User authentication (login, registration, password reset)
• Email verification
• P- rofile management
• Pre-built Livewire components for these features
• Tailwind CSS styling
• Basic responsive layout

This starter kit simplifies the creation of interactive, dynamic interfaces without writing JavaScript directly, as Livewire handles the client-server communication behind the scenes. When you selected "livewire" during the Laravel installation process, it automatically set up this authentication system with all the necessary routes, controllers, and views.

Intervention Image

Intervention Image is a powerful PHP image handling library that makes it easy to work with images in your Laravel application. Key Features are: image resizing, cropping, and manipulation. We will use this package to manipulate uploaded images (record covers) in our vinyl shop website.

Localization (optional)

Laravel's localization features allow you to store translations in language files and easily switch between languages in your application. If you need, for example, a Dutch or French version of your website, you can use the laravel-lang package to make your website multilingual.

Installation steps for a new Laravel 12 project

IMPORTANT

Don't use uppercase letters, spaces, or special characters in the project name! This will cause problems with SSL certificates when you want a secure connection (https) for your website.

• Go to the folder C:\sites_laravel and open Git Bash
• Run the command laravel new vinyl_shop to create a new Laravel project called vinyl_shop
  • Which starter kit would you like to install?: type livewire
  • Which authentication provider do you prefer?: click Enter to choose the default Laravel's built-in authentication
  • Would you like to use Laravel Volt?: type no
  • Which testing framework do you prefer?: click Enter to choose the default Pest

Patrick@LENOVO-PATRICK MINGW64 /c/sites_laravel
$ laravel new vinyl_shop

   _                               _
  | |                             | |
  | |     __ _ _ __ __ ___   _____| |
  | |    / _` |  __/ _` \ \ / / _ \ |
  | |___| (_| | | | (_| |\ V /  __/ |
  |______\__,_|_|  \__,_| \_/ \___|_|


 Which starter kit would you like to install? [None]:
  [none    ] None
  [react   ] React
  [vue     ] Vue
  [livewire] Livewire
 > livewire
livewire

...

• When the installation is completed, you'll get a follow-up question to run npm install and npm run build
  • Click Enter to choose the default option yes

 Would you like to run npm install and npm run build? (yes/no) [yes]:
 >
 
 ...

That's it! You have created a new Laravel 12 project called vinyl_shop with the Livewire starter kit (a Laravel authentication system with Livewire components) already configured for you.
Out of the box, Herd will automatically create a host for you with the name http://vinyl_shop.test.

Go to the URL http://vinyl_shop.test to see the Laravel welcome page and at the top right, you will see a Login and Register link.

Install the necessary dependencies

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

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

Localization (optional)

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/common

The next step is to publish the default (English) files end the extra translation files for the languages you want to use, like nl for the Dutch translation files, fr for French, de for German, etc.

php artisan lang:publish
php artisan lang:add nl

After you published the language files, you should see a new lang directory in the root of your project with all the language files.

Now open the composer.json file and add "@php artisan lang:update", to the post-update-cmd scripts section so that the translations are updated automatically every time you run the composer update command.

{
  "scripts": {
    "post-update-cmd": [
      "@php artisan lang:update",     
      "@php artisan vendor:publish --tag=laravel-assets --ansi --force"
    ]
  }
}

More information about how to use the laravel-lang package can be found in the Config -> Localization section.

Keep your Laravel project up-to-date

Every week, the Laravel framework is updated with new features, bug fixes, and security patches. If you want to update your Laravel project, you can run the command composer update in a (Git Bash) terminal within the project folder to update the Laravel framework and all its dependencies to the latest 12.x.x version.

Future Considerations

WARNING

When Laravel 13 is released, the Laravel installer will be updated to create only new Laravel 13 projects.
If you want to continue using Laravel 12 in the future, it is recommended to create a new, clean, Laravel 12 project to use as a starting point for future projects.
Keep this project up-to-date with composer update and keep it in a safe place on your computer or in a cloud service like GitHub.

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

The editor has built-in support for PHP, but with third-party plugins, you get better code completion for Laravel specific features like commands, routes, views, models, etc. The Laravel Idea plugin is a paid plugin, but as a student, you can get a free license with your JetBrains educational 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
  
• Open menu File -> Settings and click on Plugins
• Install the Laravel Idea plugin
• 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.

• To enable code completion, you have to install the Alpine.js Support Plugin
  

Set (Git) bash as the default terminal

Because we use Git as our version control system, it is recommended to use the Git bash terminal in PhpStorm. This makes it easier to see on which branch you are working on.

• Go to Tools -> Terminal and select bash.exe from the dropdown menu

Create a symlink for the storage folder

Laravel uses the storage/app/public directory to store user-uploaded files like images. However, this directory isn't directly accessible from the web. To make these files publicly available, Laravel provides a simple way to create a symbolic link (symlink) from the public/storage directory to the storage/app/public directory.

This symlink allows you to reference files stored in storage/app/public using URLs like https://vinyl_shop.test/storage/covers/xxxx.jpg.

To create this symlink, run the following Artisan command in the terminal: php artisan storage:link

After running this command, you should see a message confirming that the link has been created. Now, any files you store in the storage/app/public directory will be accessible through the /storage URL path.

This feature will be particularly useful when we start uploading record cover images in our vinyl shop application.

Add the public directory as a resource root

This feature allows the editor to understand the structure of your project and provide better code completion for static assets like images and other files inside the public directory.

• Select Directories and update the configuration as shown in the image below
  • Select public and click on Resource Root
  • First click on APPLY and then on OK

Auto-start the servers

Every time you open the project in PhpStorm, you have to start the Laravel development server with the command composer run dev and the mailserver with the command mailpit in the terminal.
You can automate this processes by creating a Startup Task in the Settings of PhpStorm

• select Tools -> Startup Tasks
• development server:
  • click on the + icon
  • select composer from the dropdown menu
  • set the Name to dev server
  • select dev from the Script dropdown menu
  • set the Name to dev server
  • click on OK
• mail server:
  • click on the + icon
  • select Shell Script from the dropdown menu
  • set the Name to mail server
  • check the radio button Script text
  • set the Script text to mailpit
  • click on OK

Next time you open the project in PhpStorm, the Laravel development server will start automatically.

Enable secure connection

If you want to use e.g. your webcam, microphone, geolocation, etc. you need to use a secure connection (https instead of http). This can be done by checking the HTTPS checkbox in the Herd GUI

Change some environment settings

Most of the settings can be found in the .env file, in the root of your project. Open this file in PhpStorm and make the following changes:

• change APP_NAME to "The Vinyl Shop" (Quotes are required if a value in the .env file contains spaces!)
• change APP_URL to https://vinyl_shop.test (or to http://vinyl_shop.test/ if you have not enabled the secure connection in Herd)

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

• change the SESSION_DRIVER from database to file

SESSION_DRIVER=file        // change from 'database' to 'file'
SESSION_LIFETIME=120
SESSION_ENCRYPT=false
SESSION_PATH=/
SESSION_DOMAIN=null

• change the MAIL_MAILER. from log to smtp
• change the MAIL_PORT from 2525 to 1025
• Upate the MAIL_FROM_ADDRESS to your email address e.g. info@vinyl_shop.test

MAIL_MAILER=smtp            # change from log to smtp
MAIL_SCHEME=null
MAIL_HOST=127.0.0.1
MAIL_PORT=1025              # change from 2525 to 1025
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_FROM_ADDRESS="info@vinyl_shop.test"   # replace "hello@example.com" with your mailadres e.g. "info@vinyl_shop.test"
MAIL_FROM_NAME="${APP_NAME}"               # or your name here e.g. "John Doe"

For now, these are the only changes you need to make in the .env file. More information about the .env file can be found in the [Config -> .env file]/config/env) page.

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

Install some Chrome extensions

This are some useful Chrome extensions that can help you during the development and debugging of your Laravel project:

• 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.