Skip to content

01. Installation

Introduction

Our first step is to create the web app and setup our local environment.

Installing Laravel

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.

Quick Installation

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.

Laravel Welcome page

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 sqlite:

.env
DB_CONNECTION=sqlite

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.

Welcome Page over Sail

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

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:

Welcome with Auth

And you should be able to head to the /register route and create your own account:

Register Page

Then, you should be redirected to the Dashboard page:

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:

Profile 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!

Continue to creating Chirps...