Laravel 5.8 – From The Ground Up

Lesson 27 of 52 · Laravel 5.8 Tutorial From Scratch – e27 – Frontend Presets for React, Vue, Bootstrap & Tailwind CSS · Education

Previous Laravel 5.8 Tutorial From Scratch – e26 – Vue Basics 101 Next lesson Laravel 5.8 Tutorial From Scratch – e28 – Events & Listeners

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

Laravel 5.8 – From The Ground Up

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

Modal title