Laravel 5.8 – From The Ground Up - Laravel 5.8 Tutorial From Scratch – e27 – Frontend Presets for React, Vue, Bootstrap & Tailwind CSS

Education, Programming

Laravel 5.8 – From The Ground Up

52 Lessons

Laravel 5.8 Tutorial From Scratch – e27 – Frontend Presets for React, Vue, Bootstrap & Tailwind CSS

welcome back to wrap up the basics of front-end the last thing I want to talk about is the presets up until this point we've been talking about bootstrap and

view but that may not be for everybody so laravel actually makes it very simple to change the entire front end scaffolding for something else and there's even a preset which wipes out

the front end altogether so you can start from scratch if you wanted to so to do that I want to start on a new project I don't want to use the existing project that we've been working on

because it does delete a lot of stuff so I'm gonna make a brand new project and show you how to change the presets let me CD out of here and let's make a new project laravel new and we'll just call

it presets let's let that craft alright and everything is done let's CD into presets and run PHP artisan surf let's check it out in the browser and there we are so we have a fresh installation of

laravel I'll create a new tab and I'll CD into that same directory and let's run PHP artisan and scroll up a little bit and the command that I want to show you is preset and it is right here so

preset swaps out the front-end scaffolding for the application as we talked about let's run PHP artisan help preset and there we are so there are several

presets that you can run and here they are you can run none which gets rid of all the front-end you can run bootstrap which of course will be Twitter

bootstrap then you have view and then you have react let's try that react preset let's say PHP artisan preset react alright so it says that everything were installed successfully go ahead and

run this command and you can literally copy paste that command and go ahead and run it you know what this does we talked about it a couple of lessons ago so it's going to install all of these

dependencies using NPM and then it's gonna run the def which will give us a compiled version of our assets let's wait for it to finish and skip ahead and there we are

me open this project in phpstorm to show you what it did let's take a look at the package.json file and there it is and if we scroll down react and react them now of course we are still pulling

in jQuery and bootstrap and jQuery is because bootstrap requires it and we still have Axios and everything else let's check out the JavaScript app das and so we see we are requiring this

bootstrap and then we have a fresh react component that is inside the components directory let's open that up and there it is so this of course is react so this example component can now be used just

like we had for view alright let's check out another preset let's say PHP artisan preset none and see what happens with that one and sure enough everything is removed

and if we check out sass that is now completely empty so this has gotten rid of everything allright we saw that there was a PHP artisan presets bootstrap let's check out that preset it's gonna

require an NPM install an NPM run dev will ignore that for now I just want to show you what it's actually doing so there we are now we're importing bootstrap and app

that Jas does not have view that's the difference right so this preset is just like the one that it comes with except that it doesn't have view is just bootstrap no real Jas in here

and finally PHP artisan preset view so if we go back to app that Jas we see here window that view and we have our example component back in in app that s CSS we still have bootstrap so we're

basically back to our starting point now there are other presets out there and I do want to show you that because I think that's important if we go back to Chrome let's do a quick Google search for level

front-end presets and the very first record here is this github account for level front and presets now this is sort of the official front-end presets and you do have six options here I want to

show you how to get tell when CSS working so let's go ahead and follow the instructions so the very first thing we got to do is run a composer required so let's run

that now composer require letter though – front end that's presets slash tailed when CSS while that is going I do want to talk a little bit about tailwind tailwind is a front-end utility based

CSS framework and it quickly is becoming so popular because of the ease of use it looks great it's easy for developers to develop on it and all in all very customizable and really user friendly so

today we're gonna be putting that into our project but in your own time if you want to learn a little bit more go ahead and research tailwind CSS alright let's head back to Chrome let's see what we

got to do next so next we got a run the PHP artisan tailwind – off I'll hit paste on that let's go ahead and run npm install and then run dev twice again all right that is all done let's head back

to chrome hit refresh and now we do have login here let's click through to that and there we are so you see this is much different there's your register and of course I could register but this just

shows you the difference between the Larry Voe bootstrap version and now we have the tailwind CSS so going back to that github account I'm gonna go back again like I mentioned before there are

