Learn Inside of Scaffolding In Laravel

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 to scaffold 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 creating a CSS file. Laravel Mix provides a clean, expressive API and adds variable mixins that simplify working with CSS.

Javascript:
Laravel does not want to use a specific javascript library to build your application like Vue, or React. Laravel Mix package makes compiled versions 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.

  npm run dev

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 package.

  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 scaffold with Vue, we will place all code of Vue inside the resources/js directory. we create a component i.e. AlertComponent.vue file inside the 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 a react-driven application. 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 the NextJs method to the UiCommand class. The following code should be written 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 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,