Video details

Angular SSR and Jamstack | Tara Minicsic

Angular
12.18.2020
English

Tara Minicsic

In this workshop Tara Z. Manicsic will walk you through multiple ways of rendering content, focusing on two approaches: Server Side Rendering (SSR) and the Jamstack architecture approach. You’ll look into the Angular approach to SSR using Angular Universal. Then you’ll compare that process to the Jamstack approach of utilizing serverless functions.
We’ll also be shining light on the other surrounding concerns like set up, costs, developer experience, and more. The point of this workshop is not to tell you which approach is the best, but to give you the information to make that decision on your own.
ng-conf is the premier global conference for the Angular JavaScript framework, offering both in-person and online events throughout the year. Focused on delivering the highest quality training, ng-conf is where careers are made.
ng-conf: Hardwired is brought to you by: - https://thinkster.io/ The best Angular and JavaScript tutorials on the web - https://herodevs.com/ Engineering and consulting by web development experts - https://xlts.dev/
Extended support for AngularJS
Follow us on twitter https://twitter.com/ngconf Official Website: https://www.ng-conf.org/

Transcript

What we'll be talking about today is the universal rendering, or SSR, Angular, universal pre rendering and service functions, which is the more Jamstack approach to this and using nettled functions. But again, we just did. I'll show you the resources at the end of the day. But I also run a podcast called Remotely Interesting with really smart people on it. So I just post it and be surrounded by brains. But you get a lot of information and we covered rendering. And again, these are very smart people. It was Philcox with Kassidy, Williams, Ben Hong, and we just went in circles about rendering because it's another one of those things like Serverless where the terms in the URL, everything around the actual technology gets very confusing. But things that they talk about a lot with rendering these these buzzwords time to first bite. And that's basically just saying, like the time between the user interaction of, like, actually requesting something and then the first bit of data it comes through. And so this is like a big notation for for rendering. It's the way that we're able to analyze the times. But in case I just wanted to make sure I touched on these in case we brought them up talking about each one. First point is when the actual first pixel gets rendered, first content is when the content that the user requests, whether in that clicking the navigation is actually rendered. And then there's the time to interactive, which is really important when we talk about universal rendering and and the domestic approach. So this is basically when a user can interact with a page so all the you can see it and everything, but when can they actually do something and interact and trigger events on the page? Just as a side note. We'll put in the link, I'll try to find it, and about the actual works, the hour long workshop where I cover these things in detail, Jeffrey just made a really good point. Describe the overall topic in a sentence or two. So basically in this workshop, we're going to cover two of the. Not not most traditional ways to render an angular application, because the most traditional ways to do it to do the client side rendering. So we're going to talk about basically this hybrid rendering and will step through the process of doing that with setting it up for English Universal to do that for you and host it. And we'll talk about the jam stack approach to rendering, which is basically focusing on pre rendering and serverless functions, which you'll see a lot of these two things actually overlap. And we're going to have a demo project that first one, we set it up with English Universal and Firebase and then take the same demo project and set it up by deploying to notify and using Scally to render, which is the English site generator. And now if I functions dehydrated with dynamic information. So I hope at the end of this at least have a understanding of not exactly a full understanding of rendering, because that is like that's a dedication right there. But at least you'll be able to explain the different types of rendering to your colleagues or people using your applications and then have resources to keep you going down these roads to know even more and then eventually become a rendering expert. OK, I can see everything. So please feel free to put more in that if you have any other questions. OK, so. That is the. Really high level overview of just some of the phrases that we talk about when we talk about rendering, when we start to get into university rendering, I cover more of the different rendering approaches because as you'll see, they are kind of combining in this universal rendering. So server rendering. It's funny because when I first started working with rendering, I just thought Ezat was server rendering because it's called server side rendering. So silly me that those things are the same thing. Like some people may have thought that Serverless meant there are less or less or no servers, but nonetheless, server rendering is more of the process where your server is creating that for HTML page for you in response to the user or the navigation requesting it. That's the those are the two biggest points about this server. The server is not the client, but the server is rendering your page and HTML and it's happening upon request of the navigation or the user. So this is generally server rendering produces a fast first paint, which we discussed, and afast first content for paint. So the first pixel and the first actual content that the user or the reequip what was being requested. I say I have much more limited lung capacity. Just so you don't think I'm doing it. What is the treadmill? Well, I'm presenting it's just the way I breathe now. So this can be this can be a little bit slower than just serving static assets because you're requesting it from the server and the server has to do the work. But if you can take advantage of caching, that will reduce the rendering time a lot more because you're not rendering every single thing on the server, you'll be able to utilize the cache. And this is also you're avoiding those round trips from the client for like data fetching and templating on the client because it's all happening. In the in this severe. So then we have client side rendering, this is the most common rendering, and it's where the client is handling everything, including the rendering, the data fetching the templating and the routing. And the biggest downside of client said rendering is basically the amount of JavaScript that's required as an application grows. So when we talk about like single page applications that are pretty basic, client side rendering is pretty straightforward. But when it starts to get a big to be a bigger site, have more data, you're going to have to adapt with all that JavaScript by doing things like code splitting and lazy loading, which are always great performance things anyway. So now we have this universal rendering or hybrid rendering or so there's a lot of Natsu. But again, this is basically combining that server rendering we just talked about and the client side rendering that we talked about. So you are using hydration, which are covered with hydration, is basically filling an object with data so that the full page loads are handled on the server. So you're getting all of that, rendering the HTML on the server and then the J. S, which is you're actually getting it. I think it's actually a decent object, but you're getting the JavaScript in the data used for rendering embedded into the dock and then it's triggered. Then the client will actually trigger those JavaScript code to get that render that error. Grab that data. So. It's it's. It can be a little tricky because it is a dynamic process and there can be a lot of like computation overheads and a lot of times there things will you'll get double data. But let me first cover what hydration is. So I'm just going to read this verbatim because it gets a little confusing. Once the e-mails the HMO is rendered and this will be done by the server, hydration will process inline JSON state stored client side for the data in the page and attached some event listeners. So first you have to wait for the HMO to come through and then it uses that Jackson state that is stored client side to do the jobs. And one of the biggest things about this is that the user, it'll be a quicker time to turn to paint, but that 10 minute interaction is slowed down because you have to wait for those event listeners to actually. Be interactive, so you may have seen this before. I know I've run into it a lot where the page will load and you're like, great, that was really fast and you got to click and nothing happened. So you think you have a broken something's broken and you'll try to refresh. But this is actually just that the JavaScript hasn't the event listeners haven't been it aren't interactive yet. So you're clicking and tapping and nothing's happening. So I can be just as refreshing to a user as a slow pager. So this is basically what it looks like. So you have that top part, which is ahead and that's going to come through and then you're going to have that static HTML version of the requested page and that's coming to you from the servers or rendering it. But it's generally inert because the the use of the JavaScript handlers, the. So you're not having that happen until that gets boots up in the bottom there, that bundle that jazz. And you'll see there's like technically a duplication of that. You will list their inside of that data. So those are some things that. Can be the downfall of hybrid or universal or SSR rendering. And then this is a really great article. I highly recommend checking out its developers that Google that come in the Web update section and is from Jason Miller, who created Proaction Addie's money. Who's the. Doing a lot of the engineering management with the Web relations team and you you're very familiar. He's got really, really great content out there, but. This is a lot of. Covering of basically what? What rendering is what it's covered when it doesn't cover it and what each different types are? So I highly recommend checking that out. I'm trying to think if he does it, because I'm pretty sure so it's doing it not not just in time. So it's but I think it is still done by the client, the heir to the compiler and once at build time. So technically, that would be. It's billed time, so that follows the guidelines of more like pre rendering, because that's not doing client or server side rendering, it's doing it at build time. So none because of the build time. It's not client or server side rendering. So jumping into angular universal, then real quick, because I'm going to cover this quite quickly because we're going to actually do it. But I do want to talk about it a little bit because this is basically a technology that renders angular on the server, usually angular, like when you're typically running angular, you're doing client side rendering and executing in the browser and rendering pages in the DOM. And it does this when the user requests the pages and the data. So it's all being done on the fly client side rendering with Universal. You're basically generating static at pages with their pre rendered functionality and then you're doing that in the server. So the server is pre rendering all of these things happening in the server, the server side rendering no server rendering. Sorry, I would be very clear about that. And then all of the data and the JavaScript is bootstrapped on the client. And then you're doing that with the client, with client side rendering a. Oh, yes, big reminder, if you're in the dropdown and the zoom, zoom in our zoom in our chat, you'll see a blue two and it either says our panelists or our panelists and attendees, you'll want to make it to more often than not to our panelists and attendees so that everybody sees it. But Aastrom put the question in there, which is which category does ahead of time compilation compilation? Fidan and my answer was none. It's like when you get asked another question and say yes, I say no. OK, so we'll look at this when when we run. So we're basically I'm going to we're going to start out with that demo application and add in this way and then we'll talk about these things and get to that part. But just real quick, the good in the bad, you're able to facilitate what crullers through SEO because you have pre Gennari pre rendered content from the server so the web crawlers can actually see everything. Unlike when if you run an English application now and you look at the source, you'll see that it's just a bunch of links to JavaScript files and nothing really readable by these bots. And these are the ones that help you get traffic through search engine optimization and are able to grab as much information, which will bring you up in the search results in Google as well. It also improves performance on mobile and low powered devices. And this is because, again, you're not making all these data requests just to render it. And you can also take advantage of caching. But we'll also talk about there are ways that you can actually look in chrome tools and toggle the speed at which you're looking at your application rendering so you can see how you can test that out and you can see for yourself how it improves and performance. And it shows the first page quickly with the first contextual point that we talked about earlier. And again, that's because you're immediately serving up the HTML rendered pages from the server. And this is a really great benefit is the fact that it's just angular. So as you saw, we're going to be using Angad functionality, which is angular schematics, some of the bumps, some of the browser APIs and capabilities may be missing on the server. So you'll see we with the skeleton, we won't have anything in place that won't work just yet because we'll be using links, we'll be using router links, but rather links actually use that native a anchor tag that a tag. So that's familiar to the browser API. But in the documentation, ANGULAR actually provides some injectable abstractions to help overcome not having these app APIs at the ready. But you don't have things like mouse and keyboard events. So without those events, the server side app can't rely on a user clicking a button to show component. So those kind of interactions, unless you use those injectable abstractions, can be it can be quite a challenge. And I hate to say this because I know that the English team is always working on documentation, but the lack of documentation right now for English Universo is a bit lacking for lack of a better word. And so I would like to see more of that. Hopefully they will do that soon. All right. So first, we're going to do the angular universal set up. But in order to do that. I want to give you all this demo project that we can work on together, so I'll go through the steps that I have in this project so you can see what's actually going through it. So this project lives here. And so I made this into a template just so it'd be easier for us to work on it together. So you just go into use this template and make sure my traders here under Angular Universal, there's a project set up. Let me know if I'm clicking to Vaastu or scrolling too fast. So the first thing we're going to do is actually start with this demo application and they have the link for it here. And then we can hit this use this template button. Then it will open up in your GitHub account to create a new repository and we'll just name it five to. Give it a description and repost from this template. And so you'll see that it gives you your own repo, but then it also lets you know where you generated it from. So now you can either take it and use these instructions for cleaning it. You can download the zip. I always just clone it locally. So I'll head over to my terminal and I'll say I'm just a little more git clone and give them there and I'm going to call it. We don't know which is actually this debt that our TRW demo is the name in the package that Jason and the angulated Jason, so. Oh, that's fine, then. So just a reminder, if you want all of those change, because then everything ends up in your your distributor distributable folder, your folder as whatever name is in the angular JSON. So if you want those changed, whenever you call in a project, if you want to change those so that you always know where your products living, but you can also always just look at your angulated Jason and see, oh, what did it to get that. Well, let me finish what I'm doing. You can see that information in your English, right, Jason, if you need to. So we have this here now you'll want to make sure that your remote is where you want it to live. And so this one is if you do if you grab the repo by. Not using the template by just cloning, you want to make sure that you add the remote correctly for when you're pushing up code. So if we were in here, we can go ahead. And I think every you can run NPM install to make sure that everything is installed. Well, that's happening. And we'll show you real quick. We'll open it in our code, editors will. I was at. That's OK. So if we look in the eye, Jason, you can see that the output path. Has the name of the project there is Art W Demo, so if ever you want to change that, you build a commands that's read. I hope you can't hear my laptop. It's like flying right now. It's using up so much. OK, so we have everything installed and we'll go ahead and run and serve so we can take a look at what we have. And when you thought it was years. Yeah, poor, poor computer, at least I'm not at least I'm not recording the zoom session to the cloud because I feel like that's when it really is mad at me so we can go to localhost forty two hundred and working on a project at work. So I have a lot of different things to. And we can see that we have our demo site here, and this is basically a skeleton that we're going to use throughout the workshop because I wanted to have a base application here that had things that we would want in the future, like a list of products and services, a blog, and then links to different resources as well as eventually have search functionality, use it to log in and then obviously back to the home page. But there's nothing here right now. Products is just these are all just modules built out, but it adds as a jumping off point to kind of guy to see what we're going to be doing. And this is actually using if any of these maps look weird, it's actually using the Harry Potter lorem ipsum. So don't judge any writing that's there. It's not mine. Yes, I have. That's what I don't know. If you saw a sign when when I looked down, I was looking for my charger because I knew that I was that something that wasn't one hundred percent. So. Why does it have to compare from just thousand 2015? I'm not sure. Where is. Oh, here wondering I yes, I get this lazy Chuck, I am on a personal level and I'm just curious. Yeah. I do not know. Honestly, I can check in with. I'm sure that's something that the England team could tell you. I know that. I know that with. With nine, we were doing the different kinds of. Split so that you could have dependent on the browser. I don't know if this is answering your question at all, but you're able to use the newer things for browsers. There's actual technical terms for this, but it would give you the different kind of files needed by that browser so that you could just load if you just wanted to load up the newest. ECMAScript, JavaScript libraries, you could. But feel free to ping me later and I can direct your question to differential loading, thank you. But I don't I don't know if that's what you're asking or not or if that's related to what you're asking, but we can we can share that question on different lines or to lines that will give you a correct answer me after. OK, so so we have a project there. We have. We know that we have an English application, we know that it's actually serving up just these scripts, we can't see anything else that lives there at the moment. So actually, I'm going through this. It's being client said rendered and we're not really getting the best SEO capabilities from it going this way. So. Let's go ahead and get started with the I'm going to move this over so I can just walk you through, but I want to make sure that I'm following the steps that I wrote for you so it doesn't get confusing if you have to do it later. So now we're going to the next step in the process, which would be to actually set up English universal. Again, there is a whole section kind of guiding you through this process in the documentation, but we're using the English schematics for adding in Universal to the application. And so if you're unfamiliar with English schematics, it's basically a process in England where you're able to manipulate angular product project by creating a virtual file tree, making changes inside of the file system and like changing the package adjacent and being able to make different files inside of a project. And then in that virtual tree, it checks the virtual tree. Make sure you haven't completely blown up the project and if everything works correctly, then you deliver the updated project to the user. So there's really a lot of great things you can do with any schematics, including what either Universal does. So we're inside your project directory. We say engie and I say English Universal. I'm a developer, so I can't spell and then so we're doing a singular Universal Express engine and she's. And so if you're familiar with using node, node is express does a lot of node server tooling for you. And so this is basically making a server for you to do your server rendering on just as they have been. So. So we see here what has been created is there the server files that we need, so the typescript file, this server module, so you're making your server module and then some configurations as well as a server, that typescript file and. It's. I have this from the documentation basically saying like this at the parts with the asterisks are what we're adding. So the bootstrappers for the SERAP is that main server, that type Terraplane. I think now they just call it server. And then inside app we have the server module and in the root directory that Servatius is the actual express web server. So the next thing we'll do is just see how this runs the part of the development processes I show you. Now we have a few scripts. For SSR here in our package that Jason, so when we're going to run out of SSR right now, which is just basically saying take this project and serve it SSR. And that. We will not use it for a production. So we go ahead and fill this out and we can go back to. And Franzia. Another thing on that. That page as well. I was too fast, so we still have everything, like I said, the router links will still work because it's using that native anchor tag, the eight tag. But if we had any other data that was coming through, we wouldn't be able to listen to those events because we're. We have to wait for that fool client app to work to have those event listeners. But then. De. Oh, I didn't want to show you, so one of the things they talk about doing here is actually. Here, so what I was saying earlier, if you can simulate a slower network that's in your. In the chrome dev tools, you can go to network and you can actually just throttling, it always loses. So if you don't already know this command, it's a simple base, could actually shift command P when you can't find anything and you have no memory like I do under online. But thank you. But so you can just search these, which is very nice. But like I just said. You just told me it's in the online, but there is so you can customize this and change it as you like, so that is is there if you want to mess with that and try that and see everything actually coming through. I did. All my images are actually from up splash. So none of them are saved locally. OK. Um, oh, sorry, I just saw Simon's comment. Thank you, Doug. And this is all just as a reminder in these workshop. Instructions, so now that we have that and we're able to actually see that that was built up on the server, we're technically rendering on the server. So already we. Technically have this doing the rendering on the server, and I want to jump into what one of the big parts of that is, which is. Step three, a very short section of pre rendering with a universal. So with the release of the nine and angular Universal, we actually have pre rendering out of the box thanks to go. So in this project, if you actually run and rpm run pre rendered. It guesses what you were pre rendered routes should be. Oh, my gosh, I'm so sorry. Let me stop what I'm doing. I gave you the answers to all life questions on that screen here. So starting again, I swear, when we come back from the next break, we have that grand jury done. So since we have a universe set up, we have the commands for actually building it as a server side server, a hybrid rendered application. One of the big steps of that is actually pre rendering with a universal and with V nine Minko used gas parser I should have linked this to. Basically, guess your roots and render them into static files and the only thing we need to do now, as of 9:00 a.m., Renfree render inside the base directory of our application. So, well, this is probably rendering. Here we go. We can see. It's due to. If we go to things out to our distributors, distributable holder. Uh. And then inside of the project folder, we now have browser and server and inside of browser we see we have these static files and then so these are the only routes that exist on the site right now, products, resources and services. And if we say change in the products. We now have this HDMI page. And so, you know, there's all of that page as a static HTML asset, so it basically went through corruptors. What are the routes that exist for each of those? Rasim going to make a folder in each of those folders. I'm going to create this HTML static page for that. So since it is using that gas parser, you should know that you could also have the option of actually making a list of routes. And Sam actually has a really great blog post. He actually does a lot of work with in a universal coverage and pre rendering in general. This post is really great because he has this section that I quoted here to kind of lead you through that process of getting all of those routes. So if you have a bunch of different news items inside of your route news, you can grab all those, put them into this file and that file to your package that Jason and list, and then have that script call on that route, too. So that specifically knows how to render those dynamic routes. So, again, this is a. The process that you take to make Angular Universo work well, and there's actually angular pre render, which is a module that you can also used to just take advantage of that pre render capabilities from your universal. But that's a big step in the benefits of the hybrid form of rendering, because that is what gets your site up for the Web crawler. So it works well for SEO. So even just the point of even just getting to this point where we're able to pre render application is a great step towards that hybrid rendering benefit of being able to get your content to your user faster. So there's a pretty quick section, but very much worth pointing out how to take advantage of pre render and the fact that you can use it out of the box ever since V nine is very handy. So the next thing that we're going to cover is setting a hosting, and I'm hoping we get through all of this to get to the functions, if if we get held up on this a little bit, I may. Get us right over to the function up, because that is the one that can be a little more a little less straightforward, I should say, but we will have a hard stop at the 30 mark just to make sure that because we've covered here, I want to make sure we overlap with doing it with Scully so that you can see the difference in those different setups and all of the resources that exist here so that you can do it anytime after the workshop. OK, I'm going to move this to the side to get us. Into the window, so there was a there was a section in the set up to make sure that you had a firebase account, but then I should have also noted that you will need a Google cloud account, too. And also, when I first ran into when I first set this up, I had to make sure that I had a credit card associated with the account. And I know that that's not everybody has that set up with their firebase account. So you can always follow along if you don't have your billing set up with Firebase. OK, let's go ahead and get back to the main directory. Clear this out and the first thing you want to do is install with NPM, install firebase tools. You may already have this stone and do it globally. It's military. Yes, I'm using frameworks for a long time. I really like Firebase because I like the cloud. But I just realized recently that one of the benefits of the Jan Stack architecture is content delivery networks. This is basically a dump server CDN and it limits the amount of effort take it takes to with the infrastructure of server setup and there's a lot more to it. I'll talk about the jam session, but I, I've definitely done both. I've spent most of my time doing the traditional server setup. So knowing that Firebase also has CDMS. It's very exciting and that's how you get these quick, usually quick deploy setups with Firebase where you can just do Firebrace deploy usually. OK, and I did make a note that you want me may want to make sure that you are logged in because I ran into a weird area where I was logged in, but then I had a log at log back in. So if you run into any unauthorized errors first, that might be something to check out. So in order to get this set up, we're just going to run Firebase and. And we're going to want to do functions and hosting, you use the Iraqis to get to each one and use the spacebar or a to select them and then you hit enter once you have all the ones that you want to use will create a new project. And I'm glad you think this morning here that you can't modify this later, because I've definitely had to delete projects and fix it, and then we're going to just call it the same thing. In a move this urgency, you can. See it better up the screen next time, but. Oh, I hope everybody has snacks, I might just be the only snack with. So the first thing he's going to do is a seven year project with that project name. I'm going to use JavaScript today just because the other functions that we're going to be using today with nullified functions, we're going to write in JavaScript. This is basically just changing your index, not just to an index that tips and allowing you to use typescript, which, you know, does a lot more. And then you can also do typescript checks in your build functions to do that. But today, when you travel a script, you can obviously use TypeScript Popcorn, gooseneck. We're going to say no to is today. I'm very much a big fan of Lintang and Prettier and all that jazz, but you're going to get a ton of excellent errors with your functions. Director Like there's a lot of small ones. I mean small but important ones that should be changed, just not today like equals or in comparison to equals. But we will install the dependencies now. So again, all these things are definitely optional. How you want to set them up or not. We are going to keep public is a directory. We're actually going to change these things in the file. We do not want to do a rewrite single page application, so we'll say no. And I just said yes to this because they look at workflows, you'll see this pop up. Yeah, or they may have used logging to get help where whatever your status may be. Yes, I loved it with the Crows. So this is going to be not the full I wish they did an example of this, but it's just your username and then the. I see I danced to. Let's find out your username and then the name of the so it gives you lots of options, lots of chances to keep trying it, because I just did like just the rebel name and that didn't work. So then I did the whole euro network. So, yes. I don't know if it's more confusing or not that they shook that window. Now you see a diaper with avocado on it, just to be clear, it's not a dirty diaper. He's just eating avocado. OK, so I said, OK, we're trying to run build script before every deploy again, completely optional and. This is PM spelled Necessar, right? Yes, which actually we change that, but because when we do at our functions will change that. But that's just a SSRI like this. We're going to put that for now and we'll change it in the next steps. And do we want to do automatic deployment? Sure. And Maine is the branch that we will be deploying. So lots of questions from the set up treatment project, prejudice feeling. I created a cloud good cloud account with card info. If you go to I may not have this because I didn't have any. There's a I wish you could trigger an error, it will say in the error messaging that you can look at the debug log, the firebase debug log, and I think it might just even be like Firebase debugged up log or something like that. You can cat or or open that in in your code editor to see what the errors you're getting back are. It's usually pretty straightforward of telling you that it's, you know, unauthorized or anything. Oh, but. I did have a funny error and they put it in here. Here it is. So I wasn't expecting this one when I opened up, it said I hadn't accepted the terms of service, so I did not have permission. You may just want oh, these are two different. OK, so first. I'm pretty sure if I am pronouncing this wrong, but Jane may want to look at the logs to see what area they're getting, this one I didn't expect this Firebrace error was the terms of service when I just had to go to the dashboard and say create a project. And then in terms of service, think to check came up. But Julia Simon Firebrace er HGP er for a three color does not have permission you may want to just make. So I also had a permission error that I actually had to do a firebase log out and then firebase log in. I don't know if it was something odd in cash. I was able to solve that by just creating a project from the website first to accept the license. Yes. Yeah. So that's what I, that's what this er. When? I mean, I don't often do external screens, so anyway, so this er if you see this Firebrace er colour message from the service, that's what Scott is talking about in the chat that you'll need to. Accept the terms of service, but I think that the four or three, maybe a different one, if you try to Firebrace login, log out, log in, let me know if that helps at all. Is anybody else having any other problems? I thought this may be where we would get a little bit of a hiccup because. It's when you introduce a lot of moving parts. Because we're signing into not only just the hosting provider of Firebase, but also the cloud function provider to service provider from Google Cloud, not that. Google in general, is a lot of moving parts, except it is for infrared, it's a lot of moving parts. Oh, that's a good question. Everything OK? These are great questions in the Q&A that will talk about the end. OK, how can I change the script? Should be run for every play. Oh, we'll look at that when we sell it at functions. How can we change or are you saying that you do change it so that you do want it to deploy? Oh, so first of all, that's not a big deal. Those things that are pretty optional and it's OK if you didn't click the right one, but they can be changed on your firebase dashboard. And I think it's. I just went to the council sorry, I think it's in the deployer. Um. You know, I'll get back to you about that. Oh, I bet about that because. We're going to touch on that in the function set up, and because it's not there's it's not a. Detrimental to anything that we're building today. No problem. And, you know, there's a certain. I was able to create the project from the Google Cloud created project to the firebase console. Is this because you did that because you. Because you had the four or three er so I don't know if anybody tried that log out log in, but once, once you do something like that you can just rerun Firebase innit. Oh you did do that and it still didn't work. OK, so if you are still having the problem that. Giorgio's and Simon had with the Firebrace Air HGP air for three, you didn't have permission, it seems that Simon was able to create. The project from the Google Cloud created one. Through the Council On. So you just did an projec and created it through these steps. OK, so if you go to Simon for the link in here in the chat console that Firebrace that Google, it will go to your console, you'll be able to add a project there and walk through the steps here. So and they walk you through really well, it's it's very it's a very well documented process. So we'll go ahead and move on to the functions part because I think we should be able to. How do you see this? So this site isn't deployed yet because we haven't run firebase deploy. You can just go to your console. And I think you can see. That information either just going to that council page or in I think it has the I thought I had been in there. If you go to firebase console where we just stupid zoom, get out of here. It was amazing out of the way. Say. OK. OK, so see the firebase UI, it worked, um. And now, because there is more steps, because we have to set up functions to do the server side rendering, so if you did Firebase deploy now? We have to set up a whole process to actually get it deployed using functions because in order it for it for the function to run so that we can make the server generate the HTML, we have to bring the working project over, which I think will make much more sense when we actually do it in code. So that is in step. Five of setting up functions, so there's not too many steps, I think we can do it in these last five minutes to get this set up. So the first thing that we want to do is change that public directory because we want to be serving of that static site, because right now, when we say to deploy, it's looking at public and we don't have anything in a directory. There's no such thing as director or there is there's not the project that we want, we're just seeing. This fire base set up, so it does exist, it's just not what we want. So the first thing that we're going to do is make sure I'm opened up in code this to the side, not just so you can look at the documentation, but I'm also going to step through all of these steps. So first that the letter, if it's too big or too small. Let me know. OK, I think there are no questions, OK? And I also know that Drum is also looking at the chart so you can also ping him if I'm not seeing something. So first, we want to go to our. Oh, Dag Navitaire, root directory, then open the editor. Mm hmm. And then look at our fire base configuration and let it know that this is not what we want. We actually want you to look into this and then our project name. Where the project is going to be built out, and so we know that. When we go inside and dist. In this. Sorry. Because we were looking at what was being rendered and just like double checked to see if I was sharing my story. OK, so in the root of our project, you'll see this is where the angular Jason lives and where. Did I omit from the wrong place? And that's why my Firebrace isn't there. Yes. Sorry to lead you astray, Aaron. OK, so if we I'm going to go through that super, super quick again. So I'm in my room. I'm not in my right directory now. OK, now I'm in the director of the project and I run Firebase and it see how fast we can go through this functions hosting from any existing project, which is this one. And JavaScript, no. Uh. Sure, because I don't want to take a second right. OK, let's see if this is actually so. So technically here, we could have said decide what is it t r. Demo Browsr, so this is where everything gets rendered out, right, the technically this is the change that we were making on that stuff that we were at and we're not going to render it. We'll say yes to this. And then. Uh, sir. Live to. Uh. And this is the NPM run. The old SS. It makes me feel like it put some of the files in the right place. And. All right. Uh, let me open that back up, make sure I have that right, this RTW demo browser. And then if we go to Firebase. We now either needed to change that. And then we'll also. OK, so want to make sure that nobody. You know anything over in there? OK, and then the other thing that we're going to do is add some rewrites because we want to. Rewrite everything and put it into this SS r function, so inside of oh sorry, hosting those ignores, they're fine. We're going to say rewrites. And it's going to be an array and object and there is going we're going to say take source. And everything and insource and we're going to be it. This is our function. So that's everything that has to go into that fireplace, that's everything that fireplace configuration needs to know that just pretty. Just put that all up on one line, all the ignores on one line. That was the change that happened on. Excuse me. And then again, if I'm moving too fast, this exists here. Because the next thing we're going to do is going to ah and change and look inside of our functions directory, but in this code we can just say. Control to allow me to open up the terminal, change the functions, and since we're going to be working with. Working with the filesystem where actually do an extra. And this came up with one of my co-workers the other day, I'm so used to not using dash, dash, save because it is Dutcher saves saves it to your dependencies, but that I don't even remember what it was, but that became default. So that would be saved interdependencies and now some routine functions we added that to. Our dependence is. Because in functions, we have a package that Jason in there and now we're going to make a function that is basically going to. To make a copy of our working project and move it into the function so say code and we'll call it copy English. Close this out and in here, we're just going to use that. File. System that we just. I don't you know, that that's they're already. Nonetheless, then we're going to pass asynchronous function, doesn't need anything passed into it that's going to say there's a source, constant source, it is the directory. It is what lives two steps up, one step up in the dust directory, so will it for a minute. OK, so I was flipping between quotes and going backwards and then we're going to have the copy, which is going to be this directories dist, the functions directorate just so. Weight file, filesystem, removing Kathy. And. Oh, filesystem Cotty. From Suares to TAPI. OK, and I'm missing a. At first, I was like, you know, a friend goes here and going to that's going to call itself. OK, so we're basically copying those things there. And with that, we're actually going to change our build script in functions. So we'll say package that JSON in functions and the functions directory. There's a build. There's no build script here. So we're going to make this build a script that calls on that file. A very bad heartburn right now, I said, I'm sorry if I'm making lots of guttural noises. So we're saying. So we're saying when we when we tell functions to build look at this function that basically takes that existing distributor just folder and copies it into the functions environment because the functions needs to see needs to have that application in the functions working environment. So that's why it seems kind of odd that we like doing all this, like copying of things when you would think you would be able to point to it. But that's not the way the functions are loaded. So excuse me, the next thing that we want to do is actually then build that out and it's basically kind of another copy, but we do that in the functions index that. So, again, this is in the functions directory and is another kind of tidbit. If you did writing your functions in typescript, it'll be indexed. That's pretty straightforward. What's nice to is when you do that and it set up, it gives you these comments in here to help you set up your first function, because I think it's a lot of people don't realize about serverless functions is that they are just JavaScript functions or type script functions. So they're basically like code that you're very used to using and can be pretty straightforward, like how here they're just doing that function. Source index, it's. No, just functions, functions, forward slash index. But yeah, so it's very straightforward, like you would like it down here, they're just doing. It's just sometimes the setup of doing serialist functions, as we're seeing, that can be a little bit daunting. But I mean, even when doing that firebase set up with the setting up the functions, it was just kind of a walk through picking. Those settings. All right, so I got rid of those comments, we didn't need them, we want to Poulan functions from Firebase functions, and then we're also going to pull in our universal application that we're making. We'll call it universal and then we'll say require. And we're going to make sure you get this right. So that's a tactic so that we can use the literal sourcing process maybe. TWD and Fred Michelago. OK, process celebrity, I don't want to mess up this part, so we're basically saying, where am I right now? Looking dissed, you should find this is my project. Remember to put your project name there, which if you didn't change it from the demo, it will be that render the way TRW demo server. So that's where that application exists and rule. We look at Maine and we look for that abduction and we want to export this. I'm going to put all the code in and then switch to the other topic, but, uh. I put a link to another article that had a few more comments and stuff about actually running this process as well. So we're almost done, though, functions that HTP is that on request? So we're saying that this is the function command of on request. I want you to feed it universal. And now that's everything you technically need to set up the functions in your project. So now we can make field commands in your root directory package that JSON. So this one that's in source packages and not your functions, you have some build scripts here already. So as long as you look at your package that JSON and see that there are scripts in there, that's how you know you're in the right one. OK, so under here. We're going to say build functions, and that's just going to. See npm run prefix functions. Old. And then also build all so do all the things basically and PM, so this is where we're saying npm run. Old SS are in and SSTO, that would not work, so do that, do this, build SSR. But I also want you to ampm run, build function main functions. Functions, I mean. This also that's why. So once you have that, you should be able to be in your directory, npm run filled all. So, again, this is basically doing all these steps of. Of saying, OK, I have to run at FEMA and build the the Siwei, and so there you go, you have that build and now it's going to say, OK, now I know I need to go in and do and build out the functions. And doing that build functions is doing the NCM, going to functions and then run build, which is the package that Jason functions. Running that file that we just made, so technically we should have all of that built and we should be able to do firebase deploy, but now I'm a little worried because it gave me that billing error. OK, that should work for you. I swear I set up my building right before I did this because I had gotten this error before. You got a building error to. And you you also have buildings set up. OK. Oh, no. Yes, I can show you where to set up. Let me hope I don't give you my credit card number, but I mean, I'll show you how I set up billing. But as you see, you got that error. But that that should work as long as you're billing is correct. It may be because I set it up right before this that maybe they had to. Yeah, unfortunately, because its functions, I think because I feel like I've never had to set up billing before with. Just running a regular project. Yeah, so because of functions. He did oh, so it's through managing your Google account that you set up payments and subscriptions. I don't want to click on that. I mean, like I like you all. I just don't know how much I can trust you. And I don't know how much of my information is showing up on that screen. But you can set it up through your Google account and then that should cover Google Cloud and firebase billing options, from what I recall. Wait. I still even have it open. OK, so in this firebase. Uh. This. There it is, I swear, I feel that out, but that's why. OK, so we're not going to go into this because I'm sure many other people have tutorials of how to set up what you need, what you need to pay for and how much you need to pay for and how to pay. But if you go back to your dashboard, go to your at the bottom, this bottom left. It has your billing stuff and. Yes, I wonder what kind of rendering this they used for that anyhow, that you can actually select and pay there? See, I do have a thing. Anyway, well, maybe not. Anyway, let's move on, but so from there, let's just recap. We have a project set up with a university, so technically we have the way to build it out so that it is Stepaside rendered and it is also pre rendered in doing that build SSR. It's pre rendered and then has an information, knows how to have the information sent to the server so that when it's requested for navigation or user, your site HTML is being rendered on a server, we are able to set that server up using firebase and enacting Google cloud functions to give that function to the server using serverless functions, cloud Google cloud functions and. Oh, uh. Don't you have to switch to blades instead of. Yes, yes, that's what I didn't click that final button because I knew when I did it the first time, it pulled up my account information. So I wasn't sure. But yes, look in the chart, if you're also getting that billing, I swear I'm not a deadbeat. I just didn't click the button. Oh, OK. Let's go ahead and move on. We are a little behind schedule, but I do this I do the the James Stack stuff all the time. We're going to get pretty far in it. And either way, I'll send I'll give you a bunch of resources at the end. So for the next seven minutes, I want to give you a super fast. Rio. We have we lost we lost child care this week because we had an exposure of our child care to covid and so we have granny for filling in. I'm getting lots of questions, very grateful for the super last minute child care. But just so you know, if you hear. Shouts of relief any time soon. OK, so the next step that we're going to cover and have opened 80 million windows now, of course, is just basically talking about. The domestic architecture, so I'm going to do a little refresher, I just have to switch my screen sharing, I will remember to share the right screen now, I swear. So previous to a new. I always leave entrepreneurial. OK, so you are now seeing the pre rendering service function slide's that we are going to quickly go through because this one in particular, you will get a lot of information more in actually setting it up and doing it. OK, so prefunded and serverless function is basically one of the core tenants of the domestic architecture and we talk about pre rendering before because we were using it inside of the universe. And like I said, you're going to see that a lot of these things overlap a lot because this is. What everybody kind of realized, everybody that has made these approaches has realized it's a really smart approach to serving up your sites. So in a dameshek architecture, pre rendering your content, which is saying you're building it at build times, it just like ahead of time compilation what you said was happening at the time. This is where this pre rendering is happening at build time. So we're not. So where is the universal rendering? We were doing it on the server. This is pre rendering like we saw with angular universal, where we could do it in the command line and then have that file, that directory that had just a static assets. That's like what this kind of pre rendering is. So saying you can do it universal and you can do it with Skully. And so that's the angular Piringer we talked about. Skully is the only static site generated for Angular at the time right now and probably for a little while. So a lot of people in the English community wanted a static generator, but nobody had time to build it. So thankfully the Hero Devs team went and took the baton of the idea of needing a static site generator that would make it so you would be able to kind of work on that toolchain, have that build time pre rendering. And also, I mean, did they do markdown rendering and all kinds of great stuff? That's a little more on that. Oops, a little more on that jam stick approach than that. There you go. So again, a static site generator is it's basically it's generating all the page of a site at once only when there are changes to the site. So it happens at build time. So you'll see with that workflow any time there's a new deploy. So something has changed, it'll rebuild. And so it's basically making it very hard to hack and really easy to catch. And when the combination so that gives it to user faster and more securely. Every major framework and language has one. There's Gatsby and next for React. The next is more the framework. But nonetheless, then you have next ton more. We have Skully. So the great things about it, you're a you're basically are is the architecture in general. The overarching architecture is really boiled down. Well with these four aspects, you're generating cash for static assets that we saw with that pre render deploying to a CDN. I touched on this a little bit in the beginning. This is a content delivery network. So you're getting rid of the complications of setting up the traditional server infrastructure. And also students are smart in the way that they just have direct knowledge. So you're able to have like the net lafi edge. We have it where you can have it's globally distributed, like every CDN, every single redistributed. But we also have multiple cloud infrastructure providers. So who knows with these times I've only seen once a whole infrastructure provider go down, but I've been working with servers for a long time. But if that happens, you can fall back to other infrastructure providers, which is nice. But with the CD ends, you basically have these edge nodes and it's listening for a user to request it as close as possible. So it has like the its main origin node and the static assets are sent to the node that's closest to the user requesting it. So it's you know, there's no solution for latency. But this tries to make latency less, not server less, latency less. Don't quote me and don't let me on that either. But you're also getting that redundancy because it has a redirect knowledge. The redirect knowledge is actually extremely powerful. We're realizing now we might talk about this a bit later, but there are things like edge handlers. So it takes that redirect knowledge and says what is in the header information? Is there something it's telling me to run a JavaScript function? If so, I'm not even going to talk to the Origin server. I'm just going to take that redirect knowledge that is handed me a JavaScript function and run that JavaScript function. So you're able to take header information like like geolocation time, anything else that you may have and have. And pass it to a JavaScript function, so it's a dumb, smart, dumb server that's very powerful. And then in general, when we talk about the dynamic functionality of the Java of the Jams deck, we're talking about utilizing client side JavaScript to talk to the third party APIs and Serverless functions. So, again, this is kind of like what we saw with that hybrid, except we're not using servers, but we're able to take advantage and kind of delegate that data collection to service functions and third party APIs. And this is all wrapped around something that's very important to me, which is creating a better development experience through automated workflow and. And like automated workflow and easier access and more accessible access by making things like headless messes, which we'll touch on. So I talked enough about content delivery networks. Ulgen, a link to the workshop where we delve into this more and also my slides serverless functions. We also touched on a bit where we're basically saying it's a single purpose function that the developer makes, but then it's hosted and maintained and executed by a cloud company computing company. Like other functions, Google cloud functions, we just use atriums database lamda. And then this article is really great by Jason Langsdorf about. Talking about what Serverless functions are and then I'll share these slides, I have a whole section on just these different providers of different kinds of resources that you can use for Serverless. But we're not going to touch on these today. We're just going to jump into the code. So I'm two minutes over where I wanted to be. So let's go ahead and still take a five minute break and we'll meet at 3:00. Let's meet at five past. We'll take a little bit of a longer break. And. Actually, let me see if I can go ahead and. Give you three minutes of information and then we'll make it fast, if that's annoying. Let me know. I'll stop. No one said anything yet, so, OK, so I'm just going to give you three more minutes of information and then we'll meet at five past. So we're going to have when we jump in and get to this project, we're going to use the five functions because it's basically Atrius Lambda functions wrapped up in an easier way to use it. But we also have so like we'll see here, we're just basically passing information in a function with a handler. So we're not even going to touch that today. We're actually going to use tools that come with about two lines of code, will do it for off today that utilize the net lefi function, but we never have to set anything up. But this is all the code that will actually be going through today. And then so we'll touch on this when we get back and do the wrap up. And yeah, we'll have a seven minute break. So we'll meet at five past. And just a reminder that, um. I will be trying to put the resources for all the code that we're going to cover today back into our workshop documentation. Which is you. And I will put the resources for everything that we're about to do in the next section in there as well, so I'll see you at five past the hour. So we are pretty much at the section where we're going to start working on that jam stick approach that I just talked about. Let me pull up a chair. So I have that here. OK. Eating avocados, that's really good. OK, so what we're actually going to do is really take that demo project from the clean spot, which I think I actually yes, I did that first one first for us and then Lincoln. So this is a I thought I avoided last time with showing you the wrong link. Nonetheless, we know that it lives excuse me here and we can make a new version and call it under the right way to answer those that are that OK, Jim stacking it. And so make that new repo. My computer will proceed to take flight. And then we'll go ahead and clone that locally. So now I went back to a clean director workshop directory, so you want to make sure that you're out of your other version of that demo and into a clean directory and then run it Klown. Then we can change into their. And then NPM install is to be safe, but Maksym would need to install. So we have that installed, we're going to run and serve just for making sure we have what we have. You have to do. You know what, we don't really need to do that. You're running out of time anyway. So what we're going to do, though, is making configuration file for nullify. Actually, let's go ahead and. Yes, same one. Thanks for bringing in Lincoln there, Simon. Oh, yes, you could. We're going to make a metaphor by that time. Please don't ask me why it's time. We're going to do a selfie, that panel, which is a configuration file, and that is basically just going to be the file that says. Like we did for Firebase, where we said where, where, where built commandos and where we're building from. So. Pull it up, make sure I have the syntax exactly and. You won't always see the switch as I'm typing from, but I'm typing everything I have in there. I just want to make sure I don't confuse it more by typing something from. And. So first we're saying, OK, when you build here's the command that I want you to use. And so for initially, for Angular, its energy field and we'll say prize for production, and then it's going to immediately live in the dust folder under. Let me make sure I have this right, just because we have given so many different names to things. I hate when code does this, I'm opened in it, I asked it to open in this directory, right. And. It's not opening that it's opening. It opened it in that live to. So this fire is in the right place. But we have to. And here. Let me get rid of this one so as not to confuse us. So now we know when the right wing is here, if anybody knows a way around code doing that, I'd be very appreciative. OK, so in the net left by a configuration file, we're going to look at our angular that, Jason, to make sure that the output path. Is. Our TRW demo, because that's where we come from. So that's information that has. So. RTR W Dunlow is where the built project will live, and that's what we want to publish because it's an English site and it has that dynamic routing, we also need to set up a redirect that just says from any route. I want you to go and look at index that came out because that's where the information lives and it's going to be a status two hundred could force. But that's this is the bare minimum of what we need just because the way that the routing works and we're not doing we're on the side. And so we're not doing that dynamic routing. But that's actually that won't matter once we have it pre rendered. But initially, that is how we're going to set it up. So now that we have that, I just want to make sure I'm on the right project. We have to npm. I nullify Seelie share. No questions nullify or NPM install, nullify Seelie globally when hit enter, but I already have this in here, so I will probably yell at me. Or not yet, maybe not take as long and there's here's some documentation on the ceiling in general, but the commands we use today are the commands that will. I only really need you basically will do the setup and then not really touch the KELLYE that much again, except to say open up my site, do with because how we did with Firebase, where we said deploy it whenever there's a change, that's what we do with this one as well. Is there already have it. And we're short on time. OK, so then I'm in my project, in the root directory, if I say nullify the just like we did with Firebase. And we're going to create and configure a new site. I forget that my co-worker, Blitz Jackson, a.k.a. Jason Langsdorf, had every one of his projects. It's ridiculous. OK, the site name, that's just. Keep it simple, and there we have a site, but now it needs to know how to build so nothing will be there right now. So it already knows from that configuration that we want to build dash pride and that I'm just going to rewrite this because that always. Just in case. So now it's up there, it exists, we can go to you, can you shortcut and until we can say into open and look at the dashboard. And we see that it is deploying now and so that trigger to deploy, it's actually running that whole build process so. Well, that's building. Oh, that's interesting. I was searching my e-mail and that must have searched Chrome as well. Well, it's building. Let's go ahead and add Skully so we can have pre render and get more stuff done. But if anybody wants me to slow down or cover anything else, please let me know. Again, I will give you a thorough resources of blog posts that cover all these steps. OK, so we have that configuration file that has that information. Now we can go and actually clear this out, we'll actually want to build locally, could be proud to go faster or do build to go faster and not do. Yeah, that's fine. I'm building now because when we add Skully, it's always going to want us to build. So I just want to get a jump off on that first. That's fast. So Engy and Skully you admit. Can you get that ad in there. Oh yes. Sorry I can slow down the contents of the Tamil file online. Uh, let me just paste them. If that works. Is that work OK? OK, OK. And then the command that we're running, oh, yeah, I should have waited for this install. I'm sorry, that's my red. Because that would have given that, then we would have been all on the same track. So in the Tommo file is right in the root directory. So along with your other JSON file configuration files and the. But you might call it the package that Jayson's. Does it so just as a. I just to have this here. That's the install command. And then this way, you can copy and paste it, then once that's all installed from the root directory. We're going to say Angie and I'm putting this in the chat, you can't see it because I'm putting it in the chat. Milenio. Yes. And you don't have to build now, we're going to do it again later. I just always like to do it because if I forget. OK, so those are the steps we took so far. We are at the root directory. At the root directory, we made the nullified outcome, which looks like this, and. The tunnel, none of my. Oh, jeez, look at that rating. I shouldn't have called him out. I'm missing the built command we're setting up. Uh. That's this one right here. So in the net lefi d'attoma, which is in your root directory, you say build and then the command is here. And when we did A.l. Open this command. Now, if I open it opens up the browser, the UI. And there's a deploy settings where you can also and at your build command. But it always listen to your nettled find out tomorrow first. And just a heads up. It's life now. In the root directory, we made that Thommo file, which is the. It's like, what are we doing, which is the net Lotfy that Tomoe? And then we. Did installed the net Lafi Seelie. Uh. And now we are going to do and in the root directory, Angad, at school, I'll admit, though, Skully, just at the beginning of this year, around February. Released four, and which was like really great for the initial energy, would have been awesome to have more fun in person, but now we get to do it now, today. But we agree. And then they just a few. October. We knew a September, October, August, they did the V one release, so they're no longer in beta, which is very exciting, but. As Jerome And how are you? Is it. Our status, let me know if I'm pronouncing it wrong. If you were an attorney, as they pointed out, there is this area here that is a known here's Ear to the Sky team, Frosti and the rest of the derivatives team with the angular 11 release. But it should still work. So we have this set up. You can find more information at Skullion Dotcom for the documentation and whatnot. So now that we have a good germ tested earlier with nullified. So now that we have that set up, we can run and rebuild and rebuild. And the reason that you have to run and rebuild every time is because Angular Scully goes through and looks at all of the built out roots and it actually goes even domestic ones. So if you had, you know, a bunch of nested modules or nested pages where it was like, this is products and inside products is Red Stool and instead Red Stool is three legs, et cetera, et cetera, it knows that it needs to make and render a root for each one of those. But a project has to be built out first. Oh. I love that. Yes. That also is a it's good to mention that Squali is open source. So as is pointed out in the chat, there is the issue that we're all following along with or can follow along with. OK, so we have that built out and then we just need to run in principle. It's nice to give you a lot of output inside. Yes. Inside here, so you see you're using the guest parser as well. Both. We had just lost that. News. I did show, but anyway, so this is also using the guest pastor, just like what we saw with English pre render. So we see here that the route list where the atlas was created, this is always nice to check for when you there's actually a route finder that will pull stuff in for you as well. And you can edit and configure a lot of things inside of your skully configuration file, but then it tells us what routes were actually rendered. So we know that these are again, like we saw with English, universal products, resources and services. And then the home route, which is that blank route was rendered to indicate that HTML and it tells you how long it took. And then there is a flag for finding new routes when we add more routes. But that's this is basically as far as we're going to go in with Schooley today so that we could jump in to somewhere that dynamic function work. But the last thing that we need to do now, though, is actually update that our net lafi configuration file, because now when we serve inside of the. Seven, nine, eight, eight. Yeah, I did, I probably shouldn't have jumped to Anglia Angular 11 Hyndman for the workshop, so apologies for four in the angular 11 errors that we're having show up works on my machine. Nothing but really, though, to say you can follow along and check out over here if you have any questions and it'll be recorded and no, I'm on back. Oh, you're just asking everybody else. Sorry, just and hopefully it seems that it seems, as Jerome is saying, that the team is aware of it. So hopefully this year will be fixed soon. But this is on us and we're just beginning Escalada day where we can move on to another five functions. And with that in mind, I want to show you that what we're going to change on our configuration file now that we want to serve up the pre rendered version. So now the command is the same. We're just checking on it. And PAMA and Scally, which. Then also changes where our project lives. So. So I've always been used to doing command be to open up that center, but it seems zero never gets around anyway. So you see here I said to static because if we look here now, we run. We had run ampm run Skully. We look inside of dist. We now have the actual angular project at our TRW demo and then the everything that Schooley put out in this static directory. So just like we saw with angular universal pre render, we see that there is a. Products. Directory and inside, there will just be the index file for that product's root inside assets is where your skully roots that Jason. Let me get that out quick. So, you see, it's pretty straightforward, but again, there is a. Skully. Config file. And you can add sorry, sorry to open in code. You can add routes that you specifically wanted to use in there, and there's also a way to exclude them windows. OK. So now that we have that, we don't have too much time and I want to make sure we get into questions and Q&A and resources, so I'm just going to show you the office that we can set up. And again, this is a rapper for an ELF function. So it's not much code. But I just wanted to show kind of like we went from a very. So we saw the setup for doing the cloud functions, and so keep in mind that that, again, is a serverless function. So it's the same esq approach of utilizing serverless functions to populate hydrate. Data inside of a pre rendered application, but with using this one, we're not using servers at all. And I know that can bring up a lot of questions. So let's just go through the code first. I'm totally going to. Watch my co-worker like. So that I don't waste any time going. Did I get that letter right? OK, so code. Are you in the right place, get out of here. Yes, we're in the right place. We're going to open up. Do I have navigation inside of our navigation component also, please, you have this code that I have written. Please do not judge my skills DS Magic that I do not know. Well, I spent most of my life in servers so long and we're actually going to change this elai to a to a div. I think I can do that just fine, and it won't be mad at me. Let's find out. And this is class. Log in and then we just say data nullify identity button, so this is an open source project that I work in at the identity widget of Zero, I think has something like this as well. But it's basically a big thing in James Dameshek. I mean, it's a source app now. NAFDAC component that HTML. Yes, it's not just you, Steve. Yes. This is a big proponent of the James Tech architecture is trying to take advantage of what dev hours and dev resources we have and therefore delegating anything that you possibly can. And a big thing that I think I've had most of my long struggles with is off. So when you have resources like Mathlouthi Identity and O0 that you can delegate something that's so complicated and scary to, that's where I think it's really important to do that, where you can spend a little more time. I may sound redundant, but it's because we're not changing too much code. So this is the HTML template for the NAV component. Let me show you the app for this little person right here. Rich. Can I still put the little person in there now that I think about it? Let's find out. Uh, Klans. I can't remember if it's a person or what. Oh, shoot. Person. It's nice that you can just pull material comes in and a link which actually show you because we're going to head there anyway, if you haven't worked with the icons before, you don't have to completely install any material. You can just use the icons of your candidate. OK, so this is what I've added. And use your tools. Oh, Stephen, put it in there for me, thank you so that you can copy and paste, but it's just the that dick. OK, and then we just go to the index, the age of five and the root. So, yeah, this is all you have to actually put in for material items, uh. So or not, in Aruba insource, you go to your index at Extremophile, I'm going to paste this into the chat you are under here. You just need to end this script. So this script center is saying, oh, I wish I could have spaces that morning. Sorry. Geez, I can't even do margins or padding and chest, just getting so in the script tag we're basically sending saying that we want this identity widget in our page. Now. We can run and let me leave this sorry, leave this up for you just in case. I usually get rid of this side thing, I remember when I first switched over to the code. No, it was sublime when I switched over to Sublime and I was like, look at this cool navigations. I never use that. I never use it anyway. So now we can say, see that we have all of this changed. I usually get it at like every single different. Like I would have done it when we did Scally and I would have done it when we changed the configuration file. But right now. Sorry, that's an alias for ADD. I try not to use aliases but anyways, then I'm going to check it. Yep, get commit. And the message will be ads calling. Now I can update. And would you like to put in there, but so now I'm going to push this. This is the first time I'm pushing. I didn't care. I'm going to push that, and because I pushed that, you'll notice when we did nullifying it, it didn't ask us like Firebase did, if we wanted to set up continuous deployment and active deployment integration. It just does it automatically and then you can turn it off. So it's almost back. It's opposite default. So. Oh, by Jeffrey, thank you for coming. OK, so we can do Netlist, I open. Sorry, I had another window and it goes here, and because you see this here and schooling, if I can, updated widget, so that triggered that deploy and again, that you can change these under deploys. But so we know it's building. We have to actually turn on that. We want identity turned on. So we just say enable identity. And then I want to actually add a few things. So you can there's a lot that you can do here, but this is my favorite, so because I don't log into anything with it, that's not let me do Google logging, etc., I have one password because I don't remember anything. And you can do a default configuration or you can set up your own with your client ID and your client secrets. But so, again, it's. This was where we came with Mathlouthi open. We click identity. We enable. Then you go to settings and usage, and then when you scroll down, you can find external providers, let's say, get help as well, and then you can do a default configuration. And now that's enabled. There's a lot more that you can do. You can even set rules here once people. Sign up and sign in, you're able to set rules for them. Uh. Oh, we have to get some news first, so let's go back to deployers to see if our build is done. Um. You can see the skully output now. They didn't lie. Oh, and you can also have to play previews, just a heads up. So this way you can share it with your team, but nobody else. If somebody else wanders to that site, you've got to really worry. But the preview. But we actually made it live. So now Shapard Lyceus messed up there, but it is here, let me. Just give it some. Maybe why he received No. No hero in this. Whatever, so it's right here, you can see that it's there. And just very curious why. I guess I'll never know. But we click that now and, oh, nice. You know, if I build the Tobias. Did you did you want to see? Oh, so see how it says this. That's as long as, you know, nothing is set in years. Just the repo you can hit edit settings and. It's always going to go to the high more as a default, the one that we made. Which I would like to change that is reflected on here, but that isn't the case just yet. So this may say something different than what you have in your finatawa because they don't match up, but you can edit settings and set this, but just know it will always default to your nullify d'attoma. So is your still deploying. OK, the. Oh, and did you so when you had the place settings, your repository has both of those in there, you can do a base directory so that you can say. Go to the James Deck approach. OK. Hala, let me know if that works, so zoom, zoom. So now that you have. Those. The template information in that d'Hiv and the script, you should now have the ability for users to sign up. Or just sign up with Google. Please don't judge how many Google accounts are listed on this and then you can log out and you can also log in. What was the command you to get permission to notify? Yeah. So we we haven't even if you do get push, it will trigger a build and trigger a deploy, which will trigger a vote. But you can also go to your deployers and say trigger deploy and do it manually. And you can also do it from your command line by saying, if I deploy. I was in control just always in the way. So. So that's how you would do so, all of this is. We can disable. JavaScript. And since we're pre rendered. Excuse me, I'm sorry. And did you actually disable. Hussein. So, OK, so the sample script. All right, you can tell my brain is going to the to the end of the first. Yes. Yes, get pushed. Thank you, sir. So there you go with JavaScript disabled, which from working with Peter Beuys and testing stuff, there was always know that. Just disabling JavaScript and Chrome temples isn't 100 percent going to give you that, so it's always good to throttle mess with that stuff and completely disconnect your Internet connection, which I can't do, or we would be done with the workshop. But so we know that our pages are still working. One day we'll do some more free follow up workshops to populate cities, including blog, which is an even. Link yet, because you can do that really in a really cool way with Skully, I highly recommend checking out the way that they set up blogs because you can do markdown blogs really easily. And it's a super easy process to set up a blog. I highly recommend checking that out, but also. Holly. Hitting the right thing. Oh, gosh, OK. Also, it's not going to give you any errors because you're hitting this and recalling JavaScript to make that widget come up, but you're not going to get any errors for that coming through. But everything that's pre rendered will come through just fine. But when we do. Another thing to think about is you can use caching and different types of. Here we go. To make sure that your build process, if you're going to say rebuild every single time your build process, you can set up caching and set up different ways of actually. Rendering it so that your bill doesn't take so much time every time. OK, so there's so much more to do that we can do with both of these strategies. But one of the biggest things I wanted to point out is that. Like with framework wars, there is all this talk about how different these approaches are and how one is so much better than the other for ABCDE reasons yet. A lot of the time, we're using a lot of the same technology, and so what really comes around this more, which I wish would have had a little more time to talk about it, my apologies. Is is basically your development process. So how are we? You know, we had great command line tools with both of these tools being able to set these up with hosting by running a command line tools and just going through that and having those those dashboards to guide us through how we're getting these things up and running. Both of them are using JavaScript. We're both talking about serverless functions were pre rendering with both. And these are besides the main client side rendering action with angulated. These are both very viable options for your angular application. So. Oh, my goodness, I'm so sorry. We only have seven minutes, but I will look at the questions now. Please put any questions in chat. I just want to show you just a few more resources that I have in a slide, and again, I'll send you the slide links. Can you can any English application be rendered statically with Scully, is there any prerequisites like, for example, the type of link with a back end? And so as far as far as actually rendering the static content, you can even use Scully with angular Java applications? It's it's basically. What you were skully, rent free renters, all of your roots that exist for you, and then it still it works with state transfer and some other things to still use ANGULAR for grabbing the data, getting everything that you need, but then it falls back to that pre rendered content for loading it. And this is much more in depth than I'm saying so. Oh, I just. OK, so please feel free to look at not only just like Scalia, but also. There are people to look at the issues because they talk through a lot, a lot of the stuff there, but all that to say open up your application and actually do run ads, actually run and run locally, see what happens. But there there's a lot of fulbeck, you know, transfer state and actually using angular in your application still for some of the data. Huge, huge thing that I should point out, too, is that Angular is the newest language to the domestic architecture reacting. I mean. Vanilla, obviously, with things like Hugo and Jeckle have been using domestic architecture for a long time, so has reacted Gadsby in view, we're finally getting things like a static slate generator thanks to the hero devs team and. So we're learning a lot with the English approach to the jam stack, but hand in hand with that, we're getting a lot of energy into the ecosystem and in general, the Damasak Architecture is getting is building up a lot more to so all that to say that just, you know, it's going this way to, you know, instead of a plateau, we're going down, we're only heading up from here. So I just went to this type of work in Perth. Exactly. That's. That's great. So, yeah, the big, big takeaway is understanding that the difference there's a lot of similarities. The difference is rendering on the server or rendering at build time that pre rendered those pre rendered assets. I just want to show you some of the. I don't know if you can hear a little voice there. Hey, and then I'll remember to share your screen the shame that I remembered how to share screens. Well. At the end of the show. OK, so some resources through the road, again, highly recommend any questions about rendering. Check out that rendering on the Web blog post from Adam and Jason. They have this really great table at the bottom to kind of walk you through, like, really short. Everybody felt good thing or at the workshop. Sorry, everyone. So there's a great resource there. The blog, if I may, I'll talk with the comp team to send out a resource list, has all these, but also on the net, if I blog, I have specific blogs that go over everything that we talked about today. And then this is a really great resource for Cervalis tools from CSR Strix Chris basically put together a video of it to scroll through all of these major providers for us, for forms, for CMS, for payments. You can do e commerce and all this dynamic stuff with all these serverless functions that we can use to check out the universal repo, because they always have a lot of really great conversations on there. And then also we're just releasing soon the audio version of the James Stack book. So keep your ears to the Web. And while you have figures on the Web, check out remotely interesting. I'm going to release the I was going to try to release them at the exact same time, but it will be coming out this week where we talk about rendering in general. And it's a lot of really great points to help you wrap your mind around rendering. So find me at Twitter and TV Manics to the and I see as my games are open and you can also find me on the net asset value remotely interesting. So thank you so much for coming out today.