Building a shopping cart app with Laravel, Vue + Stripe

so yes wow all right what's up everybody i'm back full of pasta so let's get it started oh actually hold on one second okay that's better i'd adjust some lighting and stuff in here okay so where we left off at was um those who weren't here so we had a larval app up and running on docker which we can see here the larval viewstripe.test this app in particular is going to be a shopping cart application that'll allow our user to go in and find products select them put them in a cart using view and then they'll be able to check out and pay for those items and will go through a larval back end and process with stripe payments through laravel cashier the entire app will be built in larval view will be secondary too it's not gonna be a separate review app it's gonna be um part of a blade template but it'll act like an sba so i'll show you how to do that and then the um all the product data and items are through laravel in the database so right before we ended the last uh stream is we were adding in the seeders to get the data that we wanted for our products and categories and orders and users added into the database we saw that we ran a migration with the seeder that we currently have right now which is the user product order and category seeders that all run factories the problem with that was though is that the relationships that we have between specifically the many-to-many relationships between products and categories and products and orders didn't really go well um they uh they they didn't create and the problem with that is that we need to have some intermediary step or we need to have some way of adding the data that we need to add in between these runs and so what i'm going to do is i while i was eating i found this helpful answer from stack overflow that i'm going to implement what essentially we're going to do is we're going to remove or rather we're not going to use the order and category seeders we are just going to use the product seeder and what we're going to do is on this run method here is we're going to create products we're going to create categories and we're going to create orders and then we're going to run a for each loop on our products and attach categories and orders to each of those products so that'll create everything in one step and it'll attach everything that we need to attach to it in one go the downside to this though is that it kind of couples everything together is that um if we wanted to just add in a few more categories or a few more orders we won't be able to really do that if we wanted to add in products by themselves and not add in categories and orders we wouldn't be able to do that at least with this current set i'm about to show you now we could separate it out and we could have just a product seeder that just creates products with the factory and then we could create a different seeder that's called like product category order cedar and throw everything together in there but for simplicity's sake for this stream and for the video that's going to be accompanying this stream i'm just going to dump everything into this product seeder and if you'd like to split things out you are more than welcome to on your own application it will work both ways just fine spent three months trying to stripe to work didn't succeed yeah that's um i hear that a lot the whole reason that i'm doing this next video and this stream in general is that someone that i used to work with actually uh asked me to uh do a a video in a stream involving this is that they wanted to see the entire system larval view and stripe all working together um seamlessly i've encountered a larval package that provides a form-like user activity system package no um but i do know of one that i know of like a framework that exists that's built from larval that basically creates a form and everything for you i think it's called is it flarum that that uses larval yes yeah it's called flarum f-l-a-r-u-m um i know a few sites that use them and they've been happy with it so far okay so what i'm going to do is i'm going to so we have the products created so we are creating 20 products saving them in the database and now we're going to create four categories let's say those in the database as well so we need category through app.models which since i am using phpstorm and hit enter on that it automatically added in our use statement up here so we'll just be able to do category factory and we're going to create four of them and save them to the database with the create method and now what we're doing is let's find all of our products oh nope sorry uh one more thing is we want to create orders too so order i don't know why that's not there we go order factory times let's create 10 orders and create those as well okay now we need to run a for each loop on the other products so we can get all the products first of all so products equals product all and wait a second this is what this is what i'm trying to do here i think i'm doing this backwards i think we need to run a fortune the cat er yeah we need a four out of four two on the products when you get the categories first because we're going to be attaching those into it so category i could spell that right category all and then we need to run a and each loop on the products which is easy to do with eloquent we just say product all each and then that parameter is a closure function for each product we're going to be using our categories in that as well and so because we have the relationship of product two categories um and because it's a many to many relationship we use the attach or detach methods to either add them with that intermediary category product table or remove them from that table and so all we need to do is run product categories attach and we need to determine what we are attaching to those uh oops categorise categories attach um this would normally take an array of ids so if we were if we knew the ids of the categories that we wanted to attach um you know off hand we would do something like attach one two and three but excuse me but because we are doing this on the fly and we are doing this through seeder we need to have ids of categories that already exist and we need to have ids of the categories that we just created with that factory so there's four of them and uh we want to make about like one or two for each product um and so in order to do that we will do uh this categories random method which will pull uh any number of categories out so if we did three it'll give us three random categories from a non-sequential order we could do two uh or we could do one so i'm gonna do i'm gonna do two i think each product should have two random categories associated with it we're going to pluck out those ids from them and convert it to an array so this line is essentially giving us an array of two ids associated with two random categories that we created with this factory up here and that's attaching them to each of the individual products and that's that's our our entire uh that's how we need to get the the categories added into each of the products so now we need to attach orders to each product so now we'll do the same thing down here this will do orders equals all of the orders product all each function product and since i space that up now let me space that out down here use orders product attach and let's see here um so we want each product's order i'm trying to think how i'm doing this my am i doing this right i think so so this is essentially going to take three random orders and attach them to each products orders yeah so each each product will have three random orders attached to it which means at the end of the database seating should be a good variety of products per order oh we also need to run the order cedar order factory did i add the total so the problem is that there is there's an intermediary step that or an intermediary column that i need to add in that we go back to our order product table there's this quantity integer that needs to be added in as well and i believe that's part of the attach function is that i can add an intermediary column let me check that out real quick attach attach yep with an array of additional data to be inserted so it's literally just after let's see this is giving me an array which i need to i need to bypass each one of those so i think what i need to do is order ids equals orders is populate the ids first and then run a for each loop on the ids themselves so for each order ids as id and then product orders attach order id and we need quantity let's do a random number between 1 and 5. okay so that should be our entire product seeder how long will this stream be this will probably be about an additional 45 minutes to an hour i can't be on here too much longer i have to run out and do some errands in about 45 minutes or so so try to make it as long as possible try to get to a nice stopping point um and yeah we'll see how long it is all right so now in our database heater we don't need to call the order seeder anymore we don't need to call it a category receiver anymore we still need to call the user seat or we still need all our products either user seeder i need to generate orders for that as well so each order is attached to a user through a one-to-many relationship and then each order is also attached to multiple products and multiple products are in each order i'm trying to think of the best way to see this relationship well since i'm creating the orders here it makes sense to just do with user here because then i have my my order factory not my order factory um oh that doesn't i'm already generating the fake users here anyway so yeah never mind i don't i don't need to worry about that relationship at all so i should be able to run this and get all of the necessary that we need so let's try this out doctor compose run rm partisan dbc see the user database and c to the product database awesome all right fingers crossed this worked let's uh open up our database here let's do a refresh on it and let's see oh look at that okay so we have two categories per product which is exactly what we're expecting we have our four categories here i don't like that they're dots though that's definitely a problem with the faker um method that i use i think i use real text to get that order product and look at that we have a variety of quantities for each product in each order just exactly what we're expecting and then our orders here we have a user id a transaction id total amount okay that's perfect so now what i want to do is i want to start creating api endpoint actually first of all over here i'm just going to let's adjust these categories a little bit and get rid of this weird dot and um capitalization issue here how do i how do i save this what does this do copy to database export data this is my first time using save submit control enter cool so it works just like tableplus okay so now we're going to do is i'm going to create api endpoints to take this data and display it as json whenever we are going to request it from our view front end and so i can think of a few different endpoints that we're going to be needing we're going to be needing some place to show all the products or to grab all the products we want to grab the category associated with those products as well and then we want to grab all the data associated with the product pricing and stuff like that orders i don't think will be necessary for the api we won't need to grab those orders um i'll make the end point anyway though at least just to showcase what the data looks like um but yeah oh and while i'm here let me go to that category factory and change real text see what would be a better alternative for this because we need a category name but we need something that's not super like phony sounding you see real text provides this a whole sentence and i don't want that well dang i don't see anything that would be oh how about a job title that seems like it'll be a good real sounding fake text there we go okay so now let's create these uh api endpoints so we're going to go to routes api and right now we are not going to use any kind of authentication because these are going to be front end facing api routes that are accessible to our application just really fast larval now uses a newer repository of faker that is true yeah um i don't i don't know if there's any difference with the new one they use if there's any like newer uh points or not or like newer methods on endpoints but uh i'll have to check out that documentation see there's something better for stuff like that okay so i said we need a few routes we need to get all the product information basically as soon as the application loads up this is going to be a very very simple listing we have we have 20 products we have four categories very simplistic uh e-commerce site or shopping cart sites so i think the best thing to do would be uh have a route just called products or maybe even categories and it's i think categories would be bad i think if we work backwards it's going to be the best method so i think we should have a route called categories when the categories route loads up it loads the categories themselves and then the products that are attached to those categories so that way on our front end and through view we can run a for each loop on the categories dump out the category information like the title and then underneath each of those sections we can display the products that are associated with each of those categories so to yield a little bit a little bit longer of a response in terms in terms of the actual json that's coming out but i think it'll be a more simplistic front and experience a better way of using that data to pull in the information that we need as opposed to two separate uh calls so let's get started we're gonna have a about get um categories and oh it's the new syntax for larval eight oh what is it it's a category controller class and index and so we need to create that that uh that class to do that let's open up our command line dot compose run rm artisan and of course if you have ph binaries and it's all local you could just run artisan or php artist in the command line but i don't so i'm using it through docker compose make controller uh let's wrap these under an api endpoint uh api slash category controller i don't really need a resource controller for this um purely because i'm as far as the api goes i'm not doing any pushing to the categories nothing pushing to the products it's a read-only api that is going to be consumed by the view front-end so for this demonstration i also i'm also weird i like writing out most of my routes um unless they're like strict uh what's it called uh like crud routes i i like writing out each one individually okay so now we use app http controllers api category controller and then let's open up that category controller and we have a single route so far and we need that to return all the categories but we're returning it with the products okay so now if we navigate to our website and go to api categories that's really ugly let me get uh what is it json formatter extension that's what i'm looking for and refresh that's much better okay so now we have these categories so we are pulling in categories we have a name and a slug attached to the categories and we have products associated um with those those categories so this this first category mouse has uh seven products associated with it we have this two three four five six and seven and then each of these items has a price a description a name and and uh create an updated ad timestamps associated with it so yeah that's that's looking good um i think we should also add in just for just for fun let's also add in a specific category so let's say we wanted to go to a specific categories page we'll do category slash category categories slash category and that is associated with the category controller show method and let's say that we wanted to get an individual product we'll say products products and that will be a product controller show method all right and we won't have an actual products page um you know what let's let's do that too let's zoom out get all products is smaller than a lot of products associated with this so we can do this and index all right so first off let's create that show method for our category controller public function show and because i passed in just category here now we could do something like category id and then in the category controller we do category id and then we do you know category equals category find category id but i vastly prefer doing type ending with laravel it just it's so much better to work with routes especially resource routes like this where you know what's being passed in as an id is that we can just do category slash category here and then on this all we can do in the show method is call category category and it spits out the category that we want so we can just return that category and we'll turn it return it with the products that are attached to it i don't know if we have to run the get method on that or not i think we do now i think we have to do load products and then return category so now if we go to here we can go categories to implicit model binding yes that's what it's called implicit model binding you can never think of the actual technical term so yeah now we have our second route here or our second category here rabbits and it is returning back 12 items attached to it all right now let's work on our products so let's open up our command prompt again and we'll use the same command as before artisan make controller api slash product controller and it's been created so now we can open that up and we need two routes here index and show so now here we're going to return all the products but i'm going to return them with their categories so just like we did with the categories we're going to do the opposite on the products so each product all 40 of 20 of them all 20 of them that are going to be returned we're also going to see the category attached to that now we don't necessarily need all of the information that's coming back with the categories for our main products page because it's going to return back the name the slug the id it's also going to return back the dates that were created with it and we don't we don't necessarily need all of that data returned back and so what we can do is we can filter out just the items that we need from that return relationship i just remember how to do it so hold on uh let's find out larval with relationship uh filter no not filter pluck i'm gonna pluck all of it um i don't need to join either that's someone you know let's wing it i think i know what it is i think it's categories uh function query query plus um id and name wrapped in an array i think okay let's let's try that out and see what happens so if we go to api slash products class product controller doesn't exist what oh right it doesn't exist because i didn't put it in here let's try this again nope it's still returning everything which is not what we want oh and yes you're right i don't have to use this as an array but i don't use a double arrow i'll use a comma is it fields i think you might be thinking of a different framework all right larval return only certain fields select is it literally just select find all there's only certain fields relationship i cannot how to get specific columns using width here we go query select okay so i i was on the right track i said select i think who knows does it need an array now just a comma separated list so id and name now let's try this out expect parameter want to be string object given okay well this looks like it's internal into laravel oh i didn't know you could add that right into the width so you're saying with was that a colon with categories id name i can just run that that's true that's awesome oh wow i did not know that at all i knew you could run like um if you want to get like single um what's it called if you want to get single attributes i think you could do like categories dot name and it would just return the name but i didn't know you could do that with multiple values relationship name no that's nested relationships so yeah i had no idea you could do that that is awesome i'm going to use that so much in the future and i'll probably post about that on twitter tonight okay so now we have our products associated with categories and we just have the attributes that are useful to our categories which is the id and the name so the id we can use to link out to the category if we need to use the id for it and then the name just so we can display it underneath like the product information and our last route that we need to get is this specific product so we can return product we'll actually see product load and we'll do the same thing as above categories id name and return product so now if we go back to our screen and go to product two we should see this exact block of of uh json here returned yep perfect all right so we have our products all given to us we have our categories all given to us um i think it's time that we start getting some front ends i've added in here so we can start displaying what these actually look like to us and so in order to do that i'm going to get rid of my music stopped playing i just realized it was really quiet in here my music stopped playing that's better okay so let's exit out of everything we have so far and we're going to get rid of resources we're going to get rid of this welcome view here or rather we'll just at least edit it to our use let's change out the title to live view shopping cart font family's good let's get rid of this style here condense some of this stuff down a little bit we're going to use uh tailwind to build out this so we'll do a link we're going to use mix to put this together so it'll be mix uh css app.css and then for all this let's just get rid of this this is going to be wrapped in a container centered and we'll just do with a div with an idea of app that's going to be the anchor the base for our um view container and actually let's let's save this as uh something different let's rename this as just app.php and then we need to open up our web php file and return the app view okay now before i do that let's um or before i display that let's get this app.css file where we need it to be so if you look at our current resources it's just it's just blank uh we need to add and tailwind to this in order to do that we're going to need i believe a plug-in to our mix file here i did this recently so let me pull up um logo mix tailwind this was seven months ago was this it i don't think this is what i was looking for i know larval had a way to add in tailwind into it maybe just larval tailwind yeah this is it okay so first thing that we're going to need to do is run nbm install on the dependencies that we already have right now um so we could use npm through docker compose run but i believe that i have it installed locally so i might just i'm just gonna run it through um my local node installation here and just make sure that okay yeah i have it installed here so i'm just gonna run npm install oh not in the source directory there we go so yeah you could uh if you don't have npm installed or a node install locally you could just run docker compose run rm npm install but i found that it's just it's fairly slow unlike composer which now uses composer 2 and it's pretty fast and docker composed npm still lags behind a decent amount alright so that's installed not clara they didn't do anything clear okay so now our next thing to do is install these dependencies for tailwind so we'll just do that perfect and i don't really care about the tailwind css file or to the the tailwind config file because i'm not going to worry about purging unused styles right now we're just going to build the whole thing out all right so it looks like we need to add this required tailwind css line underneath our post css for mix and newer versions of larval i don't know when they added this in there i think they added in an 8 but it might have been earlier does control l work on windows for clearing terminal screen i don't know actually let's find out let's just create this and uh it does i did not know that it's good to know thanks i'm learning so much tonight um i don't know when they added uh post css in here instead of just the the move away from sas i think it was larvae but i'm not sure so if you're using a version of larval before larvale you might have to use a third-party um package to get this kind of functionality out in here it's the one that i showed earlier it's a uh larva mix it's it's this here you'll have to use this um because it's it's still using either lesser or sass and then this additional tailwind down here but because we're on laravel 8 and because post css is added in that by default instead of sas we can use the default tailwind and all we need to do is oops is just say require sale and css in there that's literally it um before we build this though we need to tell our css what parts of tow when we want we want to be in there so right now i mean our app.css file is empty and in order to actually include it in our app.css file we need to use these three tailwind components here so we have base components and utilities and all we do is go into our app.css file paste them in there save it and we are good to go and each one of these is this particular part of tailwind all three of them is the entire tailwind library but if you just want to pick and choose which ones you'd want to use the base i think is that the reset and like um some basic uh like global components and then the components is um things like containers and uh grid layouts and then you get the utilities which is the texts colors uh margins and all that good stuff so that's everything added in and all we should be able to do is run npm dev to compile our assets create the mix file and then um save in our tl1css to the appropriate file how's my experience with tailwind version two i like it um i don't use tailwind that much in all honesty um the bulk of the work that i do is in bootstrap uh specifically bootstrap 4. i use that on an almost daily basis but i've been using tailwind css more and more on my personal projects and in my videos just because it's it's so easy to get something up and running that looks really nice and um i from what i ca i've seen at least in the changes that i remember between uh tail one version two and one it's it seems a lot more polished um a lot nicer so i'm happy with it so far but yeah uh i was very not adamantly against it but i was very i was on the fence about sailing for the longest time like you know why why is this necessary this is basically just inline css but with additional steps but um the more i've used it the more i've grown to like it yeah larval hate did bring a lot of a lot of changes to the front end a lot of stuff that um a lot of people weren't happy with that got quote unquote forced in but if you don't like it it's fairly easy to abstract it out um you know they've always been uh a framework that's pushed the envelope and really tried to to experiment with new technologies and new things so i gotta i gotta hand it to them that i appreciate that and still like it okay so we have we should have compiled assets now if we go to our public directory in css app.css yep we have everything looking good so that means that our app.css file should be pulling in so let's just um let's test that out if we go to here oh if we go to here refresh we should be able to see we have our titles updated and it's blank but we don't we don't have anything here yet but we should be able to see that we have a container here and our app file or our app uh div here perfect so now we can get actually started with view creating components for this single page app and by default laravel includes view so we are good with that we have an app.js file and a bootstrap.js file our bootchef.js file has lodash we got axios off the bat ready to go so let's just get rid of all these comments here and we're not going to be using echo because we're not going to be doing any kind of web sockets work okay we don't have view by default i think it installs a pedal but it doesn't utilize it anymore it used to use it just a few template compilers install by default so we don't have view by default that's no problem getting started views not that hard so we should just be able to run npm install save view perfect now can we or control l gotta remember that i gotta remember that and now on our main map.js file we should be able to just run const app equals new view we're attaching this to the app element and let's just test something out with some quick data uh hello world this is just to make sure that our um view files up and running so if we go to our app and uh our app element and we'll add in like a h2 tag etext foo and then we will need to add in this script tag before the body close and with mix again jsf.js now we recompile everything with and once that's done if we refresh the page we should see our hello world string add it in oh excuse me let's find out not working why is it working what did i do wrong why is the console view is not defined did i stupidly not import view yep is it just import view from view is that what it is oh phpstorm imports it for me really very nandy all right run dev again and once this gets going i'll probably shift to run watch so uh this will all hot reload i don't have to worry about running the build sip every time that we make a change to the javascript file so we're gonna be doing that a lot all right one more time hey look at that we have our hello world statement up and running which means that view is running as expected why am i using windows good question well i have oops i have a pretty powerful gaming computer that i use on a day-to-day basis and it's better than the macbook that i use to create my videos on especially when it comes to streaming and running docker and uh building stuff in php storm at the same time it's going to require a lot of resources and so this is just the best computer that i have i could run elementary os or some other linux distribution on it but i've been using windows with wsl2 for a couple months and i like it it runs docker just fine it runs all of the programs that i use for streaming and development perfectly fine so um it's definitely not the environment that it was when i started developing about 10 years ago windows was awful to work with it was stubborn it was very closed uh closed-loop system uh that basically if you weren't a c-sharp or dot-net developer it was really hard to do any kind of web work and stuff like that on a windows system but it's it's gotten a lot better over the last few um a few years last few years they've been doing a lot of stuff with open source work they've been doing a lot of stuff with the web development the web development community so i figure i'll make it work for me and it's been difficult it's not without a share of bugs but it's um it's not bad i'm i'm liking it uh yeah i stream with obs i got obs and um i'm using restream which is it's pushing out to both twitch and youtube right now okay where was i um yeah so we got view added in here we got some data points we got our app blade file and we are not going to be using view um as a piecemail system through different blade templates we are actually going to be using vue as a essentially single page application in a single blade template file and i've done this before a few times it's actually fairly easy what we're going to do um moving forward is we are going to create our routes file for view we are going to create our individual pages for each route and the entire thing is going to be it's going to use the window or the the history window setting so we're not going to see any kind of hash in the window it'll parse everything uh through a route just as expected and i'm going to just run through and get that started right now so let's get rid of this data attribute we'll keep the el here i'm going to need to get view x it's going to get view router and i'm going to see if i can pull up a boilerplate that has both of those on that i've used before see if i can find it you have a custom ubuntu machine built that handles everything great i would recommend um yeah that sounds awesome i used to dual boot this machine with elementary os which is built off ubuntu and i liked it a lot there was just some things that i couldn't um i couldn't figure out well uh my graphics card had an issue it's a newer radeon rx 580 that kicked out some weird um problems and wouldn't display the resolution right and then um i wasn't able to map the keyboard the way i wanted it to which was kind of off-putting it's honestly the only two reasons that i went back on windows and kind of forced myself to learn development on it okay so what you're going to see here is just some some boilerplate stuff that i'll be adding in from the previous project that i had it's going to use view router and view x inside of laravel so this won't be a separate view application that's actually running through our laravel application house everything that we need for you to house um i'm gonna get rid of this and import this above here first i won't use why don't you use resources uh the only reason i said this earlier i'm not sure if you were here or not the reason i'm not using resource routes with this particular application is because i don't need all of them um at least from our view app it's going to be a read-only api we're just getting back um products and categories we're not pushing new products and new categories out there we're not deleting products and categories through the api so we i just need a few read-only routes later on when we start doing working with orders and transactions i might use resource routes for that but even in that note i'm not going to be necessarily reading transactions and altering them afterwards i'm just going to be pushing up one or two uh post routes more than likely from vue in order to save the transaction and continue onward so it just it makes it simpler for me i like seeing um the individual routes that i have laid out if i don't have a lot of them for a particular model all right where am i import view let's see important ux let me just save that there as well okay so let's get view xmv router installed well that's going go back here and we're going to create a new router that's going to be defined by a routes.js file oops let me put that there and we will also need to create a new store that store is going to have a state of different items some mutations and some actions and then for our app router store and then i would like to on the created method let's run like something called get categories and that's going to run up here okay what is the difference from json collection and resource collection i only use json by what is purpose of the other never in amd but yeah nvidia has some issues um that's a good question i don't think i've ever used json collection before i know the resource collection essentially just is a boilerplate for creating like uh crud api routes um or not apis but like just crud routes for your application so easily have a uh create uh what's it create index show edit update and delete um routes you can easily attach views to each of those okay do we have we have our stuff installed here so this is what our current app.js file is going to look like we are importing view view x and attaching it to view view router and attaching it to view and then our router is set up with a routes file that's separate and we have a store here that's going to have a state accessible to a throughout our entire application mutations to alter that state and then actions to do things that will eventually be committed to that state get categories right now is probably the only action that we're going to have for a while that's going to fetch the categories and attach products in the api and then add them into our state so actually up here we can just use state that we need categories which is currently an empty array all right so let's create our rouse.js file so we can actually start mapping out the routes that we're going to be using for this application so we have js new file to routes.js all right first route is easy it's the landing route we'll name it products.index and it needs a component let's say routes products index.view and we need to append it with default at the end of it another route could be let's look at an individual product so we could do um slug name products.show component require routes products show that view that defaults actually let's append this with slash product slash slug i'll be easier to differentiate later um and uh we'll need a checkout screen and check out index component require routes checkout and view defaults uh shopping cart and how about okay so the flow should go cart then check out and then finally something else that's after checkout so checkout would be where the payment's actually made summary order summary you know in all honesty i actually uh i might wrap these because these all kind of form a similar purpose you're showing items and then performing a checkout for our transaction through the larval api and then returning back some kind of order data so i think i might call this oops i think i might call this maybe order.cart and we'll wrap all these underneath an order route here so order.cart order.checkout and order dot summary i'm probably gonna forget these later but it's okay we're good now our order of routes in the array important uh for this it's it it's kind of like larval so because i have this product slug here if i instead did slug like that these routes below here would never fire because these are all slash um some name and because this is a placeholder and view for a id or slug or anything like that it's going to assume that or it's going to match whatever route any of these are so instead of slash cart going to the cart component it would actually go to the product show component if i kept it like that and so that's why i kind of prefixed it with that product otherwise if i if i didn't want to prefix it with product and just have slug i just put it at the bottom of this right here so that would be the last thing that um the application checks for in the url matching yep exactly what a teapot said thank you thank you okay so i'm going to go ahead and start creating these routes and i'll just do that um i'm using powershell and i don't like doing that so i'm just going to use phpstorm and create them in here so we have you know routes directory and inside the routes directory we need another directory called products and order and then in order we need view checkout and summary of you so we have our order routes files and now we need index and show dot view for products index.view and showdown view okay perfect so now to test out that our routes are actually working on our index method so let's open up our index product file here we'll create a simple uh template for view let's just do h2 text lg i think is what uh large text is in tailwind and we'll just do hello index route and if we save that and once again run npm dev whenever we boot up our view app we should be able to see that route because it's the index route for our entire web app troika all right nice to meet you too i recently heard about livewire can you do can you someday do a similar project in livewire for comparison i will have to learn livewire i've been working with you for the last couple of years but yeah i've heard good things about it so i will definitely start doing a couple of videos on livewire if you are interested in learning about similar applications using that instead of view we get a console error method foo is not defined on the instance oh that's because i forgot to update our blade template so now instead of inside of our app to display our single page application to display all of the stuff that's coming out of our router we use the router i think i think it's v-router now i'm doubting myself router view and not there we go that's what i'm looking for okay so now if we refresh we should uh try it out have ever tried next.js i have hey look at that our index route is displaying just as expected uh i have tried out uh next.js i actually like it a lot why is required in routes instead of important lazy load um just what i'm used to uh for something small like this i like having everything added in basically at the get-go um most of these routes are going to be fairly minuscule in terms of the compiled js size so getting them all added in at page load instead of individually um doesn't really make that much of a difference for render time but it's it's a little bit speedier in in my opinion that i've seen going back and forth between different pages but yeah i've tried out next.js um i like it i like it it knocks as well um i haven't tried them out as much as i'd like to but i did um i have gotten uh them i've gotten some use out of them i didn't realize how late it's gotten either i didn't realize it's already 10 o'clock here so if you guys don't mind i'm going to be stopping this stream right now i think this is in a decent place and i will try to pick it up uh again tomorrow if i have time if not i like i said before the rest of this everything that we've covered so far as well as getting the entire application set up in view showing shopping carts being able to select items showing items styling everything and then actually checking out with stripe and processing the payments with laravel cashier will be all compiled into a video less than an hour long most likely 30 to 40 minutes and it will be put on my youtube channel later this week most likely friday at the latest so thank you guys so much for watching thank you for your support uh if you have any other questions or if you need any if you if you want to see other streams like this or any content for other streams like this please let me know if there's anything i could have done differently through this stream please let me know either on my twitter the comments here or at my email address which is on my personal website and on all my social networks so thank you guys so much for watching

Channel: Andrew Schmelyun

Views: 3,432

Keywords:

Id: uUDxCUVkdLY

Length: 80min 24sec (4824 seconds)

Published: Sun Dec 13 2020