415 lines
12 KiB
Markdown
415 lines
12 KiB
Markdown
# Frontend
|
||
|
||
* Introduction
|
||
* Using PHP
|
||
* PHP and Blade
|
||
* Livewire
|
||
* Starter Kits
|
||
* Using React or Vue
|
||
* Inertia
|
||
* Starter Kits
|
||
* Bundling Assets
|
||
|
||
## Introduction
|
||
|
||
Laravel is a backend framework that provides all of the features you need to
|
||
build modern web applications, such as [routing](/docs/12.x/routing),
|
||
[validation](/docs/12.x/validation), [caching](/docs/12.x/cache),
|
||
[queues](/docs/12.x/queues), [file storage](/docs/12.x/filesystem), and more.
|
||
However, we believe it's important to offer developers a beautiful full-stack
|
||
experience, including powerful approaches for building your application's
|
||
frontend.
|
||
|
||
There are two primary ways to tackle frontend development when building an
|
||
application with Laravel, and which approach you choose is determined by
|
||
whether you would like to build your frontend by leveraging PHP or by using
|
||
JavaScript frameworks such as Vue and React. We'll discuss both of these
|
||
options below so that you can make an informed decision regarding the best
|
||
approach to frontend development for your application.
|
||
|
||
## Using PHP
|
||
|
||
### PHP and Blade
|
||
|
||
In the past, most PHP applications rendered HTML to the browser using simple
|
||
HTML templates interspersed with PHP `echo` statements which render data that
|
||
was retrieved from a database during the request:
|
||
|
||
|
||
|
||
1<div>
|
||
|
||
2 <?php foreach ($users as $user): ?>
|
||
|
||
3 Hello, <?php echo $user->name; ?> <br />
|
||
|
||
4 <?php endforeach; ?>
|
||
|
||
5</div>
|
||
|
||
|
||
<div>
|
||
<?php foreach ($users as $user): ?>
|
||
Hello, <?php echo $user->name; ?> <br />
|
||
<?php endforeach; ?>
|
||
</div>
|
||
|
||
In Laravel, this approach to rendering HTML can still be achieved using
|
||
[views](/docs/12.x/views) and [Blade](/docs/12.x/blade). Blade is an extremely
|
||
light-weight templating language that provides convenient, short syntax for
|
||
displaying data, iterating over data, and more:
|
||
|
||
|
||
|
||
1<div>
|
||
|
||
2 @foreach ($users as $user)
|
||
|
||
3 Hello, {{ $user->name }} <br />
|
||
|
||
4 @endforeach
|
||
|
||
5</div>
|
||
|
||
|
||
<div>
|
||
@foreach ($users as $user)
|
||
Hello, {{ $user->name }} <br />
|
||
@endforeach
|
||
</div>
|
||
|
||
When building applications in this fashion, form submissions and other page
|
||
interactions typically receive an entirely new HTML document from the server
|
||
and the entire page is re-rendered by the browser. Even today, many
|
||
applications may be perfectly suited to having their frontends constructed in
|
||
this way using simple Blade templates.
|
||
|
||
#### Growing Expectations
|
||
|
||
However, as user expectations regarding web applications have matured, many
|
||
developers have found the need to build more dynamic frontends with
|
||
interactions that feel more polished. In light of this, some developers choose
|
||
to begin building their application's frontend using JavaScript frameworks
|
||
such as Vue and React.
|
||
|
||
Others, preferring to stick with the backend language they are comfortable
|
||
with, have developed solutions that allow the construction of modern web
|
||
application UIs while still primarily utilizing their backend language of
|
||
choice. For example, in the [Rails](https://rubyonrails.org/) ecosystem, this
|
||
has spurred the creation of libraries such as
|
||
[Turbo](https://turbo.hotwired.dev/) [Hotwire](https://hotwired.dev/), and
|
||
[Stimulus](https://stimulus.hotwired.dev/).
|
||
|
||
Within the Laravel ecosystem, the need to create modern, dynamic frontends by
|
||
primarily using PHP has led to the creation of [Laravel
|
||
Livewire](https://livewire.laravel.com) and
|
||
[Alpine.js](https://alpinejs.dev/).
|
||
|
||
### Livewire
|
||
|
||
[Laravel Livewire](https://livewire.laravel.com) is a framework for building
|
||
Laravel powered frontends that feel dynamic, modern, and alive just like
|
||
frontends built with modern JavaScript frameworks like Vue and React.
|
||
|
||
When using Livewire, you will create Livewire "components" that render a
|
||
discrete portion of your UI and expose methods and data that can be invoked
|
||
and interacted with from your application's frontend. For example, a simple
|
||
"Counter" component might look like the following:
|
||
|
||
|
||
|
||
1<?php
|
||
|
||
2
|
||
|
||
3namespace App\Http\Livewire;
|
||
|
||
4
|
||
|
||
5use Livewire\Component;
|
||
|
||
6
|
||
|
||
7class Counter extends Component
|
||
|
||
8{
|
||
|
||
9 public $count = 0;
|
||
|
||
10
|
||
|
||
11 public function increment()
|
||
|
||
12 {
|
||
|
||
13 $this->count++;
|
||
|
||
14 }
|
||
|
||
15
|
||
|
||
16 public function render()
|
||
|
||
17 {
|
||
|
||
18 return view('livewire.counter');
|
||
|
||
19 }
|
||
|
||
20}
|
||
|
||
|
||
<?php
|
||
|
||
namespace App\Http\Livewire;
|
||
|
||
use Livewire\Component;
|
||
|
||
class Counter extends Component
|
||
{
|
||
public $count = 0;
|
||
|
||
public function increment()
|
||
{
|
||
$this->count++;
|
||
}
|
||
|
||
public function render()
|
||
{
|
||
return view('livewire.counter');
|
||
}
|
||
}
|
||
|
||
And, the corresponding template for the counter would be written like so:
|
||
|
||
|
||
|
||
1<div>
|
||
|
||
2 <button wire:click="increment">+</button>
|
||
|
||
3 <h1>{{ $count }}</h1>
|
||
|
||
4</div>
|
||
|
||
|
||
<div>
|
||
<button wire:click="increment">+</button>
|
||
<h1>{{ $count }}</h1>
|
||
</div>
|
||
|
||
As you can see, Livewire enables you to write new HTML attributes such as
|
||
`wire:click` that connect your Laravel application's frontend and backend. In
|
||
addition, you can render your component's current state using simple Blade
|
||
expressions.
|
||
|
||
For many, Livewire has revolutionized frontend development with Laravel,
|
||
allowing them to stay within the comfort of Laravel while constructing modern,
|
||
dynamic web applications. Typically, developers using Livewire will also
|
||
utilize [Alpine.js](https://alpinejs.dev/) to "sprinkle" JavaScript onto their
|
||
frontend only where it is needed, such as in order to render a dialog window.
|
||
|
||
If you're new to Laravel, we recommend getting familiar with the basic usage
|
||
of [views](/docs/12.x/views) and [Blade](/docs/12.x/blade). Then, consult the
|
||
official [Laravel Livewire documentation](https://livewire.laravel.com/docs)
|
||
to learn how to take your application to the next level with interactive
|
||
Livewire components.
|
||
|
||
### Starter Kits
|
||
|
||
If you would like to build your frontend using PHP and Livewire, you can
|
||
leverage our [Livewire starter kit](/docs/12.x/starter-kits) to jump-start
|
||
your application's development.
|
||
|
||
## Using React or Vue
|
||
|
||
Although it's possible to build modern frontends using Laravel and Livewire,
|
||
many developers still prefer to leverage the power of a JavaScript framework
|
||
like React or Vue. This allows developers to take advantage of the rich
|
||
ecosystem of JavaScript packages and tools available via NPM.
|
||
|
||
However, without additional tooling, pairing Laravel with React or Vue would
|
||
leave us needing to solve a variety of complicated problems such as client-
|
||
side routing, data hydration, and authentication. Client-side routing is often
|
||
simplified by using opinionated React / Vue frameworks such as
|
||
[Next](https://nextjs.org/) and [Nuxt](https://nuxt.com/); however, data
|
||
hydration and authentication remain complicated and cumbersome problems to
|
||
solve when pairing a backend framework like Laravel with these frontend
|
||
frameworks.
|
||
|
||
In addition, developers are left maintaining two separate code repositories,
|
||
often needing to coordinate maintenance, releases, and deployments across both
|
||
repositories. While these problems are not insurmountable, we don't believe
|
||
it's a productive or enjoyable way to develop applications.
|
||
|
||
### Inertia
|
||
|
||
Thankfully, Laravel offers the best of both worlds.
|
||
[Inertia](https://inertiajs.com) bridges the gap between your Laravel
|
||
application and your modern React or Vue frontend, allowing you to build full-
|
||
fledged, modern frontends using React or Vue while leveraging Laravel routes
|
||
and controllers for routing, data hydration, and authentication — all within a
|
||
single code repository. With this approach, you can enjoy the full power of
|
||
both Laravel and React / Vue without crippling the capabilities of either
|
||
tool.
|
||
|
||
After installing Inertia into your Laravel application, you will write routes
|
||
and controllers like normal. However, instead of returning a Blade template
|
||
from your controller, you will return an Inertia page:
|
||
|
||
|
||
|
||
1<?php
|
||
|
||
2
|
||
|
||
3namespace App\Http\Controllers;
|
||
|
||
4
|
||
|
||
5use App\Models\User;
|
||
|
||
6use Inertia\Inertia;
|
||
|
||
7use Inertia\Response;
|
||
|
||
8
|
||
|
||
9class UserController extends Controller
|
||
|
||
10{
|
||
|
||
11 /**
|
||
|
||
12 * Show the profile for a given user.
|
||
|
||
13 */
|
||
|
||
14 public function show(string $id): Response
|
||
|
||
15 {
|
||
|
||
16 return Inertia::render('users/show', [
|
||
|
||
17 'user' => User::findOrFail($id)
|
||
|
||
18 ]);
|
||
|
||
19 }
|
||
|
||
20}
|
||
|
||
|
||
<?php
|
||
|
||
namespace App\Http\Controllers;
|
||
|
||
use App\Models\User;
|
||
use Inertia\Inertia;
|
||
use Inertia\Response;
|
||
|
||
class UserController extends Controller
|
||
{
|
||
/**
|
||
* Show the profile for a given user.
|
||
*/
|
||
public function show(string $id): Response
|
||
{
|
||
return Inertia::render('users/show', [
|
||
'user' => User::findOrFail($id)
|
||
]);
|
||
}
|
||
}
|
||
|
||
An Inertia page corresponds to a React or Vue component, typically stored
|
||
within the `resources/js/pages` directory of your application. The data given
|
||
to the page via the `Inertia::render` method will be used to hydrate the
|
||
"props" of the page component:
|
||
|
||
|
||
|
||
1import Layout from '@/layouts/authenticated';
|
||
|
||
2import { Head } from '@inertiajs/react';
|
||
|
||
3
|
||
|
||
4export default function Show({ user }) {
|
||
|
||
5 return (
|
||
|
||
6 <Layout>
|
||
|
||
7 <Head title="Welcome" />
|
||
|
||
8 <h1>Welcome</h1>
|
||
|
||
9 <p>Hello {user.name}, welcome to Inertia.</p>
|
||
|
||
10 </Layout>
|
||
|
||
11 )
|
||
|
||
12}
|
||
|
||
|
||
import Layout from '@/layouts/authenticated';
|
||
import { Head } from '@inertiajs/react';
|
||
|
||
export default function Show({ user }) {
|
||
return (
|
||
<Layout>
|
||
<Head title="Welcome" />
|
||
<h1>Welcome</h1>
|
||
<p>Hello {user.name}, welcome to Inertia.</p>
|
||
</Layout>
|
||
)
|
||
}
|
||
|
||
As you can see, Inertia allows you to leverage the full power of React or Vue
|
||
when building your frontend, while providing a light-weight bridge between
|
||
your Laravel powered backend and your JavaScript powered frontend.
|
||
|
||
#### Server-Side Rendering
|
||
|
||
If you're concerned about diving into Inertia because your application
|
||
requires server-side rendering, don't worry. Inertia offers [server-side
|
||
rendering support](https://inertiajs.com/server-side-rendering). And, when
|
||
deploying your application via [Laravel Cloud](https://cloud.laravel.com) or
|
||
[Laravel Forge](https://forge.laravel.com), it's a breeze to ensure that
|
||
Inertia's server-side rendering process is always running.
|
||
|
||
### Starter Kits
|
||
|
||
If you would like to build your frontend using Inertia and Vue / React, you
|
||
can leverage our [React or Vue application starter kits](/docs/12.x/starter-
|
||
kits) to jump-start your application's development. Both of these starter kits
|
||
scaffold your application's backend and frontend authentication flow using
|
||
Inertia, Vue / React, [Tailwind](https://tailwindcss.com), and
|
||
[Vite](https://vitejs.dev) so that you can start building your next big idea.
|
||
|
||
## Bundling Assets
|
||
|
||
Regardless of whether you choose to develop your frontend using Blade and
|
||
Livewire or Vue / React and Inertia, you will likely need to bundle your
|
||
application's CSS into production-ready assets. Of course, if you choose to
|
||
build your application's frontend with Vue or React, you will also need to
|
||
bundle your components into browser ready JavaScript assets.
|
||
|
||
By default, Laravel utilizes [Vite](https://vitejs.dev) to bundle your assets.
|
||
Vite provides lightning-fast build times and near instantaneous Hot Module
|
||
Replacement (HMR) during local development. In all new Laravel applications,
|
||
including those using our [starter kits](/docs/12.x/starter-kits), you will
|
||
find a `vite.config.js` file that loads our light-weight Laravel Vite plugin
|
||
that makes Vite a joy to use with Laravel applications.
|
||
|
||
The fastest way to get started with Laravel and Vite is by beginning your
|
||
application's development using [our application starter
|
||
kits](/docs/12.x/starter-kits), which jump-starts your application by
|
||
providing frontend and backend authentication scaffolding.
|
||
|
||
For more detailed documentation on utilizing Vite with Laravel, please see our
|
||
[dedicated documentation on bundling and compiling your
|
||
assets](/docs/12.x/vite).
|
||
|