The complete guide to Laravel front-end scaffolding

Published in Programming on Oct 7, 2020

There has been a lot of arguing, drama, and ultimately confusion about the state of Laravel's front-end scaffolding. I won't be focusing on any of the drama — it's not important who was right or who was wrong.

What is important is making sure people understand the — relatively complex — state of front-end scaffolding. Both beginners and experienced developers seem to be confused by some parts of this frontend "ecosystem".

So, this article will try to serve as a complete guide to Laravel front-end scaffolding.

Note: If you just want to quickly know what to use, without explanations of what the different solutions do, skip to the end of the article.

An overview of available solutions

Laravel Jetstream

Laravel Jetstream is the newest solution.

It's a starting point for your application that comes with login, registration, email verification, two-factor authentication, session management, API support via Laravel Sanctum, and optional team management.

It's designed using Tailwind CSS. This CSS framework is becoming the standard in Laravel community.

The two flavors

Jetstream lets you pick between two frontend stacks:

These tools are relatively new, but they're seeing a great rise in popularity.

You may be thinking "will I have to write my app using Livewire or Inertia then"?

That's a good question, and the answer is even better: No, you won't have to use them for the rest of the app. You can just install Jetstream, leave its features be, and write your app using a different framework.

If you intend to do this, I recommend using the Livewire version.

If you don't know what Livewire is, it's basically a tool that lets you create a Blade view and a backend component class that communicate together. This lets you build dynamic UIs using backend code only.

For that reason, if you don't know which stack you prefer, use Livewire, because every Laravel developer understands Blade. And Livewire is very easy to understand when you know blade. It really feels like magic.

The Inertia version is a great choice if you're experienced with Vue.js and like using it. The frontend is written in pretty much pure Vue. Inertia only acts as the layer between your Laravel backend and your Vue components.

Instead of having to write API routes, Inertia lets you return responses from controllers that feel exactly as if you were doing return view(...), but you get to use Vue on the frontend.

Features

Jetstream has some cool features that other scaffolding tools don't have.

It has a dedicated page where users can edit their name, email address, and (optionally) profile photo.

They can also delete their account with the click of a button (confirmed with a password modal, of course). This is a great win for everyone making their apps GDPR compliant.

It also supports two factor authentication. This means that users can optionally enable 2FA — they are shown a QR code that they'll scan with an app like Google Authenticator, and are provided with recovery keys. They can store those in a password manager like 1Password, or if they're old school, write down and put into a physical vault 🔒.

It has a first-party integration with Laravel Sanctum (a package for API authentication). Users can generate API keys and assign them permissions.

It also comes with a very advanced (and optional) teams feature. From the docs:

Jetstream's team features allow each registered user to create and belong to multiple teams. By default, every registered user will belong to a "Personal" team.

Every user within a Jetstream application has a "current team". This is the team that the user is actively viewing resources for. For example, if you are building a calendar application, your application would display the upcoming calendar events for the user's current team. You may access the user's current team using the $user->currentTeam Eloquent relationship

Finally, let me emphasize that all of these features are optional. If you don't want them, disable them.

Usage

Note that Jetstream, being a starting point for your application, is not meant to be installed at any point of development except the very beginning.

The most straightforward way to install Jetstream is to run:

laravel new my-app --jet

(Make sure your Laravel installer is up to date.)

The installer will ask you which stack (Livewire or Inertia) you prefer. Then, it will install Jetstream and all you'll have to do is configure the database credentials in .env and run database migrations — php artisan migrate.

That's all. You can visit your project in the browser and start using Jetstream.

Laravel Fortify

The documentation says:

Laravel Fortify is a frontend agnostic authentication backend for Laravel

This means that it's not a front-end scaffolding tool, but rather the backend for your front-end. Fortify powers the authentication logic in Jetstream, for example.

It provides you with all the backend logic for authentication (if you've used Laravel 7, these would be the Auth controllers).

You simply "plug in" your views into the backend logic, using code like this:

use Laravel\Fortify\Fortify;

Fortify::loginView(function () {
    return view('auth.login');
});

Fortify also lets you customize the backend logic. For example, you may set how users should be authenticated (logged in) using a call like this:

Fortify::authenticateUsing(function (Request $request) {
    $user = User::where('email', $request->email)->first();

    if ($user && Hash::check($request->password, $user->password)) {
        return $user;
	  }
})

laravel/ui

laravel/ui is a very simple authentication scaffolding built on the Bootstrap CSS framework. It also lets you pick between a Vue/React preset.

It doesn't have the advanced features of Jetstream, it really just gives you the login, register, and forgot/confirm/reset password views. It's sort of a legacy project, so new features aren't being added anymore.

For this reason, it's not recommended as much as Jetstream is. However, if you do want to use Bootstrap, this is the official way.

Side note: There are some community versions of Jetstream that use Bootstrap. For example: https://github.com/nascent-africa/jetstrap. I can't recommend these solutions because I haven't used them, but they may be a good choice if you really want to use Bootstrap, and really want the Jetstream features.

Personally, I would recommend learning Tailwind CSS instead. Tailwind fits the ergonomics of Jetstream perfectly, much more so than Bootstrap. And even though the learning curve of e.g. the TALL stack (Tailwind, Alpine, Livewire, Laravel) is bigger than simply using Bootstrap, the effort does pay off and you'll enjoy development much more with those new technologies.

That's assuming you understand the fundamentals of web development and Laravel. If not, focus on learning those first. Bootstrap can be handy if you just want to have a working app without having to think about the design or CSS internals. So if you're only learning Laravel, Bootstrap will basically hide all the CSS stuff away, so you'll have fewer things to worry about.

Third-party presets

There are also third-party presets. These use the same logic as laravel/ui, but they provide you with more options than just Vue and React.

Some of the popular ones include:

There's many other ones too. You can look them up on Google them based on what you need. For example, try googling things like "laravel react preset" or "laravel react spa template". As long as they've been reasonably recently updated, they should be fine to use.

Your own solution

And finally, you can of course build your own solution. This is very easy with Fortify — as mentioned, it provides all the backend logic so all you'll have to do is plug in your views.

But you don't have to use Fortify. Check out the authentication docs. It's relatively straightforward to write a custom auth backend yourself. Though if you need features like "forgot password", it's a good decision to go with Fortify.

Here's an extra suggestion: Use Fortify directly with Jetstream's views, but without anything else from Jetstream.

You may be thinking "but I don't want Livewire or Inertia".

Luckily, you don't need any of that. Read this excerpt from Jetstream docs:

Laravel Jetstream automatically scaffolds the login, two-factor login, registration, password reset, and email verification views for your project. For simplicity, regardless of the stack you choose, these templates are written in Blade and do not use a JavaScript framework.

This means that the views used for the "guest" pages don't use Livewire or Inertia at all. It's just Blade with a Fortify backend (which works like controllers would).

This lets you do a very cool thing — just copy these frontend-agnostic views from Jetstream and use them in a Fortify app. This basically gives you laravel/ui, but with Tailwind CSS instead of Bootstrap.

  • Install Fortify
  • Publish Jetstream views, copy them, move them to views/components/jet
    • You only need a portion of them, but if you want to get started quickly, publish them all so that you're sure it will work.
    • Tip: If you pick Inertia for the Jetstream install, you'll likely have a lot less Blade views.
  • Rename x-jet- references to x-jet. references in all of the files
  • Copy package.json
  • Copy app.css
  • Copy webpack.mix.js
  • Copy tailwind.config.js
  • npm install
  • npm run watch
  • Visit in browser

Note: This process is a bit tedious, but probably wanted by a lot of people, as you can see in the Twitter thread in which I explained this option. It's really like Laravel's old, simple make:auth style of authentication, but it uses modern Tailwind UI views.

If enough people want this, I'll build this and maintain it, or try to get it merged into Jetstream as a third option.

What should you use

As you can see, there are many things you can use for front-end scaffolding in Laravel. That can make picking one tough.

The main guidance should be what tech and features you want.

I wouldn't worry about whether the tech used by Jetstream is mature or not, because — as mentioned above — it's easy to just let Jetstream use it and write the rest of the app your way.

I'm a beginner and I don't know if I want Tailwind, I never used it

  • It's probably better to start with laravel/ui with Bootstrap, if you already know Bootstrap.
  • If you don't know Bootstrap, learning Tailwind CSS is a good choice. It will teach you a lot more about CSS than Bootstrap will, and there's plenty of components available online to build UIs quickly.
  • The main downside of Tailwind is that there's not as many copypaste components as Bootstrap has.

I want Bootstrap

  • laravel/ui — the official project with Bootstrap
  • jetstrap — if you want Jetstream features. As explained above, Jetstrap isn't first-party so no recommendations can be made here

I want Jetstream features

I want Tailwind CSS

I want TALLstack

  • Jetstream — the newest project with the most features
  • TALL preset — if you want a simpler preset

I want Inertia

I want Vue

  • Jetstream with Inertia if you want Inertia
  • laravel/ui with Vue if you want Vue sprinkled into Blade
  • Inertia.js preset
  • No preset — use a custom (e.g. Nuxt) frontend and only use Laravel for the API.

I want React

  • laravel/ui with React if you want React sprinkled into Blade
  • Inertia.js with React (seems like no up-to-date presets are available)
  • No preset

I want Fortify with Tailwind UI design

I want a completely custom UI

  • Fortify with custom views
  • laravel/ui with custom views. Note that laravel/ui isn't as modern as Fortify, so it likely won't be maintained as much.

I don’t need all of Jetstream but I want more than Fortify

  • FortifyUI comes with 2FA and user profile/password updating

I want completely custom everything, including the auth backend

  • A custom auth backend, as per the authentication docs with a custom frontend

Newsletter

You will be notified whenever I publish an article about the topics you selected. Unsubscribe anytime.

Comments

Your comment will appear once it's approved (to fight spam).