Learn Inside of Scaffolding In Laravel * DevRohit Think simplified

Hi guys,

We’ll look into Scaffolding in Laravel In this post. By default, Laravel uses NPM to install both front-end packages, i.e. Bootstrap, React, or Vue. Laravel provides a Mix package to compile your SASS file and convert it into a CSS file. Stay with the article. You get more inside of scaffolding in Laravel.

Laravel provides the laravel/ui package that contains Bootstrap, React, and Vue scaffolding which you can install using composer:

composer require laravel/ui:^2.4

After installing the laravel/ui package, you need to run the below command for scaffolding your application.

// Generate basic scaffolding 
php artisan ui bootstrap 
php artisan ui vue 
php artisan ui react 
// Generate login / registration scaffolding... 
php artisan ui bootstrap --auth 
php artisan ui vue --auth 
php artisan ui react --auth

CSS:
Laravel uses laravel mix for compiling SASS or LESS and create a CSS file. Laravel Mix provides a clean, expressive API and adds variables mixins that simplify working with CSS.

Javascript:
Laravel does not want to use a specific javascript library to build your application like Vue, React. Laravel Mix package makes compiled version of javascript components into a single, browser-ready javascript file.

Writing CSS:-

Before compiling your SASS or LESS files, you need to install the project’s frontend dependencies using npm

npm install

Afterward, you can compile your SASS file to a CSS file using Laravel Mix. The public/css directory contains all your compiled CSS.

The webpack.mix.js file contains instructions for compiling SASS files.

Writing Javascript:-

Laravel has already contained some package forget starts on your javascript application. According to your requirements, you can install any other packages.

npm install

You can use the npm run dev command to compile your assets. Webpack is a modern bundler for modern javascript applications. Within the app.js file, you configure your javascript application. The public/js directory contains all compiled javascript files. We should add all the dependencies inside the bootstrap file.

Writing Vue Components:-

After you scaffolding with Vue, we will place all code of Vue inside the resources/js directory. we create component i.e. AlertComponent.vue file inside resources/js/components directory. Single file components provide a convenient approach to building javascript-driven applications. Before using it, you must register the component inside the app.js file.

Vue.component( 'alert-component', require('./components/AlertComponent.vue').default );

After registering the component, you can use it inside the blade template like below:

@extends('layouts.app') 
@section('content') 
<example-component></example-component> 
@endsection

After completing your changes inside the Vue component, you should run npm run dev to compile all files. Also, you can run the npm run watch command. It will check changes and re-compile them each time.

Using React:-

If you want to create your application with react driven. Laravel will wipe out the Vue scaffolding with React scaffolding.

php artisan ui react php artisan ui react --auth

Adding Presets:-

Allows you to add additional methods to the UiCommand class at runtime. For example, the following code adds a nextjs method to the UiCommand class. The following code should write by a service provider.

use Laravel\Ui\UiCommand; 
UiCommand::macro('nextjs', function (UiCommand $command) { 
     // Scaffold your frontend... 
});

Then you may call the new preset via the ui command.

php artisan ui nextjs

I hope this article (Learn Inside of Scaffolding In Laravel) helps you better understand writing on Javascript and CSS and adding presets. For this article, I followed this link. If you have questions, please leave a comment on and I will respond as soon as possible.

Thank you for reading this article. Please share this article with your friend circle. That’s it for the day. Stay Connected!
Cheers,

Originally published at https://www.devrohit.com on August 10, 2021.