Skip to main content

Front-end Presets - A New Feature in Laravel 5.5 Plus Community Supported Preset Options

Laravel 5.4 comes with Bootstrap and Vue.js including Example.vue component for your front-end scaffolding.

Depending upon what we are developing, we might just need Bootstrap only but not Vue.js and vice versa or nothing at all.

Laravel 5.5 comes with new artisan preset command to switch front-end scaffolding presets easily. Now there is React.js scaffolding included for React lovers.

Bootstrap is a CSS framework while Vue.js is JavaScript framework. So artisan preset allows us to switch CSS framework or JavaScript framework separately.

NOTE: This scaffolding is intended to be used on fresh install of Laravel before anything.

Lets say we want React.js instead of Vue.js, all we have to do is php artisan preset react

This will neatly switch JavaScript framework from Vue.js to React.js. It also replaces the Example.vue with Example.js React component.

If we are working only with Bootstrap but don't want any JavaScript framework scaffolding, we can use php artisan preset bootstrap. This will remove Vue scaffolding and we are left with only bootstrap.

If we don't want any preset that comes with Laravel 5.5, we can use php artisan preset none to remove all front-end scaffolding presets.

Well... what about other framworks? Supposing I want to use Zurb Foundation or Bulma or uikit instead of Bootstrap, how do we do that?

You are in luck!

Luckily Laravel presets can be extended so that community can develop the preset of their choice.

Currently few presets have been available for other CSS frameworks that are not included in Laravel 5.5.

Checkout these other presets if you prefer to use Zurb Foundation, Bulma or uikit.
https://packagist.org/packages/laravel-frontend-presets/

While for default Bootstrap preset, you still have to use php artisan make:auth to create Bootstrap Auth views, these community presets have gone one step further allowing you to scaffold new preset as well as create Auth views in one command.

For example: php artisan preset foundation-auth

This removes bootstrap and uses Zurb Foundation scaffolding as well as create Auth views for user login, registration etc., while leaving JavaScript framework intact.

If you are Zurb Foundation lover, you don't need to do all by yourself in my last tutorial. This preset will even save you more time.

If you like to contribute for other presets, you can definitely join the Laravel Frontend Presets Organization.

Enjoy your new found presets!

Comments

  1. Thanks For Your valuable posting, it was very informative...
    Laravel Development Company

    ReplyDelete
  2. I am very grateful to read your blog.I hope you would provide the great services in the field of website design and development
    Front End Development

    ReplyDelete
  3. Hi, Our laravel Development Company provide fluency in delivering simple code for a variety of bundles to help create robust and attractive websites for diverse verticals of industry and domains. We help businesses to achieve their underlying goals using leading solutions from the Laravel framework. Contact@ExpressTechSoftwares.Com or +91-9806724185

    ReplyDelete
  4. ExpressTech Software Solutions is a Laravel Development Company, we are having a group of master Dedicated Laravel Developers with great Laravel Experience. Contact us to find more about laravel software. Contact@ExpressTechSoftwares.Com or +91-9806724185

    ReplyDelete
  5. Thank you for sharing this informative post on laravel. I am new to laravel and this post will really help me.
    Laravel Web Development Services

    ReplyDelete
  6. HDPE Pipe Fittings - We believe in using only standard quality raw materials to provide perfect product for industry specific requirements. Our team of experts and designers ensure latest designs, perfect shape, long lasting durability, easy installation and perfect finish in the product.

    ReplyDelete

Post a Comment

Popular posts from this blog

Using Foundation 6 with Laravel 5

Laravel comes ready with Twitter bootstrap and Vue.js to get started with our project. But what if we want to use Zurb Foundation? I am assuming we already know the traditional way of referencing and using foundation via CDN or downloading and referencing it locally. But this tutorial is for those who want to use the power of SCSS in foundation inside Laravel. As of this writing I am using Laravel 5.4 and Foundation 6.4.1 on windows 10 with XAMPP. Assuming we have all the necessary installation like php, composer, node.js, npm, git etc., let get started. Let get started and go through it step by step. Step 1: Install a Fresh Copy of Laravel Documentation: https://laravel.com/docs/5.4 $ laravel new foundation_test $ cd foundation_test Open the folder with our favorite editor like Sublime Text , Atom Editor or  Visual Studio Code . If we open package.json file, the initial file looks like this {   "private": true,   "scripts": {     &quo