Laravel | Front-end Scaffolding

29 Jan, 2020
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
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.Bootstrapphp artisan ui bootstrapVuephp artisan ui vueReactphp artisan ui reactThis will create a components directory in resources/js directory.
Bootstrapphp artisan ui bootstrap
php artisan ui bootstrap
Vuephp artisan ui vue
php artisan ui vue
Reactphp artisan ui 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
npm install
Step 4: Now we have to run the following npm command to compile the scaffolding.npm run dev
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:Bootstrapphp artisan ui bootstrap --authVuephp artisan ui vue --authReactphp artisan ui react --authThis 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.
Bootstrapphp artisan ui bootstrap --auth
php artisan ui bootstrap --auth
Vuephp artisan ui vue --auth
php artisan ui vue --auth
Reactphp artisan ui react --auth
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
npm install
Step 3: Now we have to run the following npm command to compile the scaffolding.npm run dev
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
Laravel
PHP-Misc
PHP
Technical Scripter
Web Technologies
PHP
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between HTTP GET and POST Methods
How to fetch data from localserver database and display on HTML table using PHP ?
Different ways for passing data to view in Laravel
PHP | file_exists( ) Function
How to create admin login page using PHP?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?