Going on an adventure with Nuxt 3, Motion UI and Azure

I'm going to start off with an introduction on who I am. You know, what we're gonna be doing here. However, we're going to be creating I'm gonna be talking about Knox Street. I sure started web apps and Azure functions. I've already said it I think four times now and it's only been like five minutes. Um, but it will only get worse. Trust me. And we're gonna do like an introduction just a small piece and you know what? We've built some thoughts that we have after creating this. stuff like that one of the important things also in this Workshop right now are also your samachi and they will be my how do you say it's People looking at the chats and looking in Discord to see if any questions pop up. If anything, you know, if they're on Clarity or maybe errors in your part or just stuff that you want to say and they'll be mostly answering it or possible to me. So just so you know that if they answer they're not nosy developers who just want to do that thing now, they're part of my crew today. So that's actually really wonderful. Okay. Oh. That was a spoiler. Who am I? Look at these two pictures. So this sort of sums up who I am during the summer obviously because this is not winter me. So on socials and blogs. You can find me at Freddy player Meli because Ready Player one, even though it's a very awful book. It's actually one of my favorite books. ever but don't judge me on it, please like everyone can have its. How do you see it? That stuff like that, but I don't know. I love the book. So hello. I am Melanie Lou. I live in Lima which is right next to Amsterdam the Netherlands with my boyfriend. I might do guinea pigs. And I currently work as a sofa engineer. I got Gemini and Ellis situated in it's and I've been there for like almost four years now. I really really like it. Of course. Otherwise, I would have not been there anymore and my current stack that well my current stack the stack that I've been working on for the past few years already is few little elements for a web components Azure and note. So if you hear all these Technologies, then you might might not find it surprising that this is the workshop stack that I've chosen. So in my free time because I do have a bit of that. I am a sailor of Dutch Waters and my boyfriend found that very funny that I dared to say that out loud but we have about so I'm just gonna go own that title. We are currently docked and Omega. So we are really close to well a huge chunk of water. That's Anonymous has to offer. We have a 24 feet or seven half meter Sailing Boat called Bola. like and bulla means for my non-doches out there. A slightly larger version like she's chubby chubby would be a very nice translation of that. Yes. because she's just you know, well for That's how they say it and vote like a wardrobe. I know she already got the name. She already had the name when we got her last year, so we weren't responsible for that. But I'm for the past three months. We've been just giving her a very elaborate makeover and as you can see one of the pictures as well we are you know, Getting the vote out of the water that everything here underneath and then now she's back in the water again. And this summer we're going to be exploring that isomir and maybe a bit of a lot of say and all the cute sounds that the Netherlands has over. so apart from my sailing life, which is expanding. I like to film. small life I was really struggling with how I would you know? describe that but just small life under and above water level. I finally very calming to see worlds have never seen before however small. So sometimes I just throw my camera into a palms and see what lives there. I have like this camera this tiny sort of. Not really GoPro, but it's very nice. Almost GoPro. And I just throw it in the water on a stick and then it filmed stuff and it usually films like these tiny creepy crawlies that you normally wouldn't really see and that's what I do to relax. and I can really you know. Definitely. You should definitely try. so our application what we're going to be creating today? Is this buglopedia? And it's very pretty really like it. Basically it's gonna be like Pokedex, but for real life insects. So workloopedia, right? So I don't know if you can see it, but there are also a lot of bugs might rest today because I'm really in theme. I don't know. I find it a bit funny, um in the past few months, I find that I needed to find new ways to relax and I started getting into plants again and insects and nature how things work and relate to each other. So I started building self-sustaining ecosystems with the idea to Place wood lice in there as pets I bought I didn't I built it almost and I'm not trying to see whether the plants can supply survive because if the plants can provide then the wood lights can also maybe strive hopefully. So they're not in there yet, but they will be there. Um, I also bought quite an amount of plans for balcony and I'm very happy to announce that there are also alive and thriving But one of my plants got lice a lot of lice and I am a vegetarian so I try to make conscious choices always. So that means that my first bug repeller would have to be natural and Google told me that ladybug babies eat a lot of lies. So I captured six ladybug babies and placed them on my flats. Really thinking. Okay. Well now they're gonna like, you know devour all those lights. Two of them did sort of they were sitting nearby and maybe eight one or two. But after two days all six were metamorphosis states of becoming an actual ladybug, so now I still have lies and six almost ladybugs. But at least it gave me a theme for this Workshop. And that sort of got me thinking would it be cool to have this insect and so encyclopedia attempt would use for information? Well, we're going to be running into a lot and obviously I didn't entirely deliver. I can't deliver on that. Very large problem promise, but we'll make a start today. so our goal for today would be to create an application. almost from scratch and I'm saying almost because we're gonna use this application templator from Lux. So it's going to set up an application for you. And of course I thought out what we're gonna do. but it's like a copy paste for all the future applications that you want to deploy. We're going to deploy an application to the internet. Which is where Azure static WebEx comes in and we're going to deploy an API to open up the endpoints / API slash bugs. Course, I'm going to be explaining everything. I think it important note here. Is that the focus of this Workshop is not necessarily on the street and application development. I want to give you like a look into what what development from start to finish good look like with. This technology in 2022. So even though I'm going to be giving you a lot of information. It's not primarily focused on next at all. But we do have Version Control and builds and deployments and API endpoints. So it's going to be a lot and I'm going to be talking a lot. I already have a dry mouth so it's gonna be great. Okay, so our workspace for today you might notice you might not notice, but I'm using Windows. I didn't test it on MacBook. But I hope it works. I just didn't get around to actually tested on a proper MacBook, unfortunately. I'm using visual studio code. Honestly, it's the only editor I use and in our case. It has a lot of the Azure extensions that we will use. So during this workup, you will see Visual Studio code a lot. But feel free to use whatever you like, but remember that we do need some extensions. If you want to code along like properly and there are other ways to do it. So feel free to do whatever you want. And we are using GitHub. So if you don't ever get up with that now's the time it takes like I don't know. Four minutes maybe. And Azure one of the prerequisites for the score, of course Workshop. Was an Azure account if you don't have one right now or you know, don't really want to go along that's completely fine. This Workshop will be recorded and then saved. And shared after JS Nation the actual conference. So I'm just in the coming weeks months a actual recording of this will be good life. So. You can always do it at a later time. Then the extensions that you could use the feascode extension. So some extensions that we are going to use definitely is azure accounts Azure functions as a resources and Azure static web apps well. The latter not necessarily actually. We're going to do that fight of World. But at least Azure functions and Azure account and those will definitely be used. Yeah. Don't go installing them. All right now because they're still going to be some time after that. As you can also see like as your resource and as your study web apps are still in preview still new. So unfortunately, that's not really a problem for us. But still just wanted to note to you that you know, not everything is working properly yet. There can be a nice phrases. So the other extensions because of course we're going to be coding and nox so there's few. You could use polar for a few three support. I would definitely recommend that if you're doing it in typescript. And I use feature for now still that is still a few too. Is built on co2 but that can sometimes give you unnecessary warnings. I am mainly using feeder seal because I'm not typing or not typing. No almost not typing not coding inside script. I'm still using JavaScript. So then Fuller can give you a lot of other errors that have nothing to do with my actual code, but with typescript. But just so you know, the thing that I have for today. Is synthwave in four? It's a new theme. I usually don't really code that much on this laptop. So I really had to you know. Make it my own. And also I've been really watching the new season of stranger things for the Pasty a few days. So, you know that always gets a bit of an 80s bike going I think. As a lens are useless. And for cool items I use Facebook items. Okay. Then package install some versions. I'm currently still note 14 as you might might see there wasn't really on purpose. It was just that I Forgot to update. And then I was too afraid to update. Because I was afraid that it might break stuff. Even though I think going up to note 16 or even higher should be fine. But this is just currently the fact that I'm using so npm 16 14 PM that I'm gonna be talking to about after this. It's also like a note package manager, but we're only going to be using it for one command. That's actually about it. Later. Let me see. Let me see. Yeah, so as w a is azure static web apps. That is the CLI that you see right here. And that is also the CLI that has been. Five days old now seven days old someone like that, which is also why it's on a 1.0.1. And then bmvm. Like I said, we're only going to be using that for one command. But because next three is still not in or still not it's it's not in a stable release yet. So it's not going to be published on npm yet. So next itself in his documentation is either using I think npx. and XP somebody like that or the mpm and I chose one of those for no other reason than I just pick one it sounds funny. And so that's why you know. Okay. Then I have created a materials raffle. And I'm gonna share that one. as a link because I find that you know, sometimes it's been hard, of course to maybe go along or you just want to look at it yourself at a later point or you know, for any reason I have a data set in there. Well, I call it data set but it's like a Jason with a few. Keys and values so don't think it's that big but there are just some materials in there like backgrounds as well to use during this workshops. and let me find the link. And I'll put it in the Discord chat. And they can clone it if you actually want to go too long. Just check it out if you want to that's also fine. So let's just dive in because now I've been talking for way too long. But I'm gonna be keep on talking but still let's also do something and we're gonna set up a Gita get a repo because today we're gonna connect our I should study about to get up you could also do Azure and maybe later on you can also do like get lab or bitbuckas, but that's not life. Yes. so First let's try to do this. This is very inconvenience. how do I Okay. Well this just lives here now. That's fine. Let's create a new vertical story. I think you most of you have already done this but let's just, you know, go to long that's gold is bug look video. It's available. What? a surprise insects broke a text and As I understand correctly. It has to be public. I traded with private Azure got bitmap and me and didn't want to. Build my application. I think I have to do some other configuration. So for now just keep it public. We don't really have to add anything and we're just going to create a report story. nice This is really nice. Okay, cool. And we did that that was step 1.1. We're already well not necessarily halfway, but we are getting there. Okay. So then the next step for us would be npm install. Globally is the pmpm. So what we're going to do. Oh. That's open something which get fresh. And I know that I've already installed it. But I just wanted to show you. You literally have to type this in. Cool. So now I've installed it globally. So I can I should be able to use PM now. And that's exactly what we're going to do because we're gonna knock the knit our application. So let's do that. And that's go into the next part. It's gonna be a bit of a theoretical part and then a coding part. But luxury officially it will be publicly released. I would say this month. It was in a planning of for June 2022. but currently it's still in a release candidate State as in as owner website. So let's just assume that not everything is working at and things are a bit, you know wonky. But nevertheless already a very nice experience. I can tell you. so RC in their means police candidates Next two is currently or is going to be in maintenance mode. So if you're a nox fan. then one way or the other you should eventually go to Knox Street and adults means that next three itself is growing up, of course, so this month On June 2022 the stable version of next three is expected. And like I said that also means that documentation in some cases is still a work in progress. I found it at the hard way when I had to figure out you know, how to make this Workshop work. with luxury and azure it was a Well, like I said, no Adventure, I think. So it's going to be quite a short description of what Ducks this because I only have three hours but in their own words not school is to make web developments intuitive and performance with a great developer experience in mind. Well, that sounds very promising. Those are doesn't say anything. But what does say anything about it? version 3 so our current state our current version is a complete rewrite of version 2. It's even well they say that it is like 20% less big so slightly faster. It's built upon few three. It's used in decomposition. API feeds typescript. Nitro most of them just like few does and nitrous of course a nox product. but that means that if you're like a developer like me who's usually you know. a few focused very few focus and Knox would be like this this very good choice for you to you know, learn new Frameworks, but also see what it can do is do a lot and it feels intuitive then. At least there will be my expectation. But you know, you see these words here composition API feeds and you know typescripts. Well, that's an extra Adventure. I would say But what does this mean? It basically means that few that makes itself is a very rounded framework now, and it's built with the following. So it's using a JS framework for reactivity and what components few. It's using a bundler to bundle its code and then you can either pick WebEx 5 or feeds. Either should be fine. And just keep in mind that feet is also a product of few. And it has, you know, different properties or different things that it does. The other thing is a transpire for jazz syntax, and that's called es built. Which has been around for slightly longer? A server for Surfside rendering build on H3 and that means that they're Nitro Surfer engine is also built on H Street. If you're interested in that just you know, go to the Nitro documentation or the age shade organization that might give you a bit of more sense and they're going to be diving into it today because I'm gonna open up a box of warms there and I'm not going to be able to get out. And lastly also a routing Library called few router a few writer 4 actually, which is also quite new. So it's very up to date and it has all these cool new features, but also like a huge documentation. so From their own dogs what they say is, you know moving from future to few three including defaulting to the composition API script setup. What does it mean? Few had options API still has options API and now composition API. And composition API is Now the default for next. Not necessarily the default for few three, but it is for Knox. So that might take a bit of time to get to know because it's slightly different. The word and moving from webpack for in Bible to feed for a Pick 5 and Es built. So like I said the back four and Bible were for a very long time front-end standard. And though there are other players in the fields. Well, of course, there's like the corona personal perfect for 45 but feeds and is built they also came across camera on the corner and just thought well give me some of that. Moving from around time next dependency to a minimal Standalone server about with Nitro pack. Nitro Actually, it says Nitro pack, but that's just what I mean Nitro and I'm gonna be talking about that after dislike. But like the word rewrite here is very well placed even though to come a concept should largely still be the same the way of working will be a bit different as you may notice as the workshop progresses. So rendering options are still mainly the same server clients pre-render static options. They just work differently under the hood and routes are still automatically generated based on pages. That was also with Knox, too. You can use components and if you functionality that you expect. But you may ask what about static site generation, you know, one of the key things that make Knox so useful for so many people. You can turn off Surfside rendering you can use as a junior application but static hosting on see. Is still in a very experimental face and under developments they call it. I think of full static. I'm not entirely sure on the words. So please don't put me on that. but As I understood the functionality is a work in progress not true So one big difference is that enough application now spins up its own Nitro server if you want if you let it. And Knox that if you work packages like you see a lie a core engine bumpers, you know, most of the stuff that I just talked about. They those are core packages for Knox. An interesting one is the server engine next writer. Last year together with a colleague. I did a talk on edge Computing and nox in which we wanted to use an actual Knox Nitro server once set it up, but we filled because it was so new. It was I think still in alpha or maybe just in that where someone along those lights like we couldn't really grasp it. There was no real organization. It was like a mystery. And it's nice to see they're going there later. Here. I am. Talking about it again. Then sort of Brother's work. So next Nitro itself is a runtime framework to build and deploy any JavaScript server anywhere. It defaults to a no Jazz server. So if you know no jazz. That's a big plus for you. But in its documentation you can find a lot of information on how to deploy your application to any provider. And I did not use these tutorials because I just found out about a few days ago, but definitely worth to take a look and see how far you can get. So Nitro is platform independent, but it comes out of box with luxury. Another cool thing that I find out by accident, but I now understand is that your next app automatically create your API endpoints. So if the code itself is in folder called server slash API you can set up a surfer and it's middleware and you would do that with the natural server engine. So that's pretty cool and a bit confusing. but again Like I said, if you pick a provider and Nitro has a Nifty how to on that just you know, go on an adventure with night for there. It's a theme. That Adventure part but like you see here the houses don't talk about her also on Azure and AWS and that's why clouds are. Any sort of before deployment provider that you can think of? And it should be compatible. You might know of course. what rendering is but for the people that don't let's just really quickly refresh some of the concepts because I'm gonna throw these words out there. And I just hope that you will catch it here and there and there's also nice to sort of be on the same page. So the browser sensory request to the server and it receives a responsible. That's how websites work if you're here in the stock. That probably means that you know that but still let's humor me for a while. Surfside so the server is taking entire responsibility of serving your application properly. Files will be prepared and compiled on the server. Websites get rendered only server and the surface that sense of fully rendered HTML application to the clients. It's more as your friendly and Foster load times among other. pros and cons and client sites is the application will be rendered in the browser of the clients. Not on the surfer. So the surface sends this empty HTML file with all these links of you know, all these. materials that the website needs and a browse it and doubt downloads and compiles these links. The browser will render your app. And this is a very popular option since the single page applications. It's cheaper than server side, but for SEO and for a lot of websites as you of course are very very important part. Then we have pre-rendering which as I understand it correctly. I've never really use it consciously. It does a bit of fun. So when the request comes from a unit the application will use client side rendering because then just really matter how sir or as if as SEO is crap. But when I request comes from search engines or crawlers or anything like that, I call them robots now. It's not really a robot. I know I know what's maybe and SEO should be perfect. Then the surfer will choose to serve a site for energy application. Serve with an application that eventually microscore higher with its SEO. So Knox can do all this. Yeah. I also put static site generation on there. Like I said next can do all this it also introduced hybrid rendering in Knox Street. basically It means that not every page might benefit from the same random method as was the case in for instance. Not too. So with hybrid rendering different render methods can be used Cypress side. So the server sort of chooses. What is going to do based on probably like config or a few requirements as well? Not entirely sure how it works, but that sounds pretty cool. Okay, so that was the theoretical part. Well regarding next. Um, I'm gonna take a simple water because I'm already parched and I had tea and it's cold now, but it's okay. So now we're gonna do so well in at least anything. um, which means that we are going to create a new application. And we're going to be doing that fire. Think this is it. And it's and then the name of your application. So in our case it's going to be burglary and you might see here. We are using pm here. I'm not entirely sure where the extent work, but noxi is the nox CLI, and I think that's also completely Rewritten and completely new. And we're editing a new application and that's called popular media. Let's hope it works. Yes. cool So now we have this cool application here. Let me make it a bit less confusing for your sake and my sake. Yeah, okay. We just use the only vmpm command that we would use so feel free to uninstall it or at least write down to earn it. So if you're never going to use it again. We're gonna install all of our packages. and after that we're gonna run our Death Surfer essentially, so you might notice something. I have two things written down that you might notice but let's start with the ladder. Which is here is a configuration for typescript. And some typescript files as well. I didn't want to fake my typescript knowledge just before this Workshop. So. I chose to alongside this huge JavaScript because it's safe. I know it and you know, it's actually is for another time. But if you do know that good feel free to you know, make it a bit more challenging for yourself and go along since I've Scripts. But just so you know that the actual init application that we just you know needed. is written in that from just as few originally is Okay, so love warnings that we're all gonna ignore. and let's start off our Oh. Yeah, okay for this actually pretty cool. Oh starting on my different screen. Takes a bit of time. Sometimes a bit more. There it is. This is what you get when you use that. How do I call it? the command that I just told you about the PM PM commands, you know two and it's a new application. This is them what you get and if you could maybe see from the code as well. It's very Yeah, how do you say it's very tiny? It's not that big. So the other thing which might notice here is that we're using feet here as our bundler. And Nitro server. So it is starting. Of course. My localhost is running on nature now. That's pretty cool. Yeah, one other thing there's my notice is that we didn't get any option at all to choose from. Of course with next two or few or whatever again pick a lot of different things and sort of customize it with this set of up until now that's not at all possible. Who knows my come later might not I don't know, but for now, I just wanted to give you some specifics but also just keep in mind that. I even get surprised by What's Happening Here. So we are using fetus or bonder. Like I also said theater and if you were back by both come out of the books, but I think you still have to sort of implement Look Back by that's fine. So bunkers itself are of course a happy work and step onto our applications from Mass to understandable application to deploy. 12 build on top of ESP builds sheet made sure that browser loads just a few years modules. To serve your application instead of one large file for all information. That's actually something that es built already did feed is just improved them upon that and creating its own product from there. So it's smaller files less than consuming. Even though feed is a product a few. There's just the side step into feet because it's actually pretty cool. And you can just use it in any application. Any framework is to Standalone project or product. So even though it's currently for nuts that leads to experimental go check out their documentation just start up. An application use feeds and see what it will bring you. It's pretty cool. Okay. Then where is my there is okay. So we did our It is an extrude projects look at it. We're already at step 1.2 actually, so we're flying here. We're gonna add next up to our repo. And just for the people that don't essentially know how to do it. I wrote it down here and there are a lot of steps and I also sometimes just get confused. But if you do have get a reaper now, let me just make it a bit smaller. This is really too small. Here we go. This is fine that's close of our Dev server for now because we don't need it. Okay, we're gonna and it's a new GitHub. empty get up Ripple story We're gonna add everything that we have done. So everything that we just initialized here. We're gonna add it to Stage. I'm gonna commit it. With the famous first commit message initial commits. We're gonna set our main brunch to Main. And it's a change. You might have heard it but monsters not really the appropriate name for it anymore. So I'm just getting used to calling it me now. That's not always going to be going. Well, we're gonna get remote at our original. Well, not original Laura. I wrote down origin and I said original and GitHub repository, so I have to find its link. Let me check out. Okay? I could have guessed this but again, I don't want to type in this long. We remote added it so that now this you know empty gets purple story notes. Oh nice. So this is my repository my remote full story and then we're gonna push everything in there. Okay. Okay, no errors. I always like that especially, you know, people are watching. And then in our popular video right now. we have all our code so Nice done nicely done. That's that's the first step. Let's go to the second one. Okay, we're gonna add some pages and next link to our application itself. I have a lot of screens open. So sometimes it's just bit, you know, okay, I don't know where to go. But should be fine. Okay, so what we're going to be doing right now. Is we are going to create? a folder full pages and in there we're gonna create a file called generate Dot View. and index but a few Google then I have of course prepared a bit of gold so I don't have to actually type everything out. Templates, I have a different idea and the idea will be candy later on. Then we have like a title. title and another feedback with some random welcome text because otherwise my page was very very empty. So just this let's call it the filler. And this is probably not really new information. The like I said, if you know if you you know that this is way too template data within few. Which is really pretty cool. Like I said, it's very intuitive. But now the fun thing is going to happen. or the frustrating thing if you're me and you have to prepare a workshop and you actually didn't really work with the composition API yet, but let's just forget about it. Let me paste in. This here. put on my Word wrap that is okay. That's weird. This is this looks weird, right? Yeah, okay. what we have here is a script set of Stack essentially. It's a script tag. This is where all your functionality code is going to be in there either black refrigerator job script. But this way of writing like I said in the beginning we're using composition API, you might know the composition API because you are using this this and then you're gonna do a whole bunch of stuff there. well what you see here is basically the same it's compiled. I'm synthetic sugar. We're using the composition API. So it's it's actually recommended to start using this if you have single part components like we are. but two of the reasons that you would probably use it is if you're using typescript because apparently then it is even better and it has a lot of Adventures performance, right? No, not a lot so so it's basically less for both and can be easily made asynchronous. But I'll show you that later. And so the script set up like we see here is it's more. Efficients and minification friendly, you know because the template is compiled as an inline functional. So this part composes the inline functional in the same scope of the script setup. That is what I have to say about that. And we're gonna be talking a bit more about the conversation API. I'm gonna be mentioning it a lot. But to be honest. This is only my third project that I did with the composition API. And you know as these Workshops can also be sort of like a place to share in a video. Well, I do have to say that I find the competition API very confusing sometimes too. Maybe I haven't got to documentation. Well now for there could be all kinds of reasons, but my third You know. Opinion that I have about it. I like the meat structured options API as opposed to the composition API. And that also means that it's slightly more difficult for me in a conversation using composition API. and I have to say I chose options over composition any day. Just from a developer that has to code. Perspective not the performance perspective or whatnot. So that's just the side track of my opinion about the composition API, but let's go back to what is happening here actually. So I explain this script part. That's going to be your functionality. But what happens here? We instantiate like a new constant and it's called title. And as you can see here, it's just bound to your templates. But we are creating we're using the ref method here. With the text that it should show. comparable to the data property but in composition API syntax, that's that's my conclusion. I think you also have reactive instead of breath. But we'll see that later. But basically what we do here is we create this reactive and mutable ref object. and which has a single property dot value so you could get if you would do something like also law title dot value then you would get. This what's in here. but we're not going to do that and It is less limitations than the reactive method that again. I'm going to be showing you later and but it basically replaces the data property and before create and created light cycles of the option API. So that's what I mean with confusing. If if no, I notice now and I know that I can use ref. Also to make use of the functionality that's something like a creative life cycle which you know offer us. It takes some time to get used to at least in my Park. Okay, but we created the index. Let's create the gender generates. And for that I'm just going to be copying the code. Because this is a very very tiny one. It's gonna be commenting at this one because we're gonna need it. Later. Oh, yeah, that's right. I have to do something so I'm just gonna say hi. That sloppy I know. Okay, so I do again. then we're gonna do basically the same thing. Is ref, we're gonna create a ref here as well with welcome on the generous. generate page Okay, cool. Now we have to Pages as we don't have anything that will link it. so what you see here next welcome is the start of let me know. Run my server as well and that was just a starting point of any next in its application right now, but we're gonna remove that of course because we don't really need that. What we do need is from going from our app. Dot View which is just as You know in in Knox, it was like that in view. It's like that the app of you in here as well is the main entry point to our application. So whatever is going to be in here is probably going to be on all the other Pages as well. So in our case, we're going to be adding a bit of navigation here. and the next page to our main components Okay, so I'm gonna first give this an idea because I keep on forgetting that and later on. I really want my styling here, but we'll start with creating a Knox link to I think slash call it home. And closed off. We're going to create a likewise. next thing to slash generate generates a book cool Then I have to wrap it around a this because even though few itself gives you this. You can have more than one boots elements in nuts. So. I don't know. It's a bit hesitant to finally accept that so right now I'm just trying to adhere to its. You know things started once. So what do we do here? I created two next links which basically underwater are few router. routerlings and on the water there like even deeper. It's just an anchor deck. So this way next can handle any kind of links. So it could be internal external whatever you want within your application. It tells not that you know, this is part of routing, please. See it as such and it determines whether the link is internal or external so we don't have to do that. You can do that itself. And it renders with available optimizations based on that choice. So that's actually pretty cool and as you can see right here, we have created this Pages directory and in there we have like these two pages, but we can now also use these titles. as endpoints basically for a routing so that whenever we go to this page then knock those. Oh nice. I know that let's go to this page. If we don't include Pages as a directory here. Next will not include few router in your app. It will just ignore it. So that's also kind of nice. You don't really have to do it yourself. Not just the stuff for you. It's a bit of classical clothing almost but at least it seems like it but don't worry. It's gonna get a bit more confusing later on. Of course just like with a browser page or out of you. I think it's called. Yeah, we have to have like conducts page to actually display whatever we're linking to. So now we build all these things. Where is it? Here it is. Look at how pretty it is. Now not really but we'll get there. So we have a home. We have a generate book and this, you know going to the correct employees and has a different texture. I broke it. That's also tonight. Oh. Okay, I broke it. And it's there again. This happens a lot. If you're gonna leave this on for too long, it's going to get a lot of errors. It just happened. But for now, let's continue with what does work. Okay, so we created a page. Two pages actually and we created the navigation that we have to do anything else. I don't think so. No. So if you want to go to Long maybe I should have said that then beginning but like I said the materials book loopedia repo is there with the exact code already in there so you can use it for later. You can use it, you know if you want to listen now, but code later or whatever. It's there. You can just Cruise. It's at your own leisure. And so we did all these things. So that's really cool. I yeah, okay. I have some styling of course because we do want to make it a bit more pretty because like this was nothing and so in the same materials burglaria But I have rights. here I have some styling. And it's called Global styling and navigation styling. So it's just in here which you can also actually copy paste it from here. And so in there what we see is we are. We know what that's just do it in my own. Editor because I do have to add it still. Okay, so what we're going to create a SS folder? In there a style folder because we're also gonna have images there and in there we're gonna use a main event as us. Okay, cool gonna copy paste everything here. Um, what we are doing here is we're importing a cool funds which is a very chaotic fund. We are in scss. So we have a phone stack a primary career cooler and secondary color another designer. So I just, you know, use sort of like a black and white stuff and well we'll get to this design part later. I have some basic HTML starting a b a and body styling and of course good enough. I just wanted to be sort of Center. Okay, cool. This is going to create a very Okay, you'll take thing. Now we're going to just refresh. And hopefully it breaks. On the at least there's no styling, right? No, that's because we need to do two more things for first of all, we have to install sauce and oh sauce, no there at 30. So maybe you might also notice that but I'm doing Source loaded 13. I've never used those 13. Actually. I also always stuck at 10:00 because most the applications that we build were so stuck on WebEx for and that was the highest that we're back would want to go so started but now with next three I just tried it it works. And so that's cool. We download or we installed ourselves and our sauce loader. So at least our application should know what it is. But we also of course also have to actually added to our application so we're gonna say style and the language is source. We're gonna import it. in import it's is it there have to check really quickly? Yeah, that was it. Like you see here. That's how we all have to do it. So we're just going to copy paste this because why not? um Yeah. So this video so I import a style. sheet this is not rocket science. This is very like a lot of yeah, it's sort of the same for most other application. I would say. but also see that these are all the arrows because of course my deaf Circles of so that's that's how it goes. and and like I said, it's sometimes just takes a while for next to you know, start up a surfer or build everything make it work. That's fine. We have time. Oh. Oh, yeah, okay. I didn't close it off. Oh. Okay. Yay, so here we are. That was a very happy day, but I was very happy that after all that read I saw something. So now we have like a generate book and a homepage. And again, my text is gone. That's fine. So welcome to the index page. Oh nice you have this very nice. Hello. Nice future. Join me text here. And then we go to a generate book page. Where nothing is so happening, but We are getting there. so what we did up until now was we initiated a next but I read with and I say what but I meant up and we added some styling to it. But of course, we now want to go sort of even further we want to deploy it. All right basically works with those what it needs to do. and so let's continue with this burn is the third or not the second part after this functions, so that So we're getting there now, really? So what is azure static weapons? The description understood from the Microsoft website is it's an Azure surface that automatically builds and deploys full step web apps to Azure from a Google story. So basically we make changes there. We push something to either Azure or get up or For now those two definitely. Azure makes Magic and static content on the one hand is being deployed. Or it being generated in output folder and on the other hand. We have our API functions created with Azure functions or executed with Azure functions. However, you want to say it and I just said web apps makes like this, you know, they put them together. So that's really nice. Every time we push code or a mutual class build is automatically triggered and your app and API is deployed to Azure. So keep benefit of using Azure static web apps is that static assets like images are now served from points geographically distributed around the world. So serving a files much faster and through the traditional web server and that's basically the same with the most services that Azure has right. It's one of their selling points that they have all these Think it's called Edge locations. Not entirely sure and Whatever is closest by that's gonna serve up your contents making it just quicker. Okay, but then we have like a cool few key features, right? So it does webflow superstatic content. It's already said it has an integrated API sport by Azure functions. I'm gonna be going to that later. It has hit up an Azure Devil's integration, but currently in public preview are also bit buckets and get left if you ever preference for those. It is globally distributed static content. Like I said, and it's generates stating a stage inversions and that's very cool. So we're going to be seeing that in a few slides, I think. best feature free at least it has to dares. So if you pick the free one, it's free for you. Maybe a side note Azure functions. It's not entirely free. Um, it's free up until certain threshold. But again, if you just want to deploy something then you can use Azure static weapons for free. Which is always my favorite. so let's go with step 3.1. and let's start with one of the problems that I have was that all the documentation that I could find on how to do it or information was focused on next to Which means that I am? You remember that disclaimer from the beginning? that means that I'm not sure whether I'm actually doing it entirely correctly. But it works so we're gonna go at it. But just so you know that there might be a better way or different way to do this in the end. But in our application we have to do two things. So we have to change the build command to execute Knox generate because we want to generate static files for Azure static web apps to use So let's do that. We changed this to generate. Because this is the script that is going to be executed. Okay, nice step one. We did then. The second one is in the next conference. We're gonna add SSR balls. Let me just show you what happens if you don't do that, so. If you would just were to run npm run generate. It's going to generate all these files for you. SSR Falls Of course means that we want to turn off server-side rendering mean client side in our case. But there's this error that you thankfully see here. It's like this package import specifier. This one that's gonna find in the specific package. It's an error that makes that our output is not entirely correct that it doesn't exactly generate. properly So that we cannot continue if you were to build this though. If you were to send this without search type running turned off to Azure setup web apps, it would go through it would make sure that the Builder screen and if we'd be deployed but I don't like this error. The only thing that I can find about it was to turn off Surfside rendering so I did hopefully down the line there will be more documentation about that. So we're just going to do that. It's a um Yeah. We're gonna stop this. Yes, and then we're gonna run our generate and hopefully it will at least give us no errors. And that's also like this is a version and are she like I said release candidates, so When this is gone, we can finally go nuts. so exciting Yeah, okay, so we have an output folder here. Oh so many things are happening. So we have generated a public output folder and this is where our static contents going to live. But we also did some pre-rendering. Again, there was no conflict that I could use from the beginning. So this is sort of like a surprise here and there. And but with the pre-rendering it's rendering my routes and my 404. And that at least means that those will be available. And let's go. Like I said never used it now. It's there. This is so you can also find this here like we have now Knox folder with also my pages. Generate an index or my entire Pages. We have to sue a hundred page and for page if everything does not work out anymore. But this school, okay, so just keep this folder in mind. So what are we going to do now? We're gonna set up our app. in Azure static web apps and before I can do the I have to quickly check for my credentials. I think we should be fine. Cool. Okay, so this is just look at what's happening? It's going to be over very quickly. I'm gonna be looking for static web apps. And we're going to create one. And as your subscription, of course, I have a subscription. So, yeah, don't worry. That's just the resource Group and your subscription of azure. Better ask if you don't have a research group, you can just create a new one that fits your new purpose and okay, so we're gonna create. A static web app that's called chocolate medium. It's gonna be free because we don't want to pay for it where it should be. We are obvious. I usually pick the location that's closest to me. So I mean West Europe. And here you have the problem and details, like I said, you can click on azure. and other And I've never clicked that one because now I'm going to be stuck with get up. I am already logged in here. I can change my account or whatever. If you're not then there should be a button that you can click and in the browser you can just log in. So it's a very quick action that you can take care. If you are correctly logged in in the organization. That is your GitHub organization. So this is my GitHub username. I can select my repository Google PDF, of course and my branch, which is me or mastering your case. Who knows? then we have built details and this is sort of What your workflow is going to be based on so? There are a lot of Frameworks that I can pick just like next.js but I'm choosing custom here and mainly because all the documentation set I should also I don't trust I don't know whether this is two or three. So it could be in a dative workflow another entirely sure. So I'm just gonna you know. Fill in some person Fields. The application is the route. The API location is API. And the output location is dot output. Oh slash puppet just as we saw before. Okay gonna create it. I'm creating. It is, you know doing its deployment. I just have to wait for a few moments. And it's already successful. So that was really great. So we go to research now and if you are. Here in this step. Congratulations. You just deployed an app via azure. Let me see differently. You just deployed and Knock three application fire agent so pretty cool pretty quick. What are half hours so nice? Okay, you might want to see it even though there's nothing here. No, your Azure static web app is live and waiting for your content. That's true because You know what happens after that? yes, what happens after we set up our we're gonna check out our app and I just clicked on this link right this. This is very annoying but and nothing was happening there. That's because our get up here is also links. So what you can do is you go to your GitHub repo. click on actions and this is your pipeline that's running right now. with Minimal configuration you didn't really have to know about workflows or you know, it's a normal file. So I don't really know a lot about Jamal still. I have a boyfriend. It's running. It's probably going to create a build and hopefully succeed. But that just within a few, you know clicks of button. We managed to actually set this up. so that now whenever every time I am going to push to this repo a build is going to be you know initiated. It's gonna be doing it. these are all npm warning insole I was Seeing all the red and I don't know. It's beautiful. I love Pipelines. So all these things happen, we created a yellow file we can adjust that your mobile. If you really want to for instance the first few times that I tried this I got the output folder wrong a lot. So as you keep on adjusting it And it's very easy to do. and the URL that you just saw that I cannot access anymore. Should now not be for not found give it a moment. So for for not found that's very sad. Okay, let's give it a moment. I'll check back. I'll check back. Oh. I know we have to push our code. Oh, that was very exciting. And yeah, so we're gonna be pushing our code. Let me see. So we did all of this. We are here we created repo a next three app, and I just added web apps. So what we're going to do right now is we're gonna actually be pushing our code. I think that would make it better. Because right now there's only the initialized app in there. so this stuff not a very good message. Get push region name. Oh, yeah, so this also happens a lot actually because Azure is now changing your get a repo basically because it's adding workflows you have to pull. here and there I want to say every time you are doing a build but I'm not a daily shirt. But for the first time after you've done your first build you have to actually pull. So that as your nose, okay. Nice. This is the workflow that I really ordered that get up notes. Okay. This works flows fine. You want to keep it? so cool. There we go. We pushed our latest code. We are. Just going to be making it like this because it's so annoying. Yeah, okay. In here. Oh, you can also see now that the second build has been yeah, it's executing right now, which is we just push the code to me, of course. So a second bill is being triggered with all our new material. Hopefully will not see a 404 anymore, but just our actual app. But before this is we're not going to be actually waiting for this. So that's continue. We made all of this. So from here now, let's make it better. Right. We want to make our app prettier. I want to make it actually do something. Was a bit there. So again in our materials because yeah, you have this main goal as CSS again and all the other she says that's in there can be just Copy pasted into our application. So we're going to be doing that. We have here are many as CSS again. and We're gonna be just a bit more styling for. You know the generate vocal components that we're going to create after this and the index of you. Just to give it a bit more styling on all so the text over there stuff like that. Nothing fancy just that it makes a bit more sense. Our Surfers of course down, but let's just open them up because we're going to be adding more code. So we added some Jesus. So there's a little side note here. And because if it worked to me, you would have created the this one But my boyfriend he is a very creative person. He also does that for a job and so he created this for us doesn't matter what's on there just look at it. And so if it was a frame you would have created. This part and I'm so very proud of this because you know, I am really not a designer so that I managed to do this. It was especially mad because there's a blue background and like this yellow text. But again, you know really like it. Okay, so next part, I think our depth server is on. Yes, nice. Hey, okay, there we go. So we have you know, I've just centered this part and then when we click on generate a book, this is what we're going to be feeling now, so don't worry about this. That's just the way it's supposed to be. We added our styling. The next part here is we are going to create a new file. We're going to create a template. And just you know, we're going to fill it up with some data. And we're going to add that actual component to the correct page generates. So first off, let's create a folder called components. We're gonna call that generate book those few. and in the generate It's already there. I just come into the doubts. Let's keep this, you know gone. We have added our component here. And now it's time to actually fill it up with everything that we want to. So the first part that we're going to do. of course templates mmm I'm going to copy paste. This is a lot of diffs with ideas. Yeah. Okay, so our template here. Is going to be a container and in this container that's going to be quite some information for instance. There's going to be a background. As you can see right here. There's also source that we do not have yet. So we have to add background after this. We have a image a name description and a button to actually click on to generate a new book. okay, that's just you know the template but then our next part is the actual functionality, of course. I assume that would be so closing. Okay? So we're going to create a new state. And what you have right here and that is funny is that we're gonna be going and we're gonna be using reactive. So we have States is reacted. because mainly what I'm gonna add here. is a object with bug details So reactive here. It's a reactive method. It's basically the same as the rap method in the index of you that we use earlier, right but reactive returns a reactive copy of the object. So deep conversion is happening and all the nest properties are affected there. The advice from the few documentation is to use many reactive and not the original object. So always, you know sort of create a copy. But when to use wrap once it was reactive well. In general graph is useful for Primitives. And reactive is useful for objects and arrays because you really want to get in there. if you have like this tree nest down object, you want to get all the values there of course and That being said and here's where the confusion comes again. You can use objects and arrays with ref as well. So my advice here would be to just try out stuff see how it goes. And then I'm you might find some surprises here. Okay. So here we have some information. Of course. Where is it? I'm gonna copy paste the actual book details because it has a very long description. Exhale, it's a very pretty but this is just like an initializing state if you see it like that. That's also they call it reactive state. So one of the maybe common practice could be that this is also called the state and whatever it goes in here. So if I would also have like a title you would just do like title. This is kind of You know, you can fill this up with whatever. Reactive data property because that's basically what it is. You want to have and it would just be your state object with all the reactive. Variables in there and don't go through it with a computer at all because they do have a computer methods and it's slightly different. So this just our data property now? and as the South works Okay, what we want to do after that is of course if you can see we have an L Clicker. So we're going to create a function that actually does something. Whenever we click on the button. For now, we're just gonna console look whatever say hi or something. Just so we know. Okay. The button is clicked. My function is linked. I can then filled up with whatever. Okay, so we have a function. Generate bug same name you have a state. So this entire template will be filled in at the state. You might also know oh, but what about all be, you know backgrounds? as it's image just in there, we're gonna be yeah. cool So I hope I've six backgrounds. Yeah. in the Press it's in the materials repo. Again, you can find a folder the same structure. I think it says I'm not entirely no it's called backgrounds and there you have six pngs. There are six slightly different backgrounds either in yellow green red with a different background. Choose the one you like. so the fridge sort of so just don't forget to add these to your Application as well. Okay. So let's check how this looks. but I get a lot is that my terminal is not really updating or keeping track of the latest changes instead of them. So I found myself. You know starting or something might serve her a lot. but That might you know again change. Later on, this is just because I'm a very impatient person as well. Now we have to wait again. Yay, there it is. Okay. So if you click on home, we have our welcome page again, please click on generate book. It is. showing this I'm going to be saying it now. Like I said, I'm not a very good designer. I fixed this to stay in place. If you scroll around with position absolute and position relative don't. Copy that at all, because I don't know if it's good. But again it stays in place and that's what I wanted. So we have like the scrollable Pierce piece here with a you know description of the animal that we want to do if we now click on generating bug it's going to say clicks because our function does not do anything yet. But this is the only book that we currently have right now, right? That's the final state. So because I also wanted to show you something else. I'm going to be creating a new Branch right now, and I'm going to be pushing that brunch. To my remote me. try I'm gonna add everything. Oh. Okay gonna be pushing this in a feature brunch to my GitHub. Oh, no, I push my main. Yeah. Okay, cool. Where is it? Here? It is this my repo. I push this brunch. I'm gonna compare them poor requested even though I'm the only one so it's basically like that. Maybe you know Obama giving Obama Meadow. Well, that's what you're what I've been doing for the past two weeks. And I'm gonna open it just as any other progress. I'm sure you see a lot of them and automatically I didn't really have to do it but it's configured in the normal files. Well. Is you're going to have this build and you don't I don't think it really have to have a build but it is going to do it. and and what it does is setting up the staging preview for you. So you can check that out and see okay. The changes are made are they, you know good enough. Are they what I expected to be or am I going to you know completely break master or me after my merch? Which I think is sort of a pretty cool feature, especially if you're working on way larger applications than we are right now. This takes a bit of time because it builds in this application takes about two minutes. So let's just continue. We added the generate book components. We are creating this broadcast. Right? Just like I said, I'm just like I showed you. But what is a popular video with just one book? We want to update it so that whenever you click on generate book, it will generate a new book, which means we need data. And I thought a very nice one of my other problems. I thought a very nice insects API would be available. I could have find one. Well, no, I found one those. Could not really usable in you know, it was wasn't really matching my own requirements. And so I sort of had to create my own data set and like I said data set. It's just a Jason with three. Key value pairs per object. So it's quite small. And so it's time to put the function and Azure functions. We're gonna be going to our last part. I think yeah, it's done. You also see a green check there. So now we've staged. our website And as you can also see, I'm very happy to see that it actually works because before we got a 404 so now we have our home and it generate bug. And in there we are just even though this is a very ugly scroller. It works like we even probably have a fixed should be. There's one error for the physical. That's fine. Yeah, okay, so everything's still working. Everything's still connected I've styling. I I this is going very well up until now but we're gonna go to the next step. We're already at 5.1. I mean, we're almost there. So we're going to install some packages and extensions. First of all, we're gonna install the npm install Azure static web app CLI. We're going to do a closely. And we're going to install the Azure functions core tools number three. Both are like setting the CLI, of course is ACI. So in our terminal we can then use SWA. as our you know short Commands thing and Azure function score tools. We're going to need it when we're going to test our function. But I'll get to that there. So I've three. piece code extensions functions account and resources, so you know, I would just install all these three and install these two mpm packages and and this one let me Put it on the screen because I don't know if we were actually going along so just so you know, okay. There you go. Yeah, nice. And this is what it looks like. I'm gonna give you five four, three two. What? Okay, so if everything worked out and you did a wonderful install, which I'm sure you would you would have. To refresh your browser. I always forget that so it's not just refresh it. If you're not prompted for that. And you should have this Azure. Yeah, sort of option here. Let's go on option. and in there We have resources which is azure resources. The extension we have our workspace, which is basically just you know, all our fault or files here. And we have help a feedback just normal soon things. If you would have to if you would have to install Azure static web apps extension. You would also have like this this header here that says static web apps and they will see your weapons there really nice but in your resources and you might not see anything yet because we still need to sign in but there you can just really see all the resources that you have for Azure on a certain account. So then the next part is if you did install all this you didn't get any errors and you see the Azure part. Like this thing. Then we have to make sure okay. How are we going to sign in then? I am already signed in but I can show you where it is. like in few month ballots, you would have to either it's very underneath this thing. You can check for Azure sign in or as you're selects subscription. So you first do assign it then you are prompted to a browser. And it opens well, then you are actually signed in it's very quick. And then after that you could select the subscriptions and it's going to give you like this option here. Okay, which subscription who I want to use. and I guess like that like I selected here. And then it knows okay, everything that I'm gonna be creating right now is under this subscription and there is certain Resource Group. And without that you're probably you can't. Do a lot of stuff and also your subscription can have like restrictions, of course. and For instance. I'm not really allowed to. Do certain things with this subscription that I've chosen right now. And that's fine. That's that's how I like this. Okay. But assuming that you are here. If you're not again, you can take a bit of time after I can share my slides. I can you know, this entire Workshop will be of course recorded so you can just check back later if you want to or I have tutorials for you. So many patients. I'll have to do that. And so don't worry about it, but assuming you're signed in and you can select the resource and it workspace and you see this thing. The next thing we're going to do is gonna give you a bit of background on what Azure functions is because it's a bit of Terry. It's not that much Theory actually but Azure functions are you can write these pieces of gold in different languages make them do whatever you want. So it could be pulling could be triggered. It skills automatically according to your needs, but you will pay for turnout using so there's really nice. It's just pieces of gold that only run when you wanted to run. That's the easiest explanation I can give you. Of course, it's so much. More elaborate than that, but that's basically that's it. And you can write those pieces of code in another different languages. Like why change Java JavaScript or note what we are doing as he Sharp? Whatever and like I said, it could be trigger. So we're going to create like this HD trigger. That wonderfully do an HTTP request. It's gonna do something but in the application that we created last year the edge Computing application. It was we used polling so every Minutes or so it checked something and then it gave me back some data. But these are just two examples of what you can do with them. It's a surplus solution which is of course. One of azure's passwords, which means that no surface really needed which ultimately is that it's a perfect fit for so study weapons. Yeah, choose for web apis. Like I said, but those are database changes iot stream processing will be the last year and a message to whatever. It's a quick front. Also try a lot of stuff there. There's a bit of this automation 5 as well, so you can it has a lot of possibilities. So definitely check it out and like I said before as well. Azure functions might be paid so Turn on all those no building alarms and stuff if you do go nuts there. But what we're going to do is we're going to create an Azure function here. so in our workspace Going to be doing two things. Remember our workspace here. Let me just clear out everything. Okay this all workspace. And it helps I think if you're in a boot of your application. Because sometimes it says this is not these two something different. Okay, so we click on this at button and we're gonna create an HTTP function because we are very adamant. That's what we want. Okay, this is very unhelpful. Yes, okay. It's us you to select the language. And we're gonna give it a name get all books because that's what we want. You want to create this HTTP trigger that whenever we call it this endpoint. So get request and we're gonna be getting data. A lot of data and we're going to do something with the data. So for now we're just going to name it Geto box. I press enter and I was going to create my function. And there is my function. This is just one. tiny function You also can create like a function app, but then you're also going to be creating a database and a another Resource Group. I believe and it's going to create all these other services for you to the function actually functions. So for now there's a slight difference there. So for now we're just gonna be creating one tiny function. Okay. So but we did this that's pretty cool. What do we have to do right down? She changed everything here is that we got all these extra? Files and another folder called API didn't exist before but Azure looks for either Fuller called API or a folder called functions and then it knows okay here might be extra functions in there that I have to execute. So just you notice the name of convention. It's a bit. You know, it's pretty sure that's what we say in touch like it talks for itself. Yeah. My Dutch came looking around the corner there. Okay, so we have because this is basically like something that spins up itself. It has a package Jason in which you can also add dependencies or whatnot and you can start your Function as well because you do want to test it. Of course. So it is a host as well for some comfort information that you want to add here. A ignore folder and the really exciting part here. So the function Jason told Jason and the England index suggests are the ones that you like to probably adjust and add to In our case, it's going to give you here some bindings for in and out. and the authentication level is Anonymous by default But you can change it to others definitely. We created an HTTP trigger instruction in it's a request that's also its name that can use them. And it has methods in our case. We only gonna get create a guest goal so we don't need a post. We're going to add something else maybe route. Tickets. Yeah, and then books and just for clarity I like short as we and we also have of course in object here with a type HTTP Direction and name response. So this can just stay the way it is because we're going to create a very simple function. But then we have here are index of jazz. so you might what you might already see here. is that the common jazz is fine. It's very old. We're in 2022. There are a lot of other es versions already important exports do not properly work yet with Asia functions. You should have to maybe try to compile those. into the S5 require exports I try to look it up. I saw a lot of things that I had to do and I was like, well, you know, okay, this is one function. I can suck it up to use this module expert. But I can imagine if you have like a lot of functions then this is just feeling a bit. old school But just so you know that if you do try to use here import an export, it just feels immediately. And so this is just a ready-made function that you get from Azure and basically what it does if you're gonna add a query parameter called nameswits. It's going to give you a message in the browser. That's it. very easy It's gonna give you like either. Yes, there is a name or no. There's not a name just an empty message or Something like that. It's a very ready-made thing but that's already means that if you're gonna do like you're gonna use the end point that's going to be created for you. Something already happens your function is called and it's going to give you back something. I think that's very cool and I can show you that. You can just run a debug. You can click on start debugging. Then it's gonna start executing. The function itself. It's going to build it up. It's going to do some installing if needs to be it's going to check for you know, dependency that has to install and basically it's fun start. That was the mpm command. Of course we could have also used that. and you have agricult tools now which I think isn't safe to actually test a function. And this is very nice. It looks red. But that's just the skin of my visual studio code nothing's wrong. But except that dotnet is not found, but for our case that really isn't important. I have a function ghetto bugs and it's appropriately a get here. And I have this nice cool new local hosts served up. on a different part with API slash bugs here So that's pretty cool. Right? So if I were to Name is Melanie. Oh wrote my own name wrong. But if I were to do this, then another part of the response would be available. And you know, this is just where our API lives now. I I was flabbergasted by this how easy it. And so that's cool. And then also your terminology. Okay, we process a request if something bad happens. Which I'm going to show you later. It's gonna get all red and angry. So that's Nice, I would say but okay, we tested our function it works. So whatever happened here. At least it worked. So we did this we set up a function and this was our response that we got back and we tried out our endpoint. Now we're going to create our own function. Not necessarily we're going to build upon what we just did. So there are multiple things that we need to happen right now. First of all, we're going to need data to actually test. right, so in the materials folder you will also see a Json file that's quite large. It has I believe I don't know 21 bugs bug objects in there with some information. So you can just copy and paste that. It's gonna show you. In the API folder. I'm going to create a new folder called share. I saw this in one of the documentation pieces. I don't know if it's common to do it like this, but I just thought you know, why not? and I'm gonna create a Json called box data to Jason. And I'm going to copy and paste. all my beautiful Data, this is in my mind. This is what I've been calling a data set, but of course, I don't want to. Take away the Grandeur of how a data set can actually be so please just forget that I set it in there. You'll find a basically an array. Well actually know you first find the key bug data and there and an array with all these objects with a name image description. You might notice. Oh that was also the same on my template right in your component. That was the same. So basically what we want to do now and what we're going to do. Is we're gonna do a call get this data. then randomly pick an index of that data and serve it up to my templates. That's what we're going to do and they will step one. So we added our data. and yeah, we did this. I already created a function for you. So what I'm gonna do is I'm just gonna copy paste it and then we're gonna go over it. but basically what we want here it is. We can throw this away. Because we don't exactly need this function. And just gonna copy and paste it. So we're gonna do is we're gonna import our books data to Jason here. And normally what you would do at least what I would expect someone to do in these cases if you have like an API, that's gonna get a lot of data then sure enough. You should have a database friendly that's going to be handling all the data just otherwise, how would you You know keep track of that or write to it or delete stuff, you know, so normally what you would do is actually create a connection. With your database itself. So you'd have like this. I think it's a key. Or as a connection string. Yeah that was it to add your connection string of the database so that every call that is going to be done to this endpoint that we just created this API slash box for instance. The data is coming from your database itself. but I don't have a database. I have barely have a nice data set. so I just left that that part. And I think seeing the time that's actually very very well decision, but normally would do it like this. We are just going to get our local. And it was data from our application. And that's fine because it's basically the same. But then slightly different. Yeah. So in our case, we're gonna require because we're living in 19. 99 we're gonna require the shared / box data so our Jason here. We're going to create an Asic function that's going to expect a complex and a wreck. I'm just gonna I left this in here because then you at least know in your terminal that it's worked where you will know but still it's nice to see we're gonna do a try and catch which is just way too much for what I'm doing here. But normally if you do a call or you do want to get data from your database. you would do something like a try and catch of course because so many errors can come from that. The only error that I could have like a 404 maybe I don't know. But I leave this good look in here with a purpose because I want you to show how the data actually looks. If it works out. like if I have I'm gonna send back a status 200. with the actual Json of Rights and data topic data That's it. So this is just going to contain like this over the array of objects that I just said. If not, then I get back status 500 and I send back an error. Don't this is not. A production ready code at all. So I don't think you should ever do that. But for now it serves our verbs. Okay, so we are doing a lot of steps here. Of course. What about cross region research sharing? well You might have to worry about that. When you publish to a study weapons because I said a weapons takes care of that free and configure app. So it knows how to communicate but locally. You could run into problems. I didn't run into problems. But I did add this just so you know that you could run into course problems if you test everything locally. So let's just add it. I think in my yeah. Okay, and I'm pointed also to your application so that everyone else okay this application safe. We like this application. So of course what we now did We created an Azure function. Let me show you how to works. Close all this because we don't really need to see it anymore. But let's test our function. Let's just run and debug it. Let's see, whatever comes up in our terminal and see if they actually does but it prompts us to do. and remember it as it's gonna spin an extra server on a local it's gonna create a localhost and and with our endpoint we would be able we should be able hopefully to see our data that we want to see if everything works properly. Okay. So then I'm again going to Local 70 tell me one API box and there is my very very beautiful data sets that you see right there. So this is really nice. It worked our function. Should work but now the only thing that's lepers do. Is connect, you know, we have all these pieces now. And now we actually want to connect it, right? So what we're going to do is we're gonna create a component school where we're gonna do it go in our components. It's a component generate bug so I'm gonna copy this here. I'm going to sort of type it out from my head. Yeah, okay, so we're going to go to generate broker. And I should remember this as you know, this reactive States underneath we're gonna initialize new component or constant and we're going to use two structuring because as you might know might not know that's not explained that yet. So you shouldn't probably wouldn't know. um We'd have to do like a vegetable here. And next use is fetch a lot of things use fetch actually, but Knox says at least two methods to do goals asynchronous schools. It uses use fetch which is an API and point as a parameter and it uses and it uses Use async dates I think which is basically just a fetch also underwater also with an API, but also with a key it's a bit more elaborate. For our case, we can just use Fetch and that means that use fetch is going to do a goal or gonna handle, whatever. We tell it to handle then it's going to give back a response. In for case it's an object response with like four keys, and that's either data are refresh and bending I believe. But I think those were doors. So the ones that we want for what you normally also would want is for instance the error one. Right. You want to know whether an error has been to. so we are just gonna be structure data for now. And then we're gonna wait. And I'm gonna use such. And as a fair major here, we're going to do slash API slash books. cool and this is also nice. So did you see here is a way if you use a weight on the top level. So this in a script setup. It's automatically becomes an asynchronous method. This entire script thing so it's really good. You don't have to know say that something should be async I did that it didn't work and that's just a fun fact in between. so Okay, we do this but now we can use data if you'd want to you could just add it here in your template this data. property and you can just use this variable now because then it's going to be filled with whatever this respect. So you don't have to you know set a new thing set it to a different variable and then use new template or initiated in a different way. You don't have to do that now, so that's actually pretty cool. Okay, we have our state. that box details because that's what we're Going to adjust of course, we're gonna set new values to this state. is and now I have to check because there's a lot of Matt's floor mat random stuff there. Yeah, okay, so we have data dot value. Because that's how we actually get the value because it's a ref. and the water and we're gonna bath floor. mats random methods times data of value of length I live this up. This is these are all these tiny JavaScript things. I Know what to do, but sometimes just get confused on syntax. But yeah, basically what we're doing here eventually, we're gonna just pick a random index number here. This is gonna give you like either An index number between 0 and I think 20. That's what we want. So that whenever. We run this function. the state of public teachers will be updated with a new random bug here That's pretty cool. I would say oh. as close of the Azure function and from my server again I already had a server running. Apparently. Yeah here this okay. have to check it. Okay, so we're still in our application we can generate a bug. And I'm gonna open microsoul because something's trying to happen and I know exactly what so I clicked it. But I didn't get anything here. That's that's weird. Why not? Maybe because I also made. function changes, so I should rerun my Dev here Give a generating work. We're doing this. Yeah. Let's just write it again. Because I did expect it to feel but I expected the different error. That's just happens sometimes. Yeah. There we go. Like I said that takes about okay. Cool, this is our part. Here we go. Classical broken that's fine. Mmm, that is weird. I know I know. I know. But I wanted to show you was this. I forgot my console log and here we're just gonna console look the data because I want to know okay, but what is in here? You know what is happening in this spectacle and how can I know for sure because basically this is breaking so, how can I know for sure that whatever I get back here just be correct. thing that I expect so now we're here again, and I'm gonna click create book and I'm gonna get back this. and this error I have a very nice slide. This error has made my life very hard for two days. because as you can see here, we have value here so normally That's you know. Really? I'm gonna explain it to you as well. But normally in the value here you would actually see your response that you would want to get. in any way or form or whatever, but there should be some connection to a response so maybe You already know what is going wrong. Maybe you. already have that I can totally understand that if there would be the case, but me I just kept on getting this error for two days straight. and maybe very frustrated It's not real error. It's just basically like a HTML template with Max in there. And I think it's like Sort of my entry point of not so it's basically to showing me next. And it's you know, the fetal is being done. There is a goal being done to API slash bugs. I'm getting back 200. This is just what I get. So I tried a lot of things, you know folders structure. whatever But then I went through all the documentation and there was one line in there one line that my frustrated had just read over. And it says run the front end and API locally. and my deduction skills here. Where that? Okay, so I kept on trying to call something for two days. but the function never run I'm getting frustrated talking about it because it was really it sucked. So, okay, so I have like I can run my Surfer my deaf Surfer so I can test my application. But I also wanted to start my function. I know how to do that. How am I gonna do both? that's where the ashes CLI and the Azure growth function is just going to come from here we go. So I don't know if you already did that. But basically what you want to do here is install static web app CLI. And Azure function score tools. You're gonna run a build. Which in our case means next generate so we're going to generate new static apps. And then we're going to use this command. So we're going to do SWA prosthetic weapons start. And then the output of my static apps or my static documents files. static application and the API location API and right now you still have to you know specify the API location, but you just have to type in this so that's exactly what we're gonna do. I already installed it. But I was just gonna do like a few more build or mpm generate. So it's going to generate a new set of static files for me now. It's going to take well, let me get some water. Okay, so we created this new set of up to date static files. Okay. Let's just do it by heart. SWA starts adults output / public and then API location API and basically what we're gonna do now. is we're going to create a web app emulator, basically. on the one and serving your study content and on the other hand running your Azure functions, but then Doing it at the same time. So we're spinning up our own server and you can actually check out your working application. But this was this tiny piece. Took me a lot of time to actually figure out this is this is you know, the the final piece that we needed to make sure that our API call is actually being done. That is actually generating the forgetting the correct. response and that piece that error that I showed you it was maddening how No information was you know available on that topic like if you try to search for ref info, I don't know what it is. I don't know whether this at all and the only thing I could find where you know few and next related documents, but never what it was. so that might say some trouble and as you can see here, we're on our own server or different surf right now. for generating a book the ends are famous and is here again. We have only the physical error. and where getting a completely different response here within the value. We see. This is the complete data that we get back. And that was that weren't my heart. I saw it and I was so happy. Um, so now as you can see as well if we click on generate new book, it just updates the image the description. It just takes a new object here. And that's whatever it should do. So I didn't want to you know, not show you that there because it been in defining moments in this virtual preparation. This is just pretty I got all the pictures from pixels and there's a scription from like the sense of media as a group media. I think Britannica. So I didn't create any of that, but it was very fun to make. Okay. so He did this cute are going to push all our code now. I'm so feature styling, but you know. It's not appropriate to actually be doing it like this. But like I said, this is not a workshop to go to production. This is just a fun Workshop. So we can do stuff like that and not be very official. and function cool Okay. Cool. So now what we can do again first go together. and a new build has been Yeah, gold. How do you say? really cold on this feature range, so I can create a pull request right now. I'm gonna do this as well because I just want my master to be okay. And then after this is done I can show you exactly that instead Azure study web apps now in the web app that we've created. We are doing an actual function call and the data set the whatever. We are calling like the API endpoint is going to be available. And so that is an endpoint that someone else might, you know be able to go. That's it. We created this very tiny. Very tiny application of course, but we touched upon so much stuff like we touched upon luxury which is still a bit, you know. Not necessarily wobbly. There's just a lot of new stuff that people have to get used to. and we deploy that in here minutes almost it was so easy. Like we didn't really have to configure anything with just to make sure that are in and our output was correct. That's actually knew where the stuff was. So that as you know what to do with that. now you have your function and could you only imagine how easy it would be to set up a full-fledged API with a database and then the database part is going to be rough, but Using Azure functions to do all those goals for you. It's I don't work for Azure. I don't get paid to say all this things. I was just really surprised at how easy it was to get to know it to, you know set it up. everything So now we'll be done and I've been talking for two and a half hours and I really feel it my my voice and stuff, but I'm also very excited and hope we did. is we did all those things and this is now well if I merge it to master, of course, but this is them now, you know the the end state of our application we created this in just two and of our we Gave this functionality. We deployed it so that other people can visit it as well. If you want to set up a portfolio website, you can now do it within a few hours. if you're another very perfectionist person like I am but it should be possible. And I think that's really really cool. I'm gonna merge it to master. It's gonna create a new build and then my website will be live and people can visit it and everything. So That's what I wanted to show you. Let me see. Yeah. I think that's it. We did all we pushed all our code. That's it. We have an application. with functionality We generates any of the 20 insects that are in there. It looks less than three out. We're and okay A bit of prep but It's so easy and I'm really happy that these kind of flows are there. So just it's sometimes still a bit magical, of course. so I have to wait for my action to be run if not too are running but then I can also show you the endpoint that we now have. Maybe I can already do that. I don't think so. Don't take a workshop. Yes, it does. That's nice. Okay. So this is My URL now and this is my data that I get now, so it should be accessible. Okay, so that was it. That was my application. I really love the ATM as well. So it's been a while. This was my workshop my presentation. I'm really happy that I got to do this. I'm really happy that you were here to do this with me. Um, I hope you you know learned a bit. Maybe participated a bit yourself or at least I could make you enthusiastic enough to also try out these functions because that's just wonderful. And if you have any questions or comments, I would also you know, sometimes be writing stuff on hashnode or I'm a bit active for social media. Not that much but may need them pictures of birds and fish and stuff. And but if you have any questions relating this Workshop or any at all, and you can find me on LinkedIn or send me just an email and I'll try to respond to them and thank you so much.