Frontend Development

Frontend Development

Laravel can use a variety of frontend javascript frameworks. It also provides for frontend presets (or ways to scaffold a frontend) which provides a basic starting point using Bootstrap, React, and / or Vue.

Auth Scaffolding

Starting in laravel 6, the artisan make:auth scaffolding has been moved to the laravel/ui package.

Generating scaffolding

You can read more about generating scaffolding on the docs/frontend page.

Compiling Assets

Everytime you add a new component to your app.js file, you need run npm run dev to compile the new component into javascript. To develop while automatically reloading your page everytime you change a frontend file, you can run npm run watch. For more information on how to configure laravel mix to compile different types of assets, please checkout the docs on compiling assets.

CORS requests

When developing a Single Page Application with laravel as the backend, you have to setup your middleware to accept CORS request. Laravel 7 introduced native support for CORS, but if you are on an earlier version of laravel, you can use spatie/laravel-cors to allow for requests to push through. You can learn about CORS here.

CSRF Token

When developing your SPA, you may still want to secure your application’s forms with Laravel’s default CSRF Tokens. To do so, you’ll need to attach the CSRF token to your form requests. You can do this by adding the value of the X-XSRF-TOKEN header. If you are building the SPA separately from your laravel app, you might want to use api-tokens instead. In Laravel 7, you can use Laravel Sanctum’s API Token Authentication for this.