bootcamp.laravel.com Open in urlscan Pro
2606:4700:10::6816:17e  Public Scan

Form analysis
0 forms found in the DOM

Text Content

Skip to content
Bootcamp


 * #INTRODUCTION


 * #BUILD CHIRPER WITH BLADE
   
   * Installation
   * Creating Chirps
   * Showing Chirps
   * Editing Chirps
   * Deleting Chirps
   * Notifications & Events


 * #BUILD CHIRPER WITH LIVEWIRE
   
   * Installation
   * Creating Chirps
   * Showing Chirps
   * Editing Chirps
   * Deleting Chirps
   * Notifications & Events


 * #BUILD CHIRPER WITH INERTIA
   
   * Installation
   * Creating Chirps
   * Showing Chirps
   * Editing Chirps
   * Deleting Chirps
   * Notifications & Events


 * #DEPLOYING


 * #CONCLUSION


Bootcamp



 * #INTRODUCTION


 * #BUILD CHIRPER WITH BLADE
   
   * Installation
   * Creating Chirps
   * Showing Chirps
   * Editing Chirps
   * Deleting Chirps
   * Notifications & Events


 * #BUILD CHIRPER WITH LIVEWIRE
   
   * Installation
   * Creating Chirps
   * Showing Chirps
   * Editing Chirps
   * Deleting Chirps
   * Notifications & Events


 * #BUILD CHIRPER WITH INERTIA
   
   * Installation
   * Creating Chirps
   * Showing Chirps
   * Editing Chirps
   * Deleting Chirps
   * Notifications & Events


 * #DEPLOYING


 * #CONCLUSION


LEARN THE
PHP FRAMEWORK
FOR WEB ARTISANS

Taylor Otwell
a few seconds ago

Let's build something with Laravel!


01. INTRODUCTION

Welcome to the Laravel Bootcamp! In this guide we will walk through building a
modern Laravel application from scratch. To explore the framework, we'll build a
microblogging platform called Chirper.


#CHOOSE YOUR OWN ADVENTURE:
BLADE, LIVEWIRE, OR JAVASCRIPT

Laravel is incredibly flexible, allowing you to build your front-end with a wide
variety of technologies to suit your needs. For this tutorial, we have prepared
a few choices for you.


#BLADE

Blade is the simple, yet powerful templating engine that is included with
Laravel. Your HTML will be rendered server-side, making it a breeze to include
dynamic content from your database. We'll also be using Tailwind CSS to make it
look great!

If you're not sure where to start, we think Blade is the most straight-forward.
You can always come back and build Chirper again using Livewire or JavaScript.

welcome.blade.php
Greetings {{ $friend }}, let's build Chirper with Blade!

Build Chirper with Blade


#LIVEWIRE

Livewire is a powerful way of building dynamic, reactive, front-end UIs using
just PHP. Honestly, you won't believe it's not JavaScript. If you're a Laravel
developer, you'll feel right at home.

Class Functional
counter.blade.php
<?php
 
use Livewire\Volt\Component;
 
new class extends Component
{
    public int $count = 0;
 
    public function increment(): void
    {
        $this->count++;
    }
}; ?>
 
<div>
    <h1>{{ $count }}</h1>
    <button wire:click="increment">+</button>
</div>

counter.blade.php
<?php
 
use function Livewire\Volt\{state};
 
state(['count' => 0]);
 
$increment = fn () => $this->count++;
 
?>
 
<div>
    <h1>{{ $count }}</h1>
    <button wire:click="increment">+</button>
</div>

Build Chirper with Livewire


#JAVASCRIPT & INERTIA

If you'd like to use JavaScript, we will be providing code samples for both Vue
and React. We'll also be using Inertia to connect it all up and Tailwind CSS to
make it look great!

If you're not sure which to select, we're big fans of Vue since it is
beginner-friendly and extremely powerful. After you've finished the Bootcamp,
you can always try it again with the other stack.

Go ahead and choose your stack:

Vue React
Welcome.vue
<template>
<Welcome>
    Hey {{ friend }}, let's build Chirper with Vue!
</Welcome>
</template>

Welcome.jsx
<Welcome>
    Nice to see you {friend}, let's build Chirper with React!
</Welcome>

At any point you may view the code for either framework to see what life is like
on the other side, just be sure not to mix the code in your project.

Build Chirper with JavaScript and Inertia

Laravel is a web application framework with expressive, elegant syntax. We
believe development must be an enjoyable and creative experience to be truly
fulfilling. Laravel attempts to take the pain out of development by easing
common tasks used in most web projects.

 * 
 * 
 * 
 * 

Laravel is a Trademark of Laravel Holdings Inc.
Copyright © Laravel Holdings Inc.

Code highlighting provided by Torchlight