different presets currently supported inside this now if you do have a need for a custom preset for all of your projects you can certainly make your own preset just like these folks have and of

course this is all open source so you can actually see exactly what the preset is doing and how it changes the files and how it has stubs and copies them it is quite interesting if you're ready to

dive into that I highly highly recommend it so last little bit I want to leave you with is tailwind CSS if you've been looking for a utility first CSS framework where you can quickly make

very great-looking applications tell when CSS is fantastic now it is utility first and basically what that means in very quick terms instead of having these pre-made components like bootstrap has

you create your own components using very small classes and your atom and Inc mentally they basically make your component now the difference being that if you have a bootstrap component it

kind of will always look like a bootstrap component you'd actually have to do a lot of manipulation to make that look totally different with tailwind you actually add very small classes and

through those classes you can create the same exact components except that you have full control over every single detail of that component so if you haven't looked at tail wind CSS I do

want to put that in your radar as a very very nice CSS framework it is quickly growing so I think we're gonna start to see a lot more of it in the coming months so with that being said that

wraps it up for this lesson and the lair of our presets and in the next lesson we'll move on to something else

With so many options for Javascript and CSS frameworks available, let’s dive deeper into the Laravel frontend scaffolding to learn how to change the frontend presets. We will wrap it up by adding a custom preset for Tailwind CSS.

For the best experience, follow along in our interactive school at https://www.coderstape.com

Resources
Course Source Code
https://github.com/coderstape/laravel-58-from-scratch

