How to set up React Router in a Laravel App - Polaris Navigation for Laravel devs | L4Webdesign

hi my name is lee thank you for tuning in welcome to alpha web design in my last video i showed you how you can uh install polaris and use the front-end style guide from shopify within your shopify app and i showed you how you can create a navigation but until now that navigation is not working because we will still need to integrate a react router and integrate it with laravel with the routing of laravel so that is what i want to show you today um you can also follow along if you were not using polaris but just want to know how to integrate react router with a level router and yeah let's jump right in okay so this is the state of our app currently uh we have the navigation front end installed but it's not working correctly so as soon as we click on orders for example we will be redirected uh to a page that is not there yet that's why we get this 404 error um from laravel and now we want to fix that okay so let's jump right into vs code and take a look at what we have so far if we go here to resources js and take a look at our components we still have our example component and we have our urls let's just say for the sake of this tutorial we just want two urls one is a regular url which was uh you know our home which will be our home directory and then we will have a second uh url let's just say we want to have our settings uh the label should be settings as well um we're not gonna make we're not gonna need an icon and we also don't need a badge for now just keep it as simple as possible let's save this right here and so we have our example js the next thing that i want to do is i want to rename it i don't want my component to be called example i want my component to be called index so i want this to be my index component so what i want to do is i want to rename it right here say index uh you can right click and click rename or you choose if you're on a mac you can just go here and press enter and it's gonna let you rename then i want to go to function name and say it's going to be called index let's copy this right here i'm gonna export this function and it's exported with the name of index i'm gonna say here document get element by root that is still the same and i wanted to render my index component now save it then i want to go ahead to app.js and instead of requiring um the previous example component i wanted to require my index component that i just renamed and what i have to do now is say impm run watch you can also run npm run dev but npm run watch will steadily check if you made some changes to your files so i'ma just say npm run watch okay so it has compiled successfully let's go over let's head over to our shopify store and see if it is still the same should be and there we can see we still have the same component it's just now called index.js okay perfect so the next thing that i want to do is i want to create the components that i will need for my app later on so i want to create the home component and i want to create my settings component so i'm going to do that right now i will create new directories for each component i'm going to say home create a new file say home dot js and if you've installed uh react snippets which is an extension for vs code um let me just take a look is it this right here yeah react snippets you can install this extension for vs code right here and if you have that then you can just type in rfc and it will create this boilerplate code foreign react component functional component for you so i'm going to say hi from home component just so later on we will know that it works we will care about the styling later and i also want a settings component now i put it into the wrong directory i want to put it in here okay so i got the settings right here i'm gonna say settings.js i'm gonna type rfc again and i'm gonna say hi from settings com component there we go all right so we got our two components set up let's see what we have to do next i want to create a new directory uh which will have the purpose of routing so i will create a new folder right here and i'm gonna call it routing and i will now set up my routing my react router so i'ma just create a new file called routes dot js i'm gonna say rfc again just type in routes right here and i will have to install an npm package react router so i'm gonna say npm i react router now that i have installed react router i can now define my routes within this component right here so i'm gonna go ahead and say um i'll keep this inside of a div put it all into the next row i will say first i will have to import route from react router and i will now define my route which will have the path that we've defined before one path will just be a slash and i will have this home component and you can see that vs code will auto import my home component that i previously set up so i can just click enter and close this component right here next route will be my settings route so i can say route and give it a path of settings and i will import my settings vs code will also auto import my settings component close it and we are done with the routes all right perfect so let's take a look at what we have done so far we've got our index.js which has this app provider and the navigation we have our component we have our home component our settings component we have our routes file which will define the routes in our app with react router and we have this app.js file which imports this index file and then compiles everything down with the help of webpack that is unnecessary right now but i want to point your attention to this navigation file this navigation component right here because that is a polaris component and to be honest polaris doesn't have the best documentation so it can be kind of mind-boggling to install this navigation right here i certainly had some issues with it but i'm trying to show you how kind of how things work or how they want things to work so if you go ahead and if you go over to the navigation documentation from shopify polaris you can see that they tell you that the navigation component is used within a frame of an application and let's go over to the frame and take a look what that is here we have the frame component uh so the whole app should be within that frame and the navigation only works within that frame right here and how that should be set up you can see a code example right here and if we go down to the bottom you can see right here we have the frame component and the navigation will be a prop for the frame component so the frame component accepts uh a react prop as a child all right so we're gonna have to refactor our code again a little bit and so that the navigation will be part of the frame component for it to work so let's go back to vs code here we are again and um what i want to do right now is i want to go ahead to the routing directory and create a new file i'm not call this a new file our app app frame dot js say rfc again and the first thing that i want to do is i want to load my frame component inside of here and i will give this frame component the prop called navigation and i'm gonna say curly brackets and i will say navigation markup just like they did in the documentation now we don't have the navigation markup yet but we can create it so let us create the navigation markup navigation markup and where we have to give it a react component we can copy that react component from our index.js where we created the navigation already so let's head over to index.js and let us just cut out this navigation component that we have right here i'm going to say command x cut this out go back to my app frame and i will now paste it inside of here so let us save this and now we have created this frame with our navigation markup of course we have cut out all of we have cut out the component from index js so i want it i want to import it again and i will have to say let's maybe let's see if it will auto import um open this bracket right here and say app frame and it will actually auto import my app frame as well all right let's save this so what have we done we have kind of refactored it we have um put the navigation that used to be here and put it inside of our app frame dot js and used the navigation markup and gave this navigation markup to our frame component as a prop i know this might be a little bit confusing but that's just the way that shopify wants us to use their polaris app and uh so that's what we have so far basically what we've done until now is we just refactored everything we put some we cut out some code here and put it into another component we wrapped it inside of the frame component give it a prop and yeah basically what we've done now is just some refactoring so let's take a look at our changes and nothing should have changed we gonna say npm run watch okay it compiled successfully let's go back to our shopify app i will hit a refresh and it should stay the same and as we can see i messed up all right now let's see uh where that error comes from um what's happening navigation is not defined in app frame let's go back to upframe and all right i did not import my navigation component because i just copy and pasted it and did not import it so let's import it save the file and i will go back to my shopify app again take a look refresh and there we go okay so everything is working and we can continue with the development of our app all right so let's continue with that let's go back to vs code okay now what is missing here is we didn't pass our app the routes that we have previously set so in this component we defined the routes and the components that the app is routing to but in our our app we haven't registered them within our app that's why we can pass some children to our frame component right here and we can just tell them hey use those routes that we've defined before i can type in routes and vs code is will be kind enough to auto import it for us and also if i save it it will just give me those brackets right here and now i have registered those routes within my app frame right here but we are not done yet because we still have to um use the browser router uh react browser router in our app so our app has to be wrapped inside of the browser router yeah you can read that inside of the react router documentation i don't want to go in too far into uh react router documentation i will leave a link in the description so you can read it yourself but still you need to use the browser router nonetheless there's no way around it all right so let's say browser router let us auto import it again and cut this put it inside of here save it and now we have the browser router installed as well um you might see something i just read that in a documentation of shopify so i want to put it inside of here as well we need a prop called i 18 and give it some translations say say en translations i'm not exactly sure why this is necessary but i will just um show you you can import it here and say uh en translations from uh it's from shopify polaris locales and dot chasing okay so now we have our app with our frame inside of our check index file in here we have this frame component we will pass it some some props with our navigation markup we will also pass it our routes that we have defined before we all put it in an app provider which is uh which is necessary from shopify polaris everything has to be inside of an app provider and our whole app needs to be inside wrapped around or wrapped inside of the browser router in order for react router to work i know it's inception but you will get used to it okay so um yeah actually it should work now so our react app should work but i think if i go back to my shopify app i will still get an error let us try it okay we'll say hi from home component if i go to settings i should get a 404 all right i will get a 404 because we're inside of a laravel app and i set a route inside of my uh react app i set her out to slash settings so that will tell laravel hey go to the route settings but laravel doesn't know that route settings so we will have to tell laravel hey and it doesn't matter which route we will go to we will always have to come back to our welcome page so no matter where you where we are pointing to always go back to the welcome page and that is the last step that we have to do right now all right so let's go back to our vs code and fix that really quick back up my vs code i will open uh my web.php with command p look for web.php where all of the routes are defined you can see here that um if we hit just the regular slash route we will return uh the welcome view which then loads up our react app and then we will go to react router and react router will point us to home component that's why we saw hi from home component but we haven't set up any route for settings we don't want to say slash but we want to give it curly brackets and say path and that should be it let's save it and check it out again all right that is strange let me let me see what's happening here all right all right all right all right okay i'm back at it again so i found the problem uh the problem was that i just said here that i wanted to have a path a wild card path but i will i also i always have to set this slash right here as my uh path so that it will know okay always go to uh go to the welcome view but if you type in anything or if you direct to anywhere else then there's um home or yeah just slash directory also go to the welcome view so that is all you have to do right here you just have to type in those two uh routes and then you will always get to the correct route what you also have to do is in your routes file right here always type in exact photo route at least for this just slash route so it will always um always point you to the to the right route what you also still have to do is you have to go to your app frame take a look at your location because right now we have a problem i want to go back here and i want to show you the problem here if you go to settings to the settings you are on the right component but this navigation will show you that you're at the wrong component that is because if we go back here um the location is always set to our home directory but what we want to do is we want to set this to uh location dot path name all right and we also want to give this right here another property and it should be called exact match and we will give it true is that right no it's not right just give it true and i'm gonna copy that and i will always also give this right here a true and of course this is an object so i will have to give it a colon and i have to give it a colon right here save it now it shouldn't return an error anymore all right it compiled successfully now let's take a look at our shopify app refresh the whole thing now the moment of truth let's take a look here we have hive from app component now let's switch over to settings and we have high from settings and this settings right here is activated as well so i can now switch between um pages i can switch between components and that is what we wanted now we have that functionality as well so i hope you could learn something from this tutorial i certainly had a hard time learning this and figuring out what to do with it but um yeah i hope this is uh yeah it has been informative to you and um in the next video we will just always step by step uh yeah further develop this this app right here uh if this video was helpful helpful or informative to you please leave us like like and subscribe and i will see you in the next one bye

Channel: L4 Webdesign

Views: 2,181

Keywords: shopify, laravel, shopify developer, shopify app, shopify apps, php, php7, react, reactjs, react router, react router dom, react laravel, react polaris, shopify polaris, polaris frontend, laravel polaris, polaris navigation, react js, react developer, frontend developer, shopify app development, php laravel, php developer, ecommerce, l4webdesign, ecommerce development, php8, laravel7, laravel 8, laravel developer, javascript developer, frontend, frontend framework

Id: q8UAoAN4NnM

Length: 27min 20sec (1640 seconds)

Published: Tue Oct 05 2021