Expo Router v2 is a Game Changer

what's up node.js developers today is a new live stream and today what we're gonna do is we're gonna have a first look at Expo router version 2. this video is going to be different because we're not just gonna mention or go through the list of updates what I want to do is I want to actually roll up my sleeves and have a very practical experience with all the new features introducing the export router version 2. Expo router the version 2 of it was introduced together with Expo sdk49 and the version one has been available for already I think five months and I really loved using it in my applications when building rack native applications because it really simplifies the way we Implement navigation you're gonna see more details about it in a moment but if you are interested in um more updates that was we're introduced in Xbox Decay 49 make sure to check out the video that we have done yesterday that was specifically focused on the update introduced to the Expo SDK 49 because in this video we will focus only on where export router version 2 updates because there are a lot of new things and I wanted to dedicate a separate live stream for this so starting from like static routes uh like us a synchronous route that styling and CSS support for web additional SEO features like the Xbox head that allows us to adjust the SEO parameters and meta details about the pages and a lot more uh that we're gonna have a look today and Implement in a real project the way we're gonna do that is we're gonna continue the same project that we started yesterday when we cover the Xbox Decay 49 and if you haven't checked the tower tour if you haven't built that project yourself I'm gonna provide you with a starter project for yourself just for everyone to start from the same page and be ready to to follow along with the features that we're gonna do today so if you want to uh to follow along make sure to open up the guide at notjust.dev blog slash Expo router 2 and also make sure to download the asset asset bundle following this URL and you can find all of these URLs uh in the description of a video the first one step-by-step guide and the asset bundle will uh will provide you with a source code you you can get it here from Expo from them from the asset bundle and then open up the step-by-step guide that includes all the steps that we have to take in today's tutorial to explore all the new features and with that being said I think we are ready to get started so let's roll the intro [Applause] foreign hello everyone and hello everyone who is joining live today Zaki brain power Kathleen how are you doing let me know where are you joining us from and uh while you're downloading the asset bundle go ahead I'm gonna also find it to show you what's available there so here we have it what you should see in the asset bundle is where asset bundle here you're gonna find the presentation and you're gonna find this dot zip folder that will include the source code of our project that we built yesterday in the previous live stream so go ahead and uh unzip it then open it with in a Visual Studio code window here we should have it let's open up a terminal and start by installing them dependencies using npmi hopefully you can see it well and after that we can start by development server with npm started here we should have it and let's run the application we can run it either on a physical device by scanning this QR code on our phone we can run it on iOS simulator by pressing on I we can run it through Android emulator by pressing a and even on web by pressing W and you will see that we load it here on the web loading indicator and here we have our a boats so real quick like this application just simply displays a list of astronomy pictures these astronomy pictures they are queried from the API from NASA API and we we're using a demo key if you're gonna have some issues with the requests you can inspect the the request by opening them uh the debugger by pressing J in the CLI come on what's going on where is my browser yep and let's press J yes and you're gonna be able to inspect the network requests and here I might see I should see a request to that NASA API if something is happening there come on I'm gonna clear and do them again come on where are the requests yeah here we have uh sometimes it might fail because your API key is a demo key and it is very limited so what you can do is go ahead at NASA API and you can generate a free key for yourself by simply putting your details here and if you go back to your project create an dot EnV file with export public API key based in your private your API key and then you're gonna have access to a lot more requests to that API anyway um that's our application that's what we're gonna use uh today to explore all the new features from Expo router version 2. again um a quick recap of what is export router and how is it different from other navigation libraries um let's let's have a very short intro about it so Expo router is the first file based navigation system and what does that mean that means that we simply create files in our app directory and these files are automatically mapped to new screens in our application and what do I mean by that for example it's going to be very easy to see that if we open it on web and then the home the the home screen is going to be mapped to the index file however if we add here a file uh like about us dot TSX and if we add here a simple component about us then we don't have that's the only thing that we have to do we Define a file we export a react component and if now we go to that slash about that Dash using the name of this file this will automatically be mapped to the about us and we see uh the the string that we wrote here how it helps us easier manage our routes because the only thing what we have to do is basically create these files in our app directory and then everything else is taken care by us but this is only on the surface like besides this there are a lot of other um very handy uh things that are happening automatically for us including like automatically deep links and now every single screen in our application has a deep link configured and we can basically connect and send send users to a specific screen in our application by pressing on some button or by pressing on a URL um yeah that's that's very short intro about explorator before we dive deeper into the new things that have been added tracks for router the first one that is very small but I'm still excited about is that from explorator V2 we can move our app directory inside our source folder and I like this because in I will press yes to update all the Imports but in your case if it didn't ask you for that go ahead and make sure that all these Imports are correctly relative to this new directory um so for that we have to stop the server start it again and run by application again as I said this is a very small update but I really like to have all my source code inside the source directory and yeah now this is possible we don't have to put the application in the root folder we can do it in the source perfect so that's the first small thing that I really like about it the next one is coming uh to to improvements in uh in there more support for typescript and here I'm talking specifically about earliest Imports actually let me open the announcing of Expo router and we uh shout out to even for doing everything for Expo router it's really amazing and there are a lot of steam ports here we see that we can specify shortcuts to some of the directories and use that in our Import in order to get rid of our spaghetti Imports wherever we have to we wherever we have like very long relative paths like going outside of the directory with with dot dot multiple times so let me show what uh what I mean by that with documentation for this we can find here using typescript and specifically puff aliases what we have to do is we have to enable them inside our app.js uh so let's go to app.json and Expo at the end after plugins let's add experiments in one of these experiments is VTS config pubs true let's enable them first and the second step to to have them working is to Define these Pops in the tsconfig.json this is a very standard thing for typescript to Define aliases um so what we have to do here is first of all provide the base URL which is going to be our root directory where we can even put them as RC but let me actually do the other root even without last Imports something that was added and I think is not talked a lot in the in the um announcement release is that the um absolute path import so what do I mean by that having this base URL here somewhere in our application let's say here in our application index what we can do instead of having like uh relative paths that starts with a DOT meaning like from this directory go and navigate to to the directory up and then components and so on what we can do is we can Define absolute Puffs which are relative to the root directory of our project so that means that we can start with without dot we can start Source then Dash is going to be components Source components and then the folder so as you can see this actually should work and if I'm gonna restart the let's have a look if it will work actually work yes it's working so this is a absolute buff that is kind of relative to the root of our folder where how absolute paths are managed can be adjusted by this base URL here we said that the base URL should be the root directory of our project but if we provide here with base URL as source in that case where where absolute Puffs will be relative to this base URL and in index.ts now we don't even have to import The Source we can go component upward list item and yeah because our tsconfig said that the base URL is our source directory it will merge it with this import and will properly find the component from the components directory anyway that is the absolute pops for importing modules but when we started this talk we were talking about the earliest pops and Alias Puffs is providing uh providing yeah like shortcast to very specific Pops that we can reuse then to in our import so to do that all we have to do is to Define our pubs and uh we here is an object with different uh uh aliases so for example we can Define one that will be like this at cyan and whenever we have an import with starting with ADD and then anything else what we want to do is we want to replace it with source then the rest of the the path that we provided and in this case it's not going to make a lot of sense because in this case uh absolute Puffs make more sense here but what we can do is we can provide the ad then slash add slash and let me check in the TS config add slash will go to the source slash yes and I think we have to restart the server let's try that will it work why is not working add cannot find modules pumps at slash source so at slash Source oh because the base URL for us is um is source so in this case in this case it will make more sense if we have for example uh Alias at component at comp and then we can go to the components slash and the rest of the puff and I think we don't need to start it with this because the base you're really source so it's going to be Source components and the rest is it true let's try an index now to import from at comp and as we can see our apod list was imported correctly and it was imported using an earliest import basically this part from tsconfigs was mapped to the components and because basically Source it landed on Source components and then the rest of the path was added afterwards and the rest of the buff is this output list items so you can have like these pops for uh there are options like you can have only for the source but if your project is huge like you can have like comp you can have like uh at service for the services you can have at API for the API folder and if you have like even more nesting in your application it's going to help you even more to get rid of this um of this unnecessary long import Center in your application perfect guys let me know any questions if you have any and we will continue with our project so what I'm gonna do is I'm gonna do git add earliest Imports perfect git commit minus m M okay next one the next one is um actually for the next one here I have uh our automatically typed routes but for that we're gonna need a little bit more route in our application so let's actually skip it for now and let's build our Dynamic detailed page uh that's gonna be a new page that uh we will display for every single uh uh list item for more details the navigation to that page is already implemented so if we press on this title we're gonna be navigated to a route called apod slash and the date of that appod but in our app directory that contains our screens there is no file that will handle that screen so that's why at the moment we have unmatched route so let's go ahead and Define that file and I'm going to start with defining a folder called apod because that that is this apple they want to be part of a URL I want to go to like our URL then slash apad and then slash I want to provide with date which will be the dynamic part of our page so uh to have Dynamic path to have a dynamic pump all we have to do is provide the name of a variable inside the square brackets then.tsx in this case I provided with date as the dynamic path and here if I do react native functional export this is a little snippet that just simply defines um which simply defines a empty racked component you can write it yourself and we have to export it here yeah apple details now what does that mean if I will open this part as I said like all the app files from our application were mapped to some URLs the home screen is where our index file from the root application the about us we saw if we navigate to slash about us but how do we navigate to these APO details to do that one part the next part of our URL will be the name of a directory so that's going to be open slash and then the date is dynamic parameter so that this part will be basically a normal date like 12 12 2023 and as we can see we see a text April details and the next question is how do we get this Dynamic date inside our file we get that using the we get with using the use local search parameters and this is something that was updated in the export router version 2. because in version 1 was use previously it was use search programs now we have the use local third params and we use Global search params maybe a bit later we can talk about the difference about that but what we are interested right now is in the local search parameters and that's how we're gonna get access to the date which is should match exactly the name of them of a variable that we provided here in the file so now if we are going to display it here on the screen on the web we see that the value that we provided in the URL is displayed on the screen which means that we have access to that value inside our component okay so uh what can we do with this date well we need to in our API input we need to have an one more function uh that will fetch one above by date so if you go to the guide I have here the fetch input but we can copy paste that will receive the date and we'll send a request to NAS API for that specific date and will give us the result of a iPod like the Astronomy Picture of a day for that specific date now back in our dynamic Details page let's go ahead and Define first of all the state of our iPod where we will store it after querying it use State we can even specify the type apod and initially can be null then in a user fact when where this component mounts or maybe not on the component mounts but when actually the date changes because whenever the day changes what we want to do is we want to fetch apod by providing this date from that we parsed from the URL and then what we can do is set apod so let's make sure to import use state from react we use effect as well and after that what we can do is if we do not have any airport details yet let's simply return an activity indicator like a loading screen return activity indicator otherwise let's maybe a return of the apod list item that will render the same structure as there but list item with a plot from the state and let's have a look uh maybe the date is actually in a different format so what we can do is go we can go back to our home screen and press on the title of one of his aperts if I press on this one we are redirected to the apod with a date 2023.0701 and here we have the data that was fetched from the API so if you inspect this one there will be the network tab if you refresh you're gonna see that we actually send this request to the NASA API here with the date with those provided in the URL so that's [Music] now we have Dynamic pages that will receive an identification like an ID or a username where in this case a date and using that information we'll go ahead and fetch and get more details about the things that should be rather rendered on the screen let me see uh yeah here I have also a text box and a scroll view so let's copy this scroll view with the text because it besides displaying the apod list item it will also display some some information about it so scroll view was imported perfect now you see that it also has some details more information than we see on the home screen so if I go here yes perfect and if we go to a new page like this one Doom star we see the description of all that one perfect so let's go ahead and this is going to serve as um as a starting point for us for for the next step uh even like for static uh routes and static generated routes so let's first Commit This this is our uh dynamic page I forgot to add commit perfect okay uh what's next yeah the next feature that was introduced in the latest version of Expo SDK where they wanted to Showcase is our Auto typed routes this is really cool if you have experience and if you work with rack navigation you probably know how painful it was to Define all the types for your screens for your parameters and so on I think it was the most um confusing part of rack navigation if you wanted to have like proper types and in a lot of cases we just ended up giving up on that and um using like any for for the type of our routes with Expo router the cool thing is that the routes are automatically typed for us and this is something new in X4 router V2 and I'm very excited to uh to to have a look at that and see how it actually works in practice so where will this help us well if we open components for example apod list item here we will see a link and this is how we Implement navigation from one screen to another in this case we are redirecting to the Slash aped and vanvam dynamic part date if we're gonna do some typos here uh We're not gonna see the error because we still have to enable this so if we look at the typed routes we need to go ahead and explain experiment in app.json in experiments let's also enabled typed routes through if we save and go back to our link which we basically have have a typo and without automatically type routes we would never we would see this problem only when we press and only when we actually use replication what we want to do is we want typescript to tell us hey there is no route with this name so let's go ahead and restart our server after enabling type routes and what we see is a new file generated in our root directory called Expo EnV what is it taxpayee MB I think so and if we go back to the link we see an red error a red typescript error saying that this is not assignable to the type href if we go ahead and remove all of this string a put right away the path is already available if we forget to add some data there as well we're gonna see errors if you are going to start typing for example if I have href and if I start typing I'm not sure where this one is coming from it shouldn't be bigger yeah that's a bit weird I was expecting it to to recommend us the the index about us is here that's good and the a part but it's not defined uh even though it it understands that there is no such route let me try to to what to restart maybe with clear let's press I is there a way to animate the transition when navigating to another screen yes yes that's that's possible behind the scenes exploratory is using rack navigation and anything that is possible with track navigation is possible with X4 router as well and I read that explorator now also supports the shared element transition so maybe at Van we can have a look at that um so going back to our component with our href if I'm gonna do slash I see only about us I don't see a pod with something yeah I know why I know why it will understand if I do apod slash one it will understand that it's gonna go here but it doesn't recommend us because if I add the index file to the apodes index.ts x now it should appear here yes now it appears as apid yeah so what do we uh understand from here like it recommends us only static routes it will not recommend us dynamic dynamic routes that have a dynamic parameter but that doesn't mean that it will not validate our Dynamic types because if we provide something else is going to show us an error if we provide a correct Dynamic route it's going to understand it and it's not gonna show us as an error so that's uh that's cool let me delete that file and this will work like in any situation like with where we have a travel like with a link uh also with router.push and come on where is it yeah like this also like if we have router dot push that will also be validated with typescript um that is about sending uh that is about yeah like when we navigate there what about the dynamic parameters that we received from the use local search are they typed or not if we hover over this we see that this date is of type string which is exactly what we have here the date is of type string and if we will try to do something else we will see that hey something else uh property something else does not exist on the type route params apod apod dot slash date perfect but if we're gonna have um I don't know like more Dynamic parameters one after like uh in the route for example one parameter would be for the uh post ID another one for the comment ID in that case it will understand and it will type both of them so that's cool now it's not gonna tell us that it can be string or an array of string it understands that it's just a string perfect so the the problem that I encountered uh specifically with a project that was initialized with a tabs template was of in the tabs in the tabs project if I will find one here I can show you here is another project that was initialized with them tabs template and this tabs template it doesn't have because I I cleaned it up but what that component has [Music] um let's see wow we are redirecting to an unknown page for example if I change the link here and if I'm gonna try to press on this link we see unmatched route and that's exactly what's happening like there is no route with this name typescript is telling us that but and um if on their mobile device we can it's in our hands like how we navigate from one page to another like with buttons and so on you cannot prevent users from changing the URL on the web to something that doesn't exist like this so in that case you can never expect that the person will only navigate to a page that exists this one will still result of an unmatched route so what usually you would want to do is in another application you will Define a new route with a Dynamic Property with a spreading dot dot dot and here like missing dot TSX this one can be our not custom not uh screen that customly displays like not screen not found and we can display here text screen not found this is a very common uh use case and now on the web if we're gonna go here we see screen not found then we can adjust it to to display like some custom Styles uh that we want and that's going to be the same here for for the mobile if I navigate there screen not found um so this uh this missing file is going to basically catch all the routes that have not been um matched to a proper file so this is something saying like everything else that we do not have go here how this is great like if you want to add like as I said like this custom 404 pages but it messes a little bit with our typescript routes because now if we look back here to our link that is should not be uh valid here we do not see the typescript error anymore because in our situation any kind of link will be a valid link because if there is no screen that will handle them the missing file will handle it so in this situation we'll kind of lose uh the power of typescript because it will not tell us if we do a typo in in the URL because it's still going to be handled by our system and another problem I think was yes the same missing file messed with our date property that we get from the used local search and I'm here I don't have an idea like why this happens because we see the error here property date does not exist on type and here like we see the route Rams date so I'm not sure why it says that it cannot find so this missing file can introduce a couple of issues I'd like to have a conversation with even to to see how this can be done better I was thinking maybe to have like a very custom file for the 404 pages in that case maybe it will work better because with this approach we lose them benefits of typed routes because now if I'm gonna simply remove this uh Missing you're gonna see that first of all the date now is a string that we get from use local search and the links that we have typos in they are also cache by typescript so that's what we need perfect so that was our typed routes in Expo router V2 uh so what's next let me go ahead and comment typed routes do you have any questions so far guys because the next step is going to be uh I think routes let's have a look at that as well let me see if we have any questions in the live chat uh could you maybe go over the layout set up with export router version 2. the layout set up uh as far as I know did not receive any updates it is the same as in export router V1 and the layout set up the layout file helps us Implement and render things that should be available for fall for all the screens in one particular group of screens for example if we Define a layout underscore layout dot TSX file in the root directory that means that all the screens in this group of screens which is our application and this means that every screen in our application will be wrapped by our layout file so this root layout uh export function root layout export default and here if we if we don't return anything so if we return null we're going to see an empty screen because uh the layout rubs all the screens with this component that we defined here and if we don't export anything it's gonna basically not render anything if we simply want to render the screen wherever the child we can render the slot component import router slot like this yes and we see we see it back with a slot we actually lost the with this lot we lost the safe area view so what you would want to do is you would want to add here the save area view to encapsulate the slot but here is another safe area view you put it around the slot oh and you uh the parenthesis here to properly save your view and the slot now is inside safe area View and the same thing as we encapsulated all the screens in the safe area view we can add here like this is a great place for global global context providers like the theme where maybe you store the data in a context provider so this is the place where you would encapsulate and provide these values to the whole of your application another with the safe area view we saw that if we didn't have it here our screen will be rendered behind the safe area something new in esperator with 2 is that with default layout so if we don't have any layout the default layout will automatically have this safe area View so it should work yes as you can see if we don't have anything previously it was rendered behind the safe area and now it is wrapped in a safe area view so everything is perfectly rendered and another thing another important thing what you would use layout for is to define the navigator that should handle like the rest of the screens inside this directory for example if you simply do tag here import it from Expo router we see and the header from the stack Navigator and if we go to The Details page we can go back so I think actually we needed this stack to be able to go back from from one screen to another uh besides the stack like you can also do tabs for example also imported from Explorer and what this will do is all the screens from the root here will be rendered as tabs for example index about us and the airports date which doesn't have an actual date so it should be something literally have a value you might be thinking like why is the detailed page of the apod also displaying the tabs if this is another folder well if the folder does not have its own layout is going to be part of the parents layout so because the parents layout is a tabs Navigator the data is also going to be inside with tabs Navigator if we want to prevent that we can Define well specific layout of our apod directory so layout dot TSX and if we want this one to let me copy it from it from here if we want this one to be maybe a stack we can do that so now you will see that the date should not be inside our tab Navigator but it's there uh Apple yeah yeah it's going to be there the screens the screens inside like with date screen and maybe the index and others will be part of a stack and that's why we see the two headers one is from the stack and number one is from with tabs but again I don't want to to confuse you more with these layout so let's simply leave a layout with our stack here in the root layout to have like this back button as well and I think that's that's exactly what we need wood stack Navigator uh thanks Beth is very helpful you're welcome if you have any other questions feel free to to ask them ah okay come on why did I miss all the keyboard oh come on okay here the next thing that was introduced to explorator V2 is the asynchronous routes what are these asynchronous routes first of all let's talk a little bit about the lazy loading Concept in general and how it can help us uh improve the performance of our application so imagine we have like the Instagram let's say the Instagram search page has multiple tabs like when you search something there is the users there is post and so on Instagram search UI maybe if I images here here we have it so imagine this Instagram application and when we search something it renders multiple tabs top account tags places and so on when we talk about lazy loading of data for example in order to improve the performance of a first screen that we see here Instagram might want to load the data from the accounts from the tags from the places Pages only when the users goes there so this is called lazy loading like uh don't load things from from where from the beginning like wait until they are necessary and only load them then and this yeah like as I said can help you improve the performance because otherwise you go to a page with multiple tabs and you start every screen loads their data so you send a lot of requests at the same time and everything feels sluggish so that is lazy loading on the data layer with async routes the concept is quite similar but here we're not talking about the data here we're talking about the actual JavaScript bundle of our screens so the async routes basically is lazy loading for our code and by enabling them we will load the JavaScript bundle the JavaScript code for a specific screen only when we go there and how will that help us well it will help us because the initial startup time all the application will be much faster because at the initial time we will only load the JavaScript bundle of the first screen and we will and we will defer loading rubber screens only when the users goes there this will be very helpful in development and specifically for huge applications that have thousands and thousands of files of screens and instead of loading all of them initially which can take like up to to minutes and probably for a huge application it can even take more what we do is we load only the first screen and then load the rest asynchronous with like lazy loading um Facebook has been using vs internally some of these features internally for a very long time because imagine like the Facebook application is such a huge application that it would take so much time to load the JavaScript bundle of all the screens in memory every after doing some some changes so let's have a look at how we can enable that uh if we go to the announcement let's see the asynchronous route and let's open this first class lazy bundling what we have to do is in app.json export plugins so let's go in our application to app.json we have plugins we have Expo router what do we have to do with it so we have to put it inside an array not an array it's actually a topple because the first value is the name and the second one is the configuration is that true of the first one name the second one is configuration and I think routes let's do development so let's do it like this no come on I want everything from a new line okay now it works and what we have to do is we have to restart our bundler our development server with clear this is very important because if we do not clear like all the file all the screens will be already bundled and it will only require this bundling for the first time we go on the screen and after that it will cache head and well we'll have it in memory Edward you you're not late to the party you're gonna still be able to to see a lot of cool updates from Expo router for example with static routes and hosting uh the statically generated webpage we are still we still haven't covered that yet I think that's the the best part about it and if we go to the home screen we see bundling at the bottom I'm not sure if you saw it but initially it was bundling at the bottom and after that we saw the screen and if I go back and open it again now it's not gonna do that because it already has this screen enabled so yeah that's maybe if we add like more screens in our application here like like this about us maybe I can do copy paste a couple of times like a lot of times and if I change the layout from a stack to tabs we're gonna see it better Let's uh let's try it and if I restart the server with clear we should see a lot of tabs at the bottom yes that's what we see and initially only the first one will be loaded and this this type of bundling the first one actually should be faster than usual so if I go if I change the screen to a new one we see bundling and after only after that we see the actual code bundling and the code and if we go back we don't see the bundling anymore because it is cached so this is where asynchronous route and if I'm not mistaken this is only in development like whenever you build the application uh like everything is going to be there like yeah so that is I think routes and this can help you specifically if you have a very huge application uh what else what else yeah I think that we covered a lot of steps and we are ready to go into the interesting part into the static side generation for that I think I'm gonna remove a couple of these copies delete and the layout would probably should go back to less stack and and if I check it status enable a sync routes or lazy route okay the next thing that I'm excited about what is coming to to Expo and explore router version 2 is static PSI generation when I heard about this when I was talking with even back at up.js I was really really excited about this feature and I'm still am very excited I played today a bit with it and um it's it's a game changer like what will be possible with this in future is is is crazy like it will allow us to have to build like performant mobile applications and web applications at the same time and the web applications will be search engine optimized this is very powerful for for specifically like small and Indie developers that do not have the resources to to have like a lot of applications different from mobile and another one for the web optimized for search engine and they will be able to do everything inside the same project inside Expo uh with react native and at the same time benefit from the search engine optimization what do I mean by that uh previously you them web version of your ex-publication you could export that to a single page application to an Spa single Pages applications is simply a very small HTML file that has um that has a component like with an ID and that's everything everything else is Javascript so your HTML file is going to be loaded into the browser and then the JavaScript will take it from there and will render your application the way you you coded it to be the problem with this is that search engine uh crawlers the Bots from Google and other search engines they are not executing JavaScript we're only parsing the internet out there based on static files basically HTML images text and so on We are never executing with JavaScript so the problem of Spas single pages single page applications is the inability to have a search engine optimized website for some application this is not a problem for example if you have a dashboard in that case you do not need SEO you do not need your site to be discoverable whenever you search it on Google because that's your dashboard and only you are using it but if we're talking about sites that are facing their end user that are facing customers and both sides need search engine optimization so um the solution for for this is to generate all our routes as static files and using both static files to load them on a web server and then search engines will have access to this search to these static files with static side generation I think was popularized by Gatsby and nextgs I started like for example for uh for the not just.dev website I started with Gatsby and when I switched to nexgs and it's really great because it provides like crazy performance uh because I write my website as a react application and then using next.js at build time I pre-generate all the pages so that's why like all of these blog posts they are already static files like we are crawled by Google so everything we will work even if you disable JavaScript in your browser so that's that's great for discoverability of your application and I'm happy that with explorator V2 we will also be able to statically generate our web part of our application at build time so how do we do that uh if we go to let me check what do we have to static route let's open this up and uh the first step is to follow this setup guide some of these things we already have but the statically generated site Works only with Metro so make sure to have bundler Metro uh in your app.json under the web and also the output mode static let's go ahead in our app.json if we look at the web we see that the bundler is Metro but the output mode is not static it's uh the default is still single page application so if now I would go ahead and do npx Expo export platform web what we're gonna see is a new folder being added to our project dist and after this is finished this dist folder will have only one file index.html and if I do npx servedist it will still work but this will be a single page application where is it so here it still works it still loads uh we can still navigate from page to page but but this is a single page application like everything is handled by the JavaScript and if we disable the JavaScript we are basically done we the Crawlers cannot cannot parse all of our screens to to index and to be able to uh to be able to yeah like to search this this page on Google [Applause] um if however in updo Json under the web we see that the output mode output if it's static and then if we do that again yeah I took it a bit uh ahead but in order to generate your file all you have to do is execute npm Expo export this is the Standard Export for all like iOS Android and even web and if you want to only export the website you can specify platform web and now because we have the output mode static you're gonna see what will be different at this moment what we see now is besides the index.html we also say that about us.html this is if we look in the source application but what we have we have index and about us and when the apot details for the apod here we have still web Dynamic puff but we're going to talk about in a moment like for everything else like everything all the routes in our application they have been statically generated to a separate HTML file and now these files can be served from any web server as you would normally serve a static HTML website we can do that using npx serve dist usually you would simply open HTML and it will work but the thing is that it uses a not relative pops but absolute pops so that's why we need the npx serve which has nothing to do with Base by the way with Expo like it's a simple uh package to serve static websites that's it and if we open up localhost right now what we see is basically our statically generated website and now all of these pages with their own like metadata like had with description title and so on they will be parsed by by crawlers because crawlers can't have access to this about us.html index.html and so on now let's talk a little bit about the dynamic Pages Dynamic Pages for example like application apod and vanvis dynamic page we think about the dynamic pages is that they are Dynamic and you cannot the explorator does not know like exactly how many pages are there like are they 10 pages 1000 Pages like what are the options and so on so that's why it's a bit challenging to do that like if for zero one the request path could not be found you see um oh yeah yeah yeah yeah like if I change something here we see the request path could not be found because what it will do is it will look in the dist folder in the statically generated it will check apod slash that date and there is no such file that's why we see the the requested path could not be found however if we do about us will it work about us yes it works okay so what's up with our static with or with our Dynamic pages as I said the the challenge with Dynamic pages is that they are Dynamic like the data that we display and the amount of them depends on something else like depends on a dynamic property in this case the date um one way to pre-generate Dynamic pages is to export from the same file of a dynamic page to export a new function export generate how's it called generate generate static params static params equal to a function export const or maybe maybe we can uh we can take something from here with proper structure like export a synchronous function generate static parameters and what should this function return is an array with parameters for every single page that we want to pre-render pre-generate at build time so for example what a puts what what first of all what's them with date structure I'm gonna take it from here so for example what do I mean by that it's an array and for every screen we need to send an object and this object should include the search parameters for example in this case the search parameters is an object with a date so that means that our first page will be for the date let's say 2023 0702 maybe we can do for the last three days for example uh 12 then we want to generate an another page for the 13 and another one for the 14th so whatever you return from this generate static parameters will be passed uh to use local search parameters to this component and yeah that's how we generate information about this Dynamic part part of the URL and now if I'm going to export it again we can look in with this folder now if we open inputs here we see three new files 2020 307 12 HTML and actually if I'm gonna go to yeah if I'm gonna serve the the build file and if I'm going to go directly to that 13th we will see the information for that page because we pre-generated it and with the same formula 14 14th it's a new one this is from today looks beautiful but if you do something that you didn't export it's gonna go to a 404 so um what you have to do here in the generate static parameters is basically uh in a way like go ahead and query all uh query the data how how to put it in a way um query all the items that will be mapped to a separate page for example in this case I'm not going to be able to regenerate all of them but maybe I'm gonna be able like what I'm gonna do is I'm gonna start from the first iPad that was I don't know in 2000 let's say 10 0 1 0 1 all the way till 2020. 2023 or today and for every single day we can return a new object like this and we will generate a lot of files at build time but that's okay because that will um make every single fi every single page for this detailed view for this Dynamic route it will make it uh searchable on Google and uh yeah something like that this concept is quite complicated so I'm thinking like how to make sure to explain it in the simplest way possible without over complicating it um for example if you are building a Blog website if you're building a Blog website in this generate static parameters you will go ahead and query the information about all your blogs and actually you don't need all the information about the blogs you only need a list of IDs for all the single blocks that you have in your application and based on that list if you have um if you have like a list of IDs or in this case you have date which can be an array of this one after you have an array of IDs where slugs who are how you identify those pages you can return date dot map and for every date what you're gonna do is you're gonna return an object where you need to provide the local search parameter so for example date double dots date and this will uh this will work so first query all the information and after that return one object for every page that you want to pre-generate okay that is about dynamic dynamic Pages the next step is where root HTML what happens if we for example let's say a very simple scenario is you want to add analytics to your application when analytics should be added to the analytics script should be added to every single page in your project so what do we do in that situation export router in included a new file that you can add to application directory and that file is called plus HTML dot TSX and this HTML file is going to wrap all web statically generated HTML files on the web for the for the syntax of it basically it should be a react component that exports the HTML structure I'm gonna go ahead and steal it from them from the tabs template and we can have a look at what it has here so as we can see the html.tsx is a file that exports a react component it will receive a children and the children will be everything else about that page the children is rendered inside the body and we Define the rest of the HTML structure with the head and so on like with Styles here what we are doing is some disabling of scaling and something else but what we are interested here is like we can Define some meta script some metadata that will be applied to the to every page for example I don't know meta description or let's find some meta tags for example description keyword offer and so on so you can add them here uh I did that uh in the morning as well like I copied this method description I see that it's a problem it's coming from uh it's coming from the website V3 schools but it doesn't have a closing symbol so we need to close them all of them so description I don't know apods of astronomy picture of that day keywords I know astronomy astronomy NASA and so on and offer let's say Vadim you can also provide that title but I think there was a problem with the title so let's just simply try it uh a boat and if now I'm going to export our website foreign if I'm gonna serve it serve it here oh actually the title was its localhost and it's not updated it's not updated but let's have a look at the other head parameters if they are updated so if I do inspect here and if we look at the head parameters we will see the title A Bots but because there is another title here that's why I'm not sure like what's happening here like there is already a title coming from somewhere and my my title that I set is not working anyway the rest of the information that we set in that HTML file like description keywords offer and so on it's perfectly working so the same way as you can do meta and other stuff that you need everywhere in publication you can add here like uh analytics scripts or other scripts that your application needs so where's the HTML file that is used to wrap around all the pre-generated files for the web when we do static side generation another way you can adjust for example if you want the description keywords uh and maybe other information about the page which is very important specifically for for search engine optimizations because if you go ahead and write not just that for example on Google you're gonna see not just Dev you're gonna see here a paragraph of text where do you think this text is coming from if you open the inspect here and if you look in the head that's our meta description become a full stack developer by building real project if you look at Google that's exactly what we see here and by the way guys make sure to check out the academy at not just the dev if you are interested in becoming a better mobile developer and mastering full Stack mobile development using react native and AWS these are one of the most powerful tools out there to to build end-to-end applications and if this is one of your goals then the academy and our premium course is what you actually need so check it out there and happy Beth I remember that anyway um what I was saying is that this method description is very important for for search engine optimization and you can provide one meta description that would be basically general for all the site and specifically for screens where you do not specify a custom description but in a lot of cases The Meta descriptions and meta and the keywords and so on they are they should be customized for every single page to do that Expo introduced a new file the Xbox head and what we can do with this is for example in about us we can import head from Expo router slash head and using this head when rendering here you can provide uh you can provide like components that will be rendered inside the HTML head for example The Meta description uh this is about us and maybe even a title let's see if here it will work title is going to be about us now if I'm going to pre-generate our side and if we serve the directory let's have a look uh so the home screen still has the description a strong Astronomy Picture of a day but if we go to the slash about us and look in the head come on we will see where the meta description is still Astronomy Picture of a day but the title is about us title was changed correctly there is a new a new one method name description and this one method name description what is this data a maybe if I provide these data thing what I'm interested in is replacing the one from here so maybe I need this data I don't know let's try and maybe the same for the title because with title Title Here Title Here I go to the home screen has the title yeah maybe let's have a look let's try we don't want repeating uh meta components we want to replace the ones let's go bring Lucas back yes Daniel let's bring Lucas back Lucas is coming who wants to who wants us to bring Lucas back so in index title title is not replace it was simply audio that's a bit weird but if we go to about us the title is changed about us that's good but there is still the title from the head and what about description we still have that one and we still have this one description and no the description I refreshed it and the description was actually this is about us yes the description was correctly updated only with title for some reason it's not updating okay anyway the the other meta descriptions and so on they are updated and that's how we can provide specific titles descriptions and so on for every single page you can do them based on Dynamic properties as well but this is a bit tricky because if the information like in the description and so on is fetch from the API is using the user fact in that case um like search engines will not execute that fetch request and you're not gonna have like the dynamic uh content very Dynamic like had and meta information okay now the cool thing about this uh static website but this is that it's possible to uh to host it on any web provider if we look at the documentation we can see that we can host it on basically any kind of uh of website like netlify cloudflare Pages AWS amplify versus GitHub pages and so on what I want to try is maybe we can try to uh host it on GitHub pages I don't have a lot of experience with GitHub pages but let's give it a try and see if it works so if I do get status we're gonna see [Music] um I want to remove a dist folder from our git ignore because I really want to actually have it in GitHub so that GitHub can using GitHub Pages we can we can serve it git status okay git add git commit tactic route and let's do get push origin Main now from our GitHub repository uh we can go ahead and open up opens and let's go ahead into the settings and here there is this Pages setting let's try to deploy from a branch or yeah deploy from a branch let's deploy from Main and the folder Ruby root select folder root Docs I don't want their root I want the dist and not even dogs look there was uh GitHub pages subdirectory sometimes you want to have a sub there right through on the master Branch to be the root director of GitHub Pages yes this is useful okay for the sake of this example let's pretend the subfolder containing yeses list remove this from the git ignorius make sure to add it yes use subtree to push you subtrip push to send it to the GitHub Pages branch on GitHub let's try that git subtree push okay I think that will simply create a new uh sub Branch when you Branch if I look at the branches there is G GitHub pages and this is the the distribution folder only the files from there yes perfect so now we can go simply to settings pages and we can enable GitHub Pages root yes root and we see that your GitHub Pages site is currently being built from GitHub Prime GitHub Pages branch learn more how can we open it so where it's we need to wait I think we need to wait queued okay deployed deployed okay how do we access it GitHub patches active and maybe we can go back to the settings pages and your site was last deployed with environment okay view deployment here we have it our website study website deployed and anyone can go ahead and access it it should be possible to to load by anyone a but I'm not sure like what's going gonna go on with like request with with um with a network I'm not sure why it has slash apods there about us works apodes yeah I think the problem is with this slash a puts at the end it doesn't map correctly um but anyway it's possible to to deploy it to to this to GitHub Pages let me maybe try to deploy it to to Versa because versal is also a super simple way to deploy uh let's try to add a new project uh from not just Dev let's import give me just one second to to give permission to this not just Dev security key and here I need to add the airpods as well to give access to versaille here let's import apodes framework framework framework that's interesting it should be something like static yeah maybe other root directory should be dist continue deploy let's have a look let's wait for things to to be deployed on bird cell and congratulations our application is added let's continue to the dashboard and we can visit our website let's see if it will work yes here we have our deployed application and it took like how much like a couple of seconds to connect our repository with yourself and to Auto make it work so as you can see like these things can be stored and hosted anywhere maybe later I'm gonna actually show you how to do that with amplify as well but I think like versel might be they have the easiest way to do it uh uh perfect so that's how we can how we can host this uh with static rendered projects um another update for Expo coming at Expo in Expo router V2 is where CSS support CSS styling and this will allow us to style our web applications built in Expo using CSS this is uh really cool because it will allow us to use things like Tailwind for our mobile side uh however like my the way I look at it is styling it with CSS you kinda create a branch between mobile client and the web client and I'm not sure if that's what we want because we in a perfect situation we want to write the Styles and the code and everything once and it should be available for all platforms CSS is not available for the mobile for the mobile site for IOS and Android and it's only available for for the web but for some situations this can be very helpful so you can have a look at more details how to enable them and how to import it in the documentation of Expo and yeah like it can lead to situations like where you'd have such kind of if statement like if platform is web then apply like the class name from the styles but yeah like the the first iteration should be thought of just an escape hatch to dropping down to the CSS side on the web uh for racing routes we covered them Universal linking got better by uh automatically generating deep links for every single screen that we have and not only that but even like connecting the screen on the web that is hosted on our website with a specific screen in our application is also possible and is done by default automatically and this comes with a lot of like very small but very crucial features that previously were only available to Applications native like native applications created by Apple and here I'm talking about like uh the nice handoffs where you start the process for example you start filling a form on the web and then you have to take a screenshot or a photo in that form and for better you need like a mobile application you can transfer your progress right away to the mobile application and you can continue from same spot where you left before and I think this is really powerful for for applications from additional features let's have a look at what uh else is cool here I think the Expo router support for animated shared element transition is really nice we have a tutorial for that we covered it during the X4 router not exploratory during the animated V3 uh update and it will allow us to to add this shared element transitions between two elements on two different screens and yeah that I think everything that they wanted to show today if you have any questions guys let's have a chat right now I'm gonna go ahead and publish all the code that we have created today so get status I think I already did you can find it in the description below and if you enjoy this one make sure to subscribe to the channel we are doing a lot of Project based uh tutorials by building real applications and yeah it's it's really exciting and I'm pretty sure you'll find this interesting so make sure to subscribe turn on the notification Bell and let's see if we have any questions did you have apple developer account yes I have apple developer account because if you want to deploy applications on App Store you need the developer account can you add a feature of language localization on one of your tutorials yeah that's a very powerful thing and I think we need a separate tutorial for that thank you for idea can uh some krikones is asking about come on about conditionally showing screens for example if you have a user login or not show the authentication screens or home that is a very common use case and you can read more about Expo or router authentication come on authentication and Export router here you have it and we explain like how you can Implement these protected routes and how you can navigate from sign in to the home screen based on whatever the user is authenticated or not so check out this uh this docs it explains pretty well what exactly what you want to do hopefully in the future work with Firebase and Export router Firebase is something that yeah maybe we can we can we can try to do some projects I wanted to do something with Firebase recently I asked you the community what you would like to to use and everyone voted for node.js so I had to use node.js band authentication with AWS yeah we have actually a tutorial on my channel you can check it out anyway that was everything that I wanted to Showcase today I hope you enjoyed it and yeah see you next week with new projects with new builds uh yeah we have a lot of things prepared for you anyway have a nice rest of the week I'm gonna go start the weekend start watching F1 and enjoying the a relaxed weekend because this week we produce so much content like two live streams free blog posts one newsletter and it took it took a lot of time to do everything all right guys

Channel: notJust․dev

Views: 16,363

Keywords: vadim savin, not just development, notjust.dev, react native live coding, live coding, javascript, react tutorial, react native tutorial, javascript tutorial, react native ui, react native for beginners, Expo Router v2, React Native, TypeScript, Static Routes, CSS, Universal Linking, Async Routes, Web Development, Expo CLI, Tailwind CSS, Expo SDK 49, Node.js, Native Apps, Web Apps, Software Development, App Development

Id: I05edUCdiGM

Length: 104min 7sec (6247 seconds)

Published: Sat Jul 15 2023