Hit us up on Twitter with any questions or comments @codertape (https://twitter.com/CodersTape)

About This Course

Ready to get started on your path to Laravel Artisan? In this series, we are breaking down all of the basics of Laravel to get you comfortable using the world’s most popular PHP framework. Let’s get started!

    add to database laravel admin laravel artisan Artisan Command artisan commend create artisan console artisan laravel command authentication in laravel belongsto belongsto laravel example coding tutorials create artisan command create command artisan create new command artisan Create your own crud laravel crud laravel tutorial crud resource laravel crud with file upload custom artisan commands custom artisan commands laravel custom laravel database configuration laravel database relationship digital ocean dotenv eager loading eager loading in laravel eager loading vs lazy loading laravel eloquent eloquent accessors eloquent mutators eloquent orm feature testing laravel fetching data in laravel filesystem laravel form requests full stack vue gate and policy laravel google optimize hasmany hasmany laravel hasmany laravel example hasmany relationship in laravel hasone hasone relationship in laravel How to create how to queue email how to use queue installing laravel intervention image laravel laravel 5 laravel 5 auth laravel 5.4 queue laravel 5.5 queue laravel 5.8 laravel 5.8 artisan command laravel 5.8 artisan console laravel 5.8 auth tutorial laravel 5.8 authentication laravel 5.8 commands laravel 5.8 crud laravel 5.8 crud example laravel 5.8 custom middleware laravel 5.8 deprecations laravel 5.8 eager loading laravel 5.8 elixir laravel 5.8 event listeners laravel 5.8 events laravel 5.8 feature laravel 5.8 features laravel 5.8 global middleware laravel 5.8 install laravel 5.8 lazy loading laravel 5.8 listeners laravel 5.8 middleware laravel 5.8 multi auth laravel 5.8 named resource routes laravel 5.8 named routes laravel 5.8 new feature laravel 5.8 own artisan command laravel 5.8 queue laravel 5.8 queues laravel 5.8 routing laravel 5.8 telescope laravel 5.8 tutorial laravel 5.8 user auth laravel 5.8 user authentication laravel 5.8 what's new laravel 5.9 laravel admin permissions laravel api laravel artisan command laravel artisan console laravel assets laravel auth laravel auth role laravel authentication laravel authorization laravel axios post example laravel background process laravel background task laravel background worker laravel beginner to master laravel belongsto laravel belongsto vs hasone laravel belongstomany laravel best packages laravel best practices laravel best tutorial laravel bootstrap laravel command laravel command line laravel commands tutorial laravel composer install laravel connect db laravel console command laravel console testing laravel contact form send email laravel controllers laravel create laravel crud laravel crud policy laravel custom command laravel custom middleware laravel database laravel database configuration laravel database relationships laravel database seeder laravel database settings laravel db seed laravel db settings laravel debugging laravel deploy aws laravel deploy digital ocean laravel deploy on digitalocean laravel deploy on server laravel deploy to production laravel deployment laravel digitalocean laravel drag and drop file upload laravel dropzone file upload laravel dropzone image upload laravel e-commerce laravel eager loading laravel eager loading tutorial laravel eager loading with condition laravel elixir laravel eloquent laravel eloquent belongsto laravel eloquent crud laravel eloquent hasmany laravel eloquent where laravel eloquest tutorial laravel events and queue laravel events tutorial laravel factory laravel feature test laravel feature testing laravel fetching data from database laravel file storage laravel fillable example laravel flash message notification laravel for beginners laravel form validation laravel forms laravel forms bootstrap snippets laravel from scratch laravel from the ground up laravel front end laravel frontend tutorial laravel gate and policy tutorial laravel global middleware laravel hasmany laravel hasone laravel i18n laravel installation laravel installation mac laravel intervention image tutorial laravel javascript tutorial laravel jobs queue laravel language laravel language switcher laravel language tutorial laravel languages laravel lazy loading laravel listener event laravel listeners laravel localization laravel login laravel mailable tutorial laravel many to many relationship example laravel markdown email laravel markdown mail laravel mass assignment laravel middleware laravel migrate fresh laravel mix laravel mix 5.8 laravel mix vue laravel model factory tutorial laravel multiple language laravel mysql json laravel named resource routes laravel named routes laravel new features laravel news laravel nginx laravel node modules laravel npm install laravel npm run watch error laravel one to one laravel paginate laravel paginate link laravel pagination laravel pagination 5.8 laravel pagination links laravel pagination tutorial laravel phpunit laravel phpunit testing laravel pivot table example laravel policy laravel preview laravel query optimization laravel queue laravel queue event listener laravel react laravel register user laravel registration laravel registration validation laravel relationships laravel reset password laravel role middleware laravel role permission laravel roles laravel route group middleware laravel routes laravel routing laravel routing with parameters laravel sass laravel save file to database laravel scopes laravel seo tutorial laravel server laravel session data laravel ssl laravel supervisor laravel tailwind css laravel tailwind setup laravel tdd laravel tdd tutorial laravel telescope laravel telescope installation laravel telescope tutorial laravel test driven development laravel test workflow laravel testing laravel testing controllers laravel testing tutorial laravel tools laravel translation laravel tutorial laravel tutorial for beginners laravel ubuntu server laravel ubuntu tutorial laravel unit testing controllers laravel upload file laravel upload image to storage laravel upload multiple files at once laravel upload multiple image to database laravel upload multiple images laravel url slug laravel vue laravel vue js crud laravel vue setup laravel vue tutorial laravel vue.js laravel webpack error laravel webpack tutorial lazy loading lazy loading laravel lazy loading vs eager loading learn laravel learn laravel framework step by step localization in laravel localization laravel many to many laravel mvc tutorial for beginners in php mvc tutorial laravel mysql mysql relational database mysql relationship n + 1 problem n + 1 problem laravel new artisan command npm install npm run dev npm run watch laravel one to many one to one one to one laravel own artisan command pagination pagination bootstrap pagination bootstrap php mysql pagination laravel pagination laravel bootstrap pagination links pagination php php php artisan php carbon immutable php framework php framework 2019 php what's new 2019 phpunit phpunit laravel phpunit testing pivot laravel policy laravel polymorphic relationships queue and events queue email queue for laravel queue jobs queue laravel 5.8 registration form relationship laravel eloquent relationship mysql restful controller role permission in laravel roles laravel route model binding laravel routing in laravel save image to database seo friendly seo friendly content writing seo friendly website seo laravel seo optimization simple pagination laravel slugify sqlite relational database sqlite relationships between tables symfony command console symfony laravel tailwind css tailwind laravel mix telescope laravel tutorial laravel unit testing unit testing laravel upload file laravel upload file php upload image laravel upload image to database php upload images laravel upload multiple files in php url slug laravel url slug php vue vue.js vuejs laravel why use laravel queue why use queue