Laravel | Front-end Scaffolding

Front-end Scaffolding means to create a basic structure for an application. 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.

Generate Scaffolding:

• Step 1: 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

  

  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.

Reference: https://laravel.com/docs/6.x/frontend