Our first step is to create the web app and setup our local environment.
There are two paths in here: one uses a local installation setup, and another one that uses Laravel Sail. Choose how you're going to run the app locally as you feel more comfortable.
If you have already installed PHP and Composer on your local machine, you may create a new Laravel project via Composer:
composer create-project laravel/laravel turbo-chirper
After the project has been created, start Laravel's local development server using the Laravel's Artisan CLI serve command:
cd turbo-chirper/ php artisan serve
Once you have started the Artisan development server, your application will be accessible in your web browser at http://localhost:8000.
For simplicity, you may use SQLite to store your application's data. To instruct Laravel to use SQLite instead of MySQL, update your new application's
.env file and remove all of the
DB_* environment variables except for the
DB_CONNECTION variable, which should be set to
Installing via Docker
If you do not have PHP installed locally, you may develop your application using Laravel Sail, a light-weight command-line interface for interacting with Laravel's default Docker development environment, which is compatible with all operating systems. Before we get started, make sure to install Docker for your operating system. For alternative installation methods, check out Laravel's full installation guide.
The easiest way to install Laravel is using Laravel's
laravel.build service, which will download and create a fresh Laravel application for you. Launch a terminal and run the following command:
curl -s "https://laravel.build/turbo-chirper" | bash
Sail installation may take several minutes while Sail's application containers are built on your local machine.
By default, the installer will pre-configure Laravel Sail with a number of useful services for your application, including a MySQL database server. You may customize the Sail services if needed.
After the project has been created, you can navigate to the application directory and start Laravel Sail:
cd turbo-chirper ./vendor/bin/sail up -d
When developing applications using Sail, you may execute Artisan, NPM, and Composer commands via the Sail CLI instead of invoking them directly:
./vendor/bin/sail php --version./vendor/bin/sail artisan --version./vendor/bin/sail composer --version./vendor/bin/sail npm --version
Once the application's Docker containers have been started, you can access the application in your web browser at: http://localhost.
Installing Turbo Breeze
Next, we'll give our application a head-start by installing Turbo Breeze, a minimal, simple imeplementation of all of Laravel's authentication features, including login, registration, password reset, email verification, and password confirmation. Once installed, you are welcome to customize the components to suit your needs.
Turbo Breeze offers two stack options:
turbo, which comes with Importmap Laravel and TailwindCSS Laravel installed for a Node-less setup, and a
turbo-vite option, which relies on having Node and NPM. For this tutorial, we'll be using
Open a new terminal in your
turbo-chirper project directory and install your chosen stack with the given commands:
composer require hotwired-laravel/turbo-breeze:1.0.0-beta12 --dev php artisan turbo-breeze:install turbo --dark
Turbo Breeze will install and configure your front-end dependencies for you. It should have built the initial version of our assets for us, so all we got to do now is migrate the database:
php artisan migrate
The welcome page should now have the Login and Register links at the top:
And you should be able to head to the
/register route and create your own account:
Then, you should be redirected to the Dashboard page:
This Dashboard page is protected by Laravel's auth middleware, so only authenticated users can access it. The registration process automatically authenticates us.
Turbo Breeze is a fork of Laravel Breeze, but customized to work better in a Hotwired context. It comes with all the same components as Laravel Breeze does, except they were rewritten in Stimulus. For an introduction to Stimulus, head out to the Stimulus Handbook.
There are a couple differences between Turbo Breeze and Larave Breeze. In Laravel Breeze, your name at the top of the navigation bar is a dropdown. In Turbo Breeze, it's a link to a page with the menu:
In Laravel Breeze, all the profile forms are rendered in the same page. In Turbo Breeze, each one has its own dedicated page. That's not a requirement for Hotwired apps, but it works best in a mobile context. We'll see more about that later in this bootcamp.
Now we're ready for our first feature!