Laravel | Front-end Scaffolding Example

Hello Friends,

Front-end Scaffolding means to create a basic structure for an application in Laravel. Laravel provides a very simple way to change the front-end presets/scaffolding with any of the other available scaffolding like Bootstrap, Vue and React.

This example is used to create front-end scaffolding

Let's see following step.

Step 1 :

Generate Scaffolding

To generate a scaffolding, we first need to install the laravel/ui, which is a composer package and to do that we have to run the following composer command.

composer require laravel/ui --dev

Step 2 :

After that, we can run the ui artisan command to generate a base scaffolding. As we discussed before, we can generate the scaffolding for Bootstrap, Vue or React and for that we will run the following artisan command.

Bootstrap

php artisan ui bootstrap

Vue

php artisan ui vue

React

php artisan ui react --auth

This will create a components directory in resources/js directory.

Step 3 :

After running any of the above preset commands, we will have to install the npm, if it is not installed, to install run the following command.

npm install

Step 4 :

Now we have to run the following npm command to compile the scaffolding.

npm run dev

Generate Scaffolding with Authentication: Have to complete Generate Scaffolding Step 1 then follow the below steps.

Step 1 :

To generate a scaffolding with view files for authentication like login and register, then we just have to add ‘–auth’ at the end of the commands that we saw previously, as follows:

Bootstrap

php artisan ui bootstrap --auth

Vue

php artisan ui vue --auth

React

php artisan ui react --auth

This will create components directory in resources/js directory and also creates auth and layouts directory with a home.blade.php file in resources/views directory.

Step 2 :

After running any of the above preset commands, we will have to install the npm if it is not installed, to install run the following command.

npm install

Step 3 :

Now we have to run the following npm command to compile the scaffolding.

npm run dev

Remove Scaffolding: To remove a generated scaffolding, we will run the following artisan command.

php artisan preset none

Note: This will delete the components directory, which was created but will not delete the file and directory, which were created during the auth scaffolding, in resources/views directory.