Init
This commit is contained in:
414
output/12.x/frontend.md
Normal file
414
output/12.x/frontend.md
Normal file
@@ -0,0 +1,414 @@
|
||||
# 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).
|
||||
|
||||
Reference in New Issue
Block a user