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 going to be doing here and what we're going to be creating. I'm going to be talking about Nuxtree, Azure State Web Apps and Azure Functions. I've already said it I think four times now and it's only been like five minutes, but it will only get worse, trust me. And we're going to do like an introduction, just a small piece of 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 Juul and Samachi, and they will be my people looking at the chats and looking on Discord to see if any questions pop up, if there are unclarities or maybe errors in your part or just stuff that you want to say, and they'll be mostly answering it or pass it on to me, just so you know, that if they answer, they're not nosy developers who just want to do that thing. No, 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. 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 Ready Player Melly, 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. Everyone can have it. How do you say it? Bad stuff about them. But I love the book, so I'm really excited. I am Mel and me too. I live in Lima, which is right next to Amsterdam, the Netherlands, with my boyfriend and my two guinea pigs. I currently work as a software engineer at Capgemini, the Netherlands situated in Utrecht. 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, well, the current stack, the stack I've been working on for the past few years already is Vue, LitElements for Web Components, Azure and Node. So if you hear all these technologies then you 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 dare to say that out loud, but we have a boat. So I'm just going to go own that title. We are really close to well, a huge chunk of water that then illness has to offer. We have a 24 feet or seven and a half meters sailing boat called Bola. And Bola means for my non Dutchies out there a slightly larger person like Chubby. Chubby would be a very nice translation of that. Yes. Because she's just, well formed. That's how they say it in a boat. I hope. She already got the name. She already had the name when we got her last year. So we weren't responsible for that. But for the past few months, we've been just giving her a very elaborate makeover. And as you can see in one of the pictures as well, we are watered. She did everything here underneath. And now she's back in the water again. And this summer we're going to be exploring the IJsselmeer and maybe a bit of the Wadizé and all the cute towns that the Netherlands has to offer. So apart from my sailing life, which is expanding, I like to film small life. I was really struggling with how I would describe that. But just small life under and above water level. I find it very calming to see worlds I've never seen before, however small. So sometimes I just throw my camera into a pond and see what lives there. I have this tiny sort of, not really GoPro but very nice, almost GoPro. And I just throw it in the water on a stick and then it films stuff. And it usually films these tiny, creepy crawlies that you wouldn't normally see. That's what I do to relax. I can really, you know... You should definitely try it.

So, our application! What we're going to be creating today is this Bucklopedia. And it's very pretty, I really like it. Basically it's going to be like Pokedex, but for real If you are a Bugs, don't worry, I'm going to make you feel like insects.

So Bucklopedia, right? So I don't know if you can see it, but there are also a lot of bugs in my dress today, because I'm really in theme. I know I find it a bit funny. In the past few months I found 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 woodlice in there as pets. I bought, but I didn't, I built it almost, and I'm now trying to see whether the plants can survive, because if the plants can survive then the woodlice can also maybe survive, hopefully. So they're not in there yet, but they will be there. I also bought quite an amount of plants for a balcony, and I'm very happy to announce that they are all still 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 lice. So I captured 6 ladybug babies and placed them on my plant, really thinking, okay, well, now they're gonna, like, you know, devour all those lice. Two of them did, sort of. They were sitting nearby and maybe ate one or two. But after two days, all six were in a metamorphosis state of becoming an actual ladybug. So now I still have lice 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 encyclopedia at hand for useful information? Well, we're gonna be running into a lot.

And obviously, I didn't entirely deliver. I can't deliver on that very large 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 template from NUXT. So it's going to set up an application for you. And of course, I've 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 gonna deploy an application to the internet. Which is where Azure Static Web Apps comes in. And we're gonna deploy an API to open up the endpoints. slash api slash bugs Of course, I'm gonna be explaining everything. I think an important note here... Is that the focus of this workshop... Is not necessarily on NUXT 3. and application development. I want to give you like a look... into what web development from start to finish would look like. With this technology in 2022. So even though I'm gonna be giving you a lot of information. It's not primarily focused on NUXT at all. But we do have version control and builds and deployments and API endpoints. So, it's gonna be a lot and I'm gonna 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 test it 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 workgroup 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. We are using GitHub, so if you don't have a GitHub account, now's the time. It takes like, I don't know, 4 minutes maybe? In Azure, one of the prerequisites for this course, was an Azure account. If you don't have one right now, or don't really want to code along, that's completely fine. This workshop will be recorded and then saved, and shared after JS Nation, the actual conference, just in the coming weeks, months, an actual recording of this will be put live. You can always do it at a later time. Then the extensions that you could use, the VS code extension. Some extensions that we are going to use definitely is Azure Accounts, Azure Functions, Azure Resources, and Azure Static Webapps. Well, the later not necessarily, actually. We're going to do that file portal. At least Azure Functions and Azure Account. Those will definitely be used. Yeah. Don't go installing them all right now because there is still going to be some time after that. As you can also see, like Azure Resource and Azure Static Webapps are still in preview, still new.

Unfortunately, that's not really a problem for us but still, I just wanted to note to you that not everything is working properly yet. That can be a nice crisis. The other extensions because of course we're going to be coding in Nuxt, so there's few. You could use Bolr for few, three support. I will definitely recommend that if you're doing it in TypeScript. I use Feater for now still, that is built on Vue 2 but that can sometimes give you unnecessary warnings. I am mainly using Feater still because I'm not typing or not typing, no, I'm also not typing, but coding in TypeScript, I'm still using JavaScript.

Then, Volar 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 theme that I have for today is SYNTHWAVE 84, it's a new theme. I usually don't really code that much on this laptop, so I really had to make it my own, and also, I've been really watching the new season of Stranger Things for the past few days. That always gets a bit of an 85 going, I think. As a linter, I use ESLint, and for cool icons, I use VS Code icons.

Then, package installs and versions. I'm currently still on node 14, as you might see. That 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 out to node 16 or even higher should be fine, but this is just currently the stack that I'm using. So NPM 6.14 pmpm, that I'm gonna be talking to you about after this. It's also like a node package manager, but we're only going to be using it for one command. I'll talk about that later. Let me see, let me see. Yeah, so SWA 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, somewhat like that, which is also why it's on a 1.0.1. And then PMPM, like I said, we're only going to be using that for one command. But because NUX3 is still not, or still not, it's not in a stable release yet. So it's not going to be published on NPM yet. So NUX3 itself in this documentation is either using, I think, NPX, NXT, something like that, or PMPM. And I chose one of those for no other reason than I just picked one. I sound like it's funny. So that's why, you know.

Okay. Then I have created a materials repo. And I'm going to share that one as a link. Because I find that, you know, sometimes it's a bit hard, of course, to maybe code 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 a data set, but it's like a JSON 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 workshop. Let me find the link. And I'll put it in the Discord chat. And then you can clone it if you actually want to code along. Just check it out if you want to. That's also fine. Let's just dive in, because now I've been talking for way too long. But I'm going to keep on talking but still, let's also do something. We're going to set up a GitHub repo, because today we're going to connect our Azure Stated Pubapps to GitHub. You could also do Azure, and maybe later on you can also do GitLab or Bitbucket, but that's not live yet. So first, let's try to do this. This is very inconvenient. How do I...? Well, this just lives here now. That's fine. Let's create a new repository. I think most of you have already done this, but let's just go along. Let's call this BugNopepedia. It's available with a surprise, insects, poke, attacks. As I understand correctly, it has to be public. I try it with private. Azure got a bit mad at me and didn't want to build my application. I think I have to do some other configuration. For now, just keep it public. We don't really have to add anything, and we're just going to create a repository. Nice, this is really nice. Cool. We did that. That was step 1.1. We're not necessarily halfway, but we are getting there. Then the next step for us would be NPM install, globally install pnpm. So, what we're going to do... Let's open something weird. git bash. I know that I've already installed it, but I just wanted to show you.

You literally have to type this in. So, let's do that. Cool. So now, I've installed it globally, so I should be able to use BMPM now. And that's exactly what we're going to do, because we're going to LUXinate our application. So... Let's do that.

So, let's go into the Nuxt part. It's going to be a bit of a theoretical part and then a coding part. But, Nuxt3. Officially it will be publicly released, I would say this month. It was in the planning for June 2022. But......um, currently it's still in a release candidate state as in, as on their website. So let's just assume that not everything is working yet and things are a bit wonky. But nevertheless already a very nice experience I can tell you. So, RC in there means release candidate. Nuxt2 is currently or is going to be in maintenance mode. So if you're a Nuxt fan, then one way or the other you should eventually go to Nuxt3. And that also means that Nuxt3 itself is growing up of course. So this month on June 2022, the stable version of Nuxt3 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, how to make this workshop work with Nuxt3 and Azure. It was like I said, an adventure I think. So it's going to be quite a short description of what Nuxt is, because they only have three hours. But then their own words, Nuxt's goal is to make web development intuitive and performant with a great developer experience in mind. Well, that sounds very promising. It also doesn't say anything, but what does say anything about it? Version 3! So 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 Vue 3. It's using the Composition API, Feat, TypeScript, Nitro. Most of them, just like Vue does. And Nitro is of course a Knox product. But that means that if you're like a developer like me, who's usually, you know, few-focused, very few-focused, and Knox would be like this. This very good choice for you to, you know, learn new frameworks, but also see what they can do, because they can do a lot, and it feels intuitive then. At least that would be my expectation. But, you know, you see these words here, Composition API, Feat, and, you know, TypeScript. Well, that's an extra adventure I would say. But what does this mean? It basically means that, that Knox itself is a very rounded framework now, and it's built with the following. So it's using a JS framework for Reactivity and Web Components, Vue. It's using a bundler to bundle its codes. And then you can either pick Webpack5 or Feat. Either should be fine. And just keep in mind that Feat is also a product of Vue. And it has different properties or different things that it does. The other thing is a transpiler for JS syntax. And that's called esbuild, which has been around for slightly longer. A server for surfside rendering built on H3. And that means that their nitro server engine is also built on H3. If you're interested in that, just go to the nitro documentation or the H3 documentation. And that might give you a bit of more sense. I'm not gonna be diving into it today because I'm gonna open up a box of worms there and I'm not gonna be able to get out. And lastly, also a routing library called fuel-router. Fuel-router 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 docs what they say is, moving from fuel 2 to fuel 3, including defaulting to the composition API and script setup. What does it mean? Fuel had options API, still has options API and now composition API. Composition API is now the default for NUXT. It's not necessarily the default for fuel 3 but it is for NUXT. So that might take a bit of time to get to know because it's slightly different. The word, moving from Webpack 4 and Babel to Feet or Webpack 5 and ESBuild. So, like I said, Webpack 4 and Babel were for a very long time front end standard. And now there are other players in the field. Well, of course, there's like the Bruno version of Webpack 4 or Webpack 5 but Feet and ESBuild they also came around the corner and just thought well, give me some of that. Moving from a runtime NUXT dependency to a minimal stand alone server compiled with NitroPAQ. Nitro actually, it says NitroPAQ but that's just when I knew it Nitro. And I'm gonna be talking about that after this slide but like the word rewrite here is very well placed. Even though the 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 Nuxt2.

You've been used components and then a few functionality that you expect but you may ask, what about static site generation? One of the key things that make Nuxt so useful for so many people, you can turn off surf site rendering. You can use SSG in your application but static hosting on seek is still in a very experimental phase and under development. They call it, I think full static. I'm not entirely sure on the words so please don't pin me on that. But as I understood the functionality is a work in progress.

Nitro. So one big difference is that a nuxt application now spins up its own nitro server. If you want, if you let it. Nuxt has a few core packages like the CLI, the core engine, bunthers. Most of the stuff that I just talked about, those are core packages for nuxt. An interesting one is the server engine, nuxt-nitro. Last year, together with a colleague, I did a talk on edge computing and nuxt in which we wanted to use an actual nuxt-nitro server. We wanted to set it up. But we failed, because it was so new. It was, I think, still in alpha or maybe just in beta where someone along those lines, like we couldn't really grasp it. There was no real documentation. It was like a mystery. And it's nice to see that one year later, here I am talking about it again, then sort of got it to work. So nuxt-nitro itself is a runtime framework to build and deploy any JavaScript server anywhere. It defaults to a Node.js server. So if you know Node.js, 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. I did not use these tutorials because I just found out about them 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 the box with Nuxt3. Another cool thing that I found out by accident, but I now understand is that your Nuxt app automatically creates your API endpoints. So if the code itself is in a folder called server slash API, you can set up a server and its middleware and you would do that with your Nitro 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 go on an adventure with Nitro there. It's a team, that adventure part. But also like I see here, the how-to's that I'm talking about are also on Azure, on AWS, on Netflix, Cloudflare. Any sort of deployment provider that you can think of, 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 it's also nice to sort of be on the same page. So the browser sends a request to the server and it receives a response. That's how websites work. If you're here in the stock, that probably means that you know that. Let's humor me for a while. Surf site. So the server has taken an entire responsibility of serving your application properly. Files would be prepared and compiled on the server. Websites get rendered on the server. And the server sends a fully rendered HTML application to the client. It's more SEO-friendly and faster load times among other pros and cons. And client site is the application will be rendered in the browser of the clients, not on the server. So the server sends this empty HTML file with all these links of all these materials that the website needs. And the browser then 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 SEO is of course a very, very important part. Then we have pre rendering, which as I understand that correctly, I've never really used it consciously. It does a bit of both. So when a request comes from a human, the application will use client side rendering because then it doesn't really matter how it's served or if SEO is crap. But when a 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 bots maybe. And SEO should be perfect, then the server will choose to server side render the application, serve an application that eventually might score higher with its SEO. So Knox can do all this. I also put static side generation on there, like I said, Knox can do all this. It also introduced hybrid rendering in Knox 3. Basically, it means that not every page might benefit from the same random method as was the case in for instance, Knox 2. So with hybrid rendering, different render methods can be used side-by-side. So the server sort of chooses what it's 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 Knox. I'm going to take a sip of water because I'm already parched and I had tea and it's cold now, but it's okay. So now we're going to do some, well, at least anything. Which means that we are going to create a new application and we're going to be doing that via, I think this is it, and then the name of your application. So in our case, it's going to be Berkelopedia.

And you might see here, we are using pnpm here. I'm not entirely sure where DLLX stands for, but Nuxy is the Nuxy LI, and I think that's also completely rewritten and completely new. We're adding a new application and that's called Berkelopedia. Let's hope it works.

Yes. Cool. 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 used the only VMPM command that we would use, so feel free to uninstall it or at least write down to uninstall it 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 dev server, essentially.

So you might notice something. I have two things written down that you might notice, but let's start with the latter. What you see 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, use JavaScript because it's safe, I know it, and TypeScript is for another time. But if you do know TypeScript, feel free to make it a bit more challenging for yourself and code along in TypeScript. But just so you know that the actual init application that we just inited is written in TypeScript just as Vue originally is. Let's see if we missed something.

Okay, so a lot of warnings that we're all gonna ignore. And let's start with our, yeah, okay, it's actually pretty cool. Oh, loading on my different screen. It just 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 PMPM commands to init a new application, well this is then what you get and as you could maybe see from the code as well, it's very, yeah how do you say it? It's very tiny, it's not that big.

So the other thing that you might notice here is that we're using Feats here as our bundler and Nitro, Surfer, so it is starting of course, my local host is running on Nitro now. That's pretty cool. One other thing you might notice is that we didn't get any option at all to choose from. Of course with Max 2 or a few or whatever, you can pick a lot of different things and sort of customize it. With this setup up until now, that's not at all possible. Who knows, might 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 feet as our binders, like I also said, the alternative here will be Webpack 5. Both come out of the box but I think you'd still have to sort of implement Webpack 5, that's fine. So binders itself are of course the happy worker, step on to our applications from mass to understandable application to deploy. Well and built on top of esbuild, feed make sure that browser loads just a few ES modules to serve your application instead of one large file for all information. That's actually something that esbuild already did and feed is just improving upon that and creating its own product from there. So it's smaller files less time consuming, even though feed is a product a few. That's just a side step into feed because it's actually pretty cool. And you can just use it in any application, any framework, it's a standalone project or a product so. Even though it's currently for nuts that leads the experimental, go check out that documentation. Just start up an application, use feed and see what it will bring you. It's pretty cool.

Okay, then where is my, there it is. Okay, so we did our init.nux.json project. Look at it, we're already at step 1.2 actually. So we're flying here. We're gonna add Nuxt app to our repo. And just for the people that don't essentially know how to do it, I wrote it down here. There are a lot of steps and I also sometimes just get confused. But if you do have a GitHub repo now, let me just make it a bit smaller. This is way too small. There we go, this is fine. Let's close of our dev server for now because we don't need it. Okay, we're gonna init a new GitHub, empty GitHub repository. We're gonna add everything that we have done. So everything that we just initialized here, we're gonna add it to stage. We're gonna commit it with the famous first commit message initial commit. We're gonna set our main branch to main. It's a change, you might have heard it but master is not really the appropriate name for it anymore. So I'm just getting used to calling it main now. That's not always going to be going well. We're gonna get remote at our original well not original. I wrote down origin and I said, original GitHub repository. So I have to find its link. Let me check it out. I could have guessed this, but again, I don't want to type in this long. We remote added it so that now this empty Git repository knows. Oh nice, so this is my repository, my remote repository.

And then we're gonna push everything in there. Okay, no errors. I always like that, especially if people are watching. Then in our popular video right now, we have all our code. So nicely done, nicely done. That's the first step. Let's go to the second one.

Okay, we're gonna add some pages and a Nuxt link to our application itself. I have a lot of screens open so sometimes it's just a bit, you know, okay, I don't know where to go, but it should be fine. Okay, so what we're gonna be doing right now is we are going to create a folder called pages. And in there, we're gonna create a file called generate.view and index.view. Cool, cool. Then I have, of course, prepared a bit of code so I don't have to actually type everything out. Some page, I have a different idea and the idea will be handy later on. Then we have a title. Title. And another p tag with some random welcome text because otherwise my page was very, very empty. This let's call it a filler. This is probably not really new for most of you. Like I said, if you know Vue and you know that this is a way to template data within Vue. 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 work rough. There it is. Okay. That's weird. This looks weird, right? Yeah, okay. What we have here is a script setup. Tag essentially. It's a script tag. This is where all your functionality code is going to be in there. Either your TypeScript or your Javescript. But this way of writing, like I said in the beginning, we're using composition API. And you might know the composition API because you are using this, this, and then you're gonna do a whole bunch of stuff there. What you see here is basically the same. It's compiled time, synthetic sugar. We're using the composition API. So it's actually recommended to start using this if you have single file 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 wise. No, not a lot. So, it's basically less verbose and can be easily made asynchronous. But I'll show you that later. So this script setup like we see here is more efficient and minification friendly, because the template is compiled as an inline functional. So this part is inline functional in the same scope with the script setup. So that is what I have to say about that. We're gonna be talking a bit more about the Composition 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 an opinion, I do have to say that I find the Composition API very confusing sometimes still. Maybe I haven't read the documentation well enough, or there could be all kinds of reasons. But my third, you know, opinion that I have about it, I like the Meet-Structured-Options API as opposed to the Composition API. And that also means that it's a slightly more difficult for me using Composition API. I have to say I choose options over Composition any day just from a developer that has to code perspective not the performance perspective or whatnot. So that's just a side track from my opinion about the Composition API. But let's go back to what is happening here actually. So I explained the 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 template. But we are creating, we're using the ref method here with the text that is should show. Comparable to the data property but in composition API syntax, that's my conclusion I think. You'll also have reactive instead of ref, but we'll see that later. But basically what we do here is we create this reactive and usable ref object which has a single property dot value. So you could get it after a single property if you would do something like console.log title.value, then you would get this what's in here. But we're not gonna do that. It has less limitations than the reactive method that again I'm gonna be showing you later, but it basically replaces the data property and before create and created life cycles of the option API. So that's what I mean with confusing.

If you know I noticed now and I know that I can use ref also to make use of the function empty that's something like a creative life cycle could offer us, it takes some time to get used to at least in my part.

Okay, but we created the index. Let's create the generates and for that I'm just gonna be copying the code because this is a very, very tiny one gonna be commenting this one because we're gonna need it later. Oh yeah, that's right. Oh, I have to do something. So I'm just going to say, hi. That's sloppy. I know.

Okay, title 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 generate. Page. Okay, cool. Now we have two pages, we don't have anything that will link it. So what you see here next welcome is the start of, let me run my server as well. That was just the starting point of any Nuxt init 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.view which is just as in Nuxt it was like that, in Vue it's like that. The app.view 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 gonna be adding a bit of navigation here. And the Nuxt page to our main component.

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 Nuxt link to, I think slash, call it home and close it off. We're gonna create a like-wise Nuxt link to slash generate. Generate a bug. Cool. Then I have to wrap it around a div because even though Vue itself gives you this, you can have more than one root element in Nuxt. 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 that it wants. So what did we do there? I created two Nuxt links which basically, underwater, are few router links in underwater. And underwater there, like even deeper, it's just an anchor tag. So this way Nuxt can handle any kind of links. So it could be internal, external, whatever you want within your application. It tells Nuxt 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. It can do it at 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 routing. So that whenever we go to this page, then Nuxt knows, oh nice, I know that, let's go to this page. If you don't include pages as a directory here, Nuxt will not include view 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. Nuxt just does stuff for you. It's a bit of lazy coding 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 router page, a router view, I think it's called, we have to have like a Nuxt page to actually display whatever we're linking to. So now we built all these things. Where is it? Here it is. Look at how pretty it is. No, not really but we'll get there. So we have a home, we have a generate bug and that's going to the correct endpoint and has a different text here. I broke it, let's alternate. Okay, I broke it. And it's there again. This happens a lot. If you're going to 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 an application. Did we have to do anything else? I don't think so. No. So if you wanna go to long, maybe I should have said that in the beginning, but like I said the materials but no PDA repo with the exact code already in there. So you can use it for later. You can use it if you wanna listen now but code later or whatever. It's there, you can just cruise it at your own leisure. We did all these things. So that's really cool.

Yeah, okay. I have some styling, of course, because we do wanna make it a bit more pretty because like, this was nothing. So in the same materials Buckleupedia 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. 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 we're gonna create a assets folder, in there a style folder because we're also gonna have images there and in there we're gonna use main and SCSS. Okay, cool. Just gonna copy paste everything here. What we are doing here is we're importing a cool font, which is a very chaotic font. We are in SCSS, so we have a font stack, a primary color and a secondary color, another designer, so it just, you know, you're sort of like a black and white stuff and well, we'll get to this design part later. I have some basic HTML styling, PA and body styling and of course for the nap, I just want it to be sort of centered. Okay, cool. This is going to create a very chaotic thing. Now we're gonna just refresh and hopefully it breaks. At least there's no styling, right? No, that's because we need to do two more things of course. First of all, we have to install Sass Sass Loader at 30. So maybe you might also notice that, but I'm doing Sass Loader 13. I've never used Sass Loader 13 actually. I was always stuck at 10. Because most of the applications that we built were so stuck on WebEx 4, and that was the highest that WebEx would go in Sass Loader. But now with Nuxt 3, I just tried it, it works. So that's cool. We download or we install our Sass in our Sass Loader. So at least our application should know what it is, but we also, of course, also have to actually add it to our application. We're gonna say style, and then the language is Sass. We're gonna import it. Import it. That's... Is it there? I have to check really quickly. Yeah, that was it. Like you see here, that's how we also have to do it. So we're just gonna copy paste this because why not? Yeah. So this is basically also 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. You could also see that these are all the errors because of course, my depth circle's off, so that's how it goes. So, and like I said, it sometimes just takes a while for Nuxt to start up the server 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 idea, but I was very happy that after all that ran, I saw something. So now we have like a generate bug 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 of you to join me text here. And then we go to a generate bug page where nothing is still happening, but we are getting there. So what we did up until now was we initiated a NuxWeb app. I read web and I say web, but I meant app and we added some siding to it. But of course we now want to go sort of even further, we want to deploy it. Our app basically works and does what it needs to do. So let's continue with this part is the third or now the second part after this function still up. So we're getting there now, really. So what is Azure static web apps? The description that is stole from the Microsoft website is it's an Azure service that automatically builds and deploys full stack web apps to Azure from a Google story. So basically we make changes there. We push something to either Azure or GitHub or for now, those two, definitely. Azure makes magic and static content on one hand is being deployed or being generated in an output folder and on the other hands, we have our API functions created with Azure functions or executed with Azure functions, however you want to say it. And Azure static web apps makes like this, they put them together. So that's really nice. Every time you push code or a merge request, a build is automatically triggered and your app and API is deployed to Azure. So the benefit of using Azure static web apps is that static assets like images are now served from points, geographically distributed around the world. So it's serving the files much faster than through the traditional web server.

And that's basically the same with the most services that Azure has, right? This one of their selling points that they have all these, I think it's called edge locations. Not entirely sure. And whatever's closest by, that's gonna serve up your contents, making it just quicker.

Okay, but then we have like a few key features, right? So it does web host and static contents. As I already said, it has an integrated API support by Azure Functions. I'm gonna be going through that later. It has GitHub and Azure DevOps integrations, but currently in public preview are also BitBucket and GitLab if you have a preference for those. It is globally distributed static content, like I said, and it generates staging versions and that's very cool. So we're gonna be seeing that in a few slides, I think. Best feature, it's free. At least it has two tiers. So if you pick the free one, it's free for you. Maybe a side note, Azure Functions is not entirely free. It's free up until certain threshold, but again, if you just want to deploy something, then you can use Azure Static Web Apps performance for free, which is always my favorite.

So let's go with step 3.1. And let's start off with one of the problems that I had was that all the documentation that I could find on how to do it or information was focused on NAX 2, which means that I am, you remember the 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 NUX generate because we want to generate static files for Azure static web apps to use. So let's do that. We change 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 config, we're gonna add SSR. 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 gonna generate all these files for you. SSR false, of course means that we want to turn off server-side rendering, meaning 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 it cannot 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 server-side rendering turned off to Azure Static Web Apps, it would go through, it would make sure that the build is green and it would be deployed. But I don't like this error. The only thing that I can find about it was to turn off server-side rendering, so I did. Hopefully, down the line, there will be more documentation about that. So we're just gonna do that, play it safe. Yep. 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 it's also like this is the version and our C mega set release candidate, so when this is gone, we can finally go nuts. So exciting. Yeah, okay, so we have an output full here. Oh, so many things are happening. So we have generated a public output folder and this is where the static content is going to live, but we also did some pre-rendering. Again, there was no config that I could choose from in the beginning so this is sort of like a surprise here and there. But with the pre-rendering, it's pre-rendering my routes and my 404 and that at least means that those will be available. It's cool. Like I said, I never used it. Now it's there. This is also, you can also find it here. Like, we have now a NOx folder with also my pages. Generate and index are my entire pages. We have to sue a 100 page and a 404 page if everything does not work out anymore, but this is cool. 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 that, I have to quickly check for my credentials. Nope, 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 going to be looking for Static Web Apps. And we're going to create one. And as an Azure subscription, of course, I have a subscription. So, yeah, don't worry. That's just the resource group and your subscription of Azure. If you don't have a resource group, you can just create a new one that fits your new purpose. Okay, so, we're going to create a static web app that's called Buccalpedia, and it's going to be free, because we don't want to pay for it where it should be. We are hobbyists. I usually pick the location that's closest to me, so I'm in West Europe.

And here, we have some programming details. Like I said, you can click on Azure, and then other. And I've never clicked that one, because now I'm going to be stuck with GitHub. 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 here.

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, Loggolpedia, of course, and my branch, which is main. Or master, in your case. Who knows? Then we have build details, and this is what your workflow is gonna be based on. There are a lot of frameworks that I can pick, just like Nux.js, but I'm choosing Custom here. Mainly because of the documentation set I should. Also, I don't trust, I don't know whether this is two or three, so it could be an outdated workflow. I'm not entirely sure. So I'm just gonna fill in some custom fields. The app location is the root. The API location is api, and the output location is.outputs. slash public, just as we saw before. Okay, I'm gonna create it. I'm creating it. It is, you know, doing its deployments, we just have to wait for a few moments. And it's already successful. So that was really quick. So we go to resource now. And if you are here in this step, congratulations, you just deployed an app via Azure. Let me say it differently, you just deployed an NOCS3 application via Azure. So pretty cool, pretty quick, one and a 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 app? We're going to check our app. And I just clicked on this link, right? This is very annoying and nothing was happening there. That's because our GitHub here is also linked. So what you can do is you go to your GitHub repo, click on Actions, Add. This is your pipeline that's running right now. With minimal configuration, you didn't really have to know about workflows or it's a yaml file. So I don't really know a lot about yaml. Still I have a pipeline, it's running. It's probably going to create a build and I hope they succeed. But that's just within a few, you know, clicks of a 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 going to be doing it. These all are npm morning install. I was seeing all this red and I thought, oh no. That's beautiful, I love pipelines. So all these things happen. We created a yaml file. We can adjust that yaml file if we really want to. For instance, the first few times that I tried this I got the output folder wrong a lot. So I had to keep on adjusting it. It's very easy to do. The URL that you just saw that I cannot access anymore should not be a 404 not found. Give it a moment. It's still 404 not found, that's very sad. Okay, let's give it a moment, I'll check back. Oh! I know, we have to push our code. That was very exciting. Yeah, so we're going to be pushing our code. Let me see. So we did all of this. We are here. We created a repo, a Nuxt 3 app, and an Azure Static Web Apps. So what we're going to do right now is we're going to actually be pushing our code. I think that would make it better, because right now, there's only the initialized app in there. Did stop, not a very good message. This also happens a lot, actually. Because Azure is now changing your GitHub 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 entirely sure. But for the first time after you've done your first build, you have to actually pull. So that Azure knows, okay, nice, this is the workflow that I really, or that GitHub knows, Okay, this workflow is fine. We want to keep that. 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 is executing right now, we just pushed our code to main, of course. So, a second build is being triggered with all our new material. Hopefully, we'll not see a 404 anymore, but just our actual app. But, before this is, we're not gonna be actually waiting for this, so let's continue. We made all of this. So, from here in lab, let's make it better, right? We want to make our app prettier. We want to make it actually do something. Was a bit bare. So, again, in our Materials Wikipedia, you have this main.scss again. And all the other CSS that's in there can be just... copy-paste it into our application, so we're gonna be doing that. We have here our main SCSS again. And we're gonna be just a bit more styling for you know, the generate bug component that we're gonna create after this, and the index.view. Just to give it a bit more study on also the text over there, stuff like that. Nothing fancy. Just that it makes a bit more sense. Our server is, of course, down, but let's just open them up, because we're going to be adding more code. So, we added some CSS.

So, there's a little side note here, because if it were up to me, you would have created the, this one. But, for a just worn-out look, 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. So, if it wasn't for him, he would have created this part. I'm so very proud of this, because, you know, I am really not a designer, so, that I managed to do this. He was especially mad, because there was a blue background, and like this yellow text. But again, I really like it. Okay, so next part. I think our dev server is on. Yes, nice. Okay, there we go. So, we have... I've just centered this part. And then, when we click on generated bug, 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. So, 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, we're going to fill it up with some data. And we're going to add that actual component to the correct page generated. So, first of all, let's create a folder called components. We're going to call that generatebug.fume. And in the generate, it's already there. I just commented it out. Let's keep this, you know, gone. We have added our components here. Now it's time to actually fill it up with everything that we want. So, the first part that we're going to do. Of course, templates. I'm going to copy-pastes. This is a lot of diffs with ideas. So, our template here is going to be a component called it is going to be a container. And in this container, there'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 a source that we do not have yet. So, we have to add the background after this. We have a image, a name, description, and a button to actually click on to generate a new bug. Okay. That's just, you know, the template. But then, our next part is the actual functionality, of course. I assumed that would be so on our 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 going to be using reactive, so we have state is reactive. Because mainly, what I'm going to add here is an object with bug details. Reactive here, it's a reactive method. It's basically the same as the Wrap method in the indexer view that we used earlier. Reactive returns a reactive copy of the object, so deep conversion is happening and all the nested properties are affected there. The advice from the Vue documentation is to use mainly reactive and not the original object. Always sort of create a copy. But when to use wrap, when to use reactive? Well, in general, wrap is useful for primitives, and reactive is useful for objects and arrays. Because you really want to get in there. If you have this three nested down object, you want to get all the values there, of course. That being said, and here's where the confusion comes again, you can use objects and arrays with Wrap as well. So my advice here would be to just try out stuff, see how it goes. And then you might find some surprises here.

So here we have some information of course, where is it? I'm gonna copy-paste the actual bug details because it has a very long description. Like you see, this is 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 a state and whatever goes in here. So if I would also have like a title, you would just do like title this is title. You know, you can fill this up with whatever and reacted data property because that's basically what it is. And you want to have, it would just be your state object with all the reactive variables in there. Don't confuse it with a computed at all because they do have a computer method and it's slightly different. So this is just our data proxy now and that's the sound works. Okay, what we wanna do after that is, of course, if you can see, we have an add clicker. So we're gonna create a function that actually does something whenever we click on the button. For now, we're just gonna console log whatever, say hi or something. Just so we know, okay, the button is clicked, my function is linked, I can then build up with whatever I need.

Okay, so we have a function. Generate bug, same name. We have a state. So this entire template will be filled in with the state. You might also know, oh, but what about all the, you know, backgrounds, asset style, asset images. In there we gonna be, yeah, cool. Oh, I hope I have six backgrounds, yeah. In the, where is it? In the materials repo, again, you can find a folder, the same structure. I think it's this, I'm not entirely sure. No, it's called backgrounds. In 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, the three, sort of. So just don't forget to add these to your application as well.

Okay, so let's check how this works. Where I get a lot is that my terminal is not really updating or keeping track of the latest changes that I've done. So I found myself starting and stopping my server a lot, but that might again change later on. This is just because I'm a very impatient person as well. This is so good. Now we have to wait again. Yay. There it is. Okay, so if you click on home, we have our welcome page again. If we click on generate bug, it is showing this. I'm gonna 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 this scrollable piece here with a description of the animal that we want to do. If we now click on generate new bug, it's going to say clicked because our function does not do anything yet. But this is the only bug that we currently have right now. Right, that's the final state. Because I also wanted to show you something else. I'm going to be creating a new brunch right now. And I'm going to be pushing that brunch to my remote main. Sorry. I'm going to add everything. So there we go. Okay. I'm going to be pushing this inner feature brunch to my GitHub. Oh no, I pushed my main. Yeah. Okay, cool. Where is it? Here it is. So this is my repo. I pushed this brunch. I'm going to compare them pull request it even though I'm the only one. So it's basically like that meme, you know, Obama giving Obama a medal. Well, that's what you're, what I've been doing for the past two weeks. And I'm going to open it just as any other pull requests. I'm sure you'll see a lot of them. And automatically I didn't really have to do it, but it's configured in the Amazon files. Well, is you're going to have this built? I don't think you necessarily have to have a built, but it is going to do it. And what it does is setting up this 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 main after my merge, 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 a built in this application takes about two minutes. So let's just continue. We added the GenerateBug component. We are creating this pull request, right? Just like I said, just like I showed you. But why does a bug not be here with just one bug? We want to update it so that whenever you click on generate bug, it will generate a new bug, 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 couldn't find one. Well, no, I found one. There was not very usable in, you know, it wasn't really matching my own requirements. So I sort of had to create my own dataset. And like I said, dataset is just a JSON with key value pairs per object. So it's quite small. So it's time to put the function in 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 four and four, so now we have our home and a generate bug. And in there we are just, even though this is a very ugly scroller. So it works. We even probably have a clicked. Should be, there's one error for the Fabricon. That's fine. Yep, okay. So everything's still working. Everything's still connected. I've styling. This is going very well up until now. We're gonna go to the next step. We're already at 5.1. I mean, we're almost there. So we're gonna install some packages and extensions. First of all, we're gonna install the npm install Azure Static Web App CLI. We're gonna do that globally. And we're gonna install the Azure Functions Core Tools number three. Both are like static, the CLI of course is a CLI. So in our terminal, we can then use swa, swa. As our, you know, short command thing. And Azure Functions Core Tools. We're gonna need it when we're going to test our function. But I'll get to that later. So I have three PS Code extensions, functions, account, and resources. So, you know, I would just install all these three, install these two npm packages. Let me see. This one, let me put it on the screen because I don't know if people are actually coding along. So just so you know. Okay, there you go. Yeah, nice. This is what it looks like. I'm gonna give you five, four, three, two, one. 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 if not, just refresh it if you're not prompted for that. And you should have this Azure, yeah, sort of option here, let's call it an option. And in there we have resources, which is Azure Resources extension. Here we have our workspace, which is basically just all our files here. And we have a helper feedback, just normal same things. If you would have to install Azure Static Web Apps extension, you would also have like this header here that says Static Web Apps, and then you'll see all your web apps there. It's really nice. But in your resources, 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. But it's a good experience. 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'll have to make sure, okay, how are we going to sign in then? I am already signed in, but I can't show you where it is. Like, in Few Command Pallets, it's very underneath this thing. You can check for Azure Sign In or Azure Select Subscriptions. So you first do a sign-in, then you are prompted to a browser, and if all goes 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, to see which subscription you want to use. And then you can select that, like I selected here, and then it knows, okay, everything that I'm going to be creating right now is under this subscription under a certain resource group. Without that, you're probably, you can't do a lot of stuff. And also your subscription can have like restrictions, of course. So, 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 how life is. 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. Again, 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 pages on how to do that. So don't worry about it. But assuming you're signed in and you can select a resource and a workspace and you see this thing, the next thing we're going to do is going to give you a bit of background on what Azure functions is. Because, it's a bit of theory, it's not that much theory actually. But Azure functions are, you can write these pieces of code in different languages and make them do whatever you want. So it could be polling, it could be triggered. It scales automatically according to your needs. But you won't pay for what you're not using. So that's really nice. It's just pieces of code that only run when you want it 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 a lot of different languages. Like writing Java, JavaScript, or Node. What we are doing, and C sharp, whatever. And like I said, it could be triggered. So we're gonna create like this HTTP trigger that whenever we do an HTTP request, it's gonna do something, but in the application that we created last year, the Ash Computing application, it was, we used polling. So every minute or so, it checked something, and then it gave me back some data. Well, these are just two examples of what you can do with them. It's a serverless solution, which is, of course, one of Azure's buzzwords, which means that no server is really needed, which also means that it's a perfect fit for Azure Static Web Apps. Yeah, and choose for web APIs, like I said, but those are database changes. So IOT stream processing, what we did last year, and a message to choose from whatever. It's actually quite fun to also try a lot of stuff there. Has a bit of this automation vibe, as well. So you can, it has a lot of possibilities, so definitely check it out. Like I said before, as well, Azure functions might be paid, so turn on all those no-bidding alarms and stuff if you do go nuts there. But what we're gonna do is, we're gonna create an Azure function here. So in our workspace, we're gonna be doing two things. Remember, our workspace here. Let me just clear out everything. Okay, this is our workspace. And it helps, I think, if you're in the boot of your application. Because sometimes it says, this is not boot, please do something different. Okay, so we click on this Add 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 asked you to select the language. And we're gonna give it a name, getobugs, because that's what we want. We want to create this HTTP trigger that whenever we call it, this end point, it's a GET request, and we're gonna be getting data. A lot of data. And we're gonna do something with the data. So for now we're just gonna name it getobugs. I press Enter and now it's gonna create my function. And there it's my function. This is just one tiny function. You also can create like a function app, but then you're also gonna be creating a database and another resource group, I believe. And it's gonna create all these other services for you to let the function app actually function. 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 now? The change that we see here is that we've got all these extra files and another folder called API, didn't exist before. But Azure looks for either a folder called API or a folder called function and then it knows, okay, here might be Azure functions in there that I have to execute. So just so you notice the naming convention, it's a bit, you know, that's what we say in Dutch, 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 system in which you can also add dependencies or what not. And you can start your function as well, because you do want to test it, of course. So there's a host as well for some config information that you want to add here. The ignore folder, and the really exciting part here. So the function JSON, json and the index.js index.js are the ones that you would like to probably adjust and add to. In our case it's gonna give you here some bindings for in and out. And the authentication level is anonymous by default. But you can change it to other values definitely. We created a hup trigger, this action is in, it's a request. That's also its name, we can use them. And it has methods. In our case we only gonna get, create a get call so we don't need a post. We're gonna add something else, maybe route. I think it's, yeah. And then bugs. Just for clarity, I like short and sweet. And we also have, of course, an object here with a type href and name, response. But this can just stay the way it is because we're gonna create a very simple function. But then we have here our index.soya.

So, you might, what you might already see here is that the common.js ES 5 is very old, we're in 2022. There are a lot of other ES versions already, imports and exports do not properly work yet with Azure functions. You'd have to maybe try to compile those into ES 5 required exports. I tried 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 export. 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 and export it just fails immediately. So this is just a ready-made function that you get from Azure. And basically what it does, if you're going to add a query parameter called names to it, it's going to give you a message in the browser. That's it. Very easy. It's going to give you like, either, yes, there is a name or no, there's not a name, it's an empty message or something like that. It's a very ready-made thing. But that also already means that if you're going to do like, we're going to 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. I can show you that. You could just run and debug. You can click on start debugging. And then it's going to 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 dependencies that it has to install. Basically it's func start. That was the NPM command. Of course we could have also used that. You have Azure Core tools now, which we're just going to show you how to use those. You have Azure Core tools now, which I think is necessary 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, except that.NET is not found, but for our case that really isn't important. I have a function, getallbugs. And it's appropriately a get here. And I have this nice cool, new local host. Served up on a different part with api slash bugster. So that's pretty cool, right? So if I were to name is felony. Oh, wrote my own name wrong. But if I were to do this, then another part of the response would be available. And this is just where our API lives now. I was flabbergasted by this, how easy it is. So that's cool. And then also in your terminal you see, okay, we processed a request. If something bad happens, which I'm going to show you later, it's going to have a little 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 end points. 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 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. I'm just going to show you. In the API folder, I'm going to create a new folder called Shared. 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, no, why not? I'm going to create a JSON called bugsdata.json. 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 dataset, but, of course, I don't want to take away the grandeur of how a dataset can actually be. So please just forget that I said that. In here you'll find, basically, an array. Well, actually no, you'll first find a key, bugdata. And there an array with all these objects with a name, image description. And you might notice, oh, that was also the same in my template, right? In your component, that was the same. So basically, what we want to do now and what we're gonna 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 template. That's what we're gonna do, and that was step one. So we added our data. Here, 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 for it. But basically, what we want, here it is. We can throw this away because we don't exactly need this function. And I'm just gonna copy and paste it. So what we're gonna do is we're gonna import our bugs data.json here. 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 probably that's gonna be handling all the data. Because otherwise, how would you keep track of that or write to it or delete stuff? 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 connection string. Yeah, that was it. The add your connection string of the database so that every whole that is going to be done to this endpoint that we just created, this API slash bugs for instance, the data's coming from your database itself. But I don't have a database. I barely have a nice data set. So I just left out that part. I think seeing the time that's actually very well decision, but normally we do it like this. We are just going to get our local, how do you put data from our application? That's fine, because it's basically the same, but then slightly different. So in our case we're gonna require, because we're living in 99. we're gonna require the shared slash books data. So our JSON here. We're gonna create an ACIC function that's gonna expect a complex and a rec. I'm just gonna, I left this in here because then you at least know in your terminal that it's worked. Of course you will know, but still it's nice to see it. 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 if you do wanna 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 is like a 404, maybe I don't know, but I leave this console log in here with a purpose because I want you to show how the data actually looks. If it works out, I'm gonna send back a status 200 with the actual JSONified data dot book data. That's it. So this is just gonna contain the array of objects that I just set. If not, then I get back status 500 and I send back an error. 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 purposes. Okay, so we are doing a lot of steps here. Of course. What about cross-version resource sharing? Well, you won't have to worry about that when you publish to edge-centric web apps, because edge-centric web apps takes care of that for you. It configures your 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 then point it also to your application so that they're gonna say, this application is safe. We like this application. Okay. So, of course, what we now did, we created an Azure function. Let me show you how that works. Let us 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 it actually does what it promises to do. And remember it's gonna spin an extra server on a local, it's gonna create a local host.

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 7071 API bugs and there it is, my very, very beautiful dataset that you see right here. So this is really nice. It worked, our function should work. But now the only thing that's left for us to do is connect, you know, a single server to this server, you know, we have all these pieces now and now we actually want to connect it, right? So what we're gonna do is we're gonna create a components call or we're gonna do a call in our components. It's a component generate bug. So I am gonna copy this here. And I'm gonna sort of type it out from my head. So let's see. Yeah, okay. So we're gonna go to generate bug here. And I should remember this as, you know, this reactive states underneath we're gonna initialize new component or constant. And we're gonna use the structuring because as you might know, or you might not know, I've not explained that yet so you shouldn't probably wouldn't know. We'd have to do like a fetch goal here. Next to us is fetch. A lot of things use fetch actually, but Nux has at least two methods to do calls, asynchronous calls. It uses use fetch, which is an API end points as a parameter and it uses use async data, I think, which is basically just a fetch also in the water, also within the 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 gonna do a call or gonna handle whatever we tell it to handle. Then it's gonna give back a response in four keys. It's an object response with like four keys and that's either Data, Error, Refresh, and Banding, I believe, but I think those were the ones. So the ones that we want, but what you normally also would want is, for instance, the error one, right, if you wanna know whether an error has been claimed. So we are just gonna destructure data for now. And then we're gonna await and we're gonna use fetch. And as a parameter here, we're gonna do slash API slash box. Cool. This is also nice. So, what you see here is await. If you use await on the top level, so this in a script setup, it automatically becomes an asynchronous method, this entire script thing. So it's pretty cool. You don't have to know, say that something should be async. I did that. It didn't work. 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. And property. You can just use this variable now, because then it's gonna be filled with whatever difference back. So you don't have to set a new thing, set it to a different variable and then use new template or initiate it in a different way. You don't have to do that now. So that's actually pretty cool. Okay. We have our state that's box details because that's what we're going to adjust and of course we're gonna set new values to this state is. And now I have check because there's a lot of math floor math random stuff there. Okay. So we have data thought value because that's how we actually get the value because it's a wrap and the water and we're gonna math floor, math random methods times data that value that length. I looked 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. This is gonna give you like either an index number between zero and I think 20. And that's what we want. So that whenever we run this function, the state of bug features will be updated with a new random bug here. That's pretty cool. I would say, oh, let's close off the Azure function run my server again. I already had a server running apparently. Yeah, here it is. Okay. I have to check it. Okay. So we're still on our application. You can generate a bug. And I'm going to open Microsoft because something's gonna 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 read on my death here. Okay, regenerating book and we're doing this. Let's just try it again.

Yes I did expect it to fail but I expected the different error that just happens sometimes. And yeah, there we go. I can see that it takes about. Okay, cool, this is our part, there we go. We go estava cacida erba, então tudo bem. Hmm, that is weird. Hmm, no, I know, I know. But I wanted to show you what's next. I forgot my console log. We're just going to console log the data because I want to know, okay, what is in here? What is happening in this vertical and how could I know for sure because basically this is breaking? So how can I know for sure that whatever I get back here is the correct thing that I expect? So now we're here again. I'm going to create bug and I'm going to get back this. And this error, I have a very nice slide, this error has made my life very hard for two days. As you can see here, we have value here. So normally that's, you know, already I'm going to explain it to you as well, but normally in 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 that would be the case, but me, I just kept on getting this error for two days straight, and it made me very frustrated. It's not real error. It's just basically like a HTML template with Nuxt in there. And I think it's like sort of my entry point of Nuxt. So it's basically just showing me Nuxt, and it's, the fetch code 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, folders, structure, whatever. But then I went through all the documentation, and there was one line in there, one line that my frustrated head just read over. And it says, run the front end and API locally. My deduction skills here were that, okay, so I kept on trying to call something for two days, but that function never ran. I'm getting frustrated talking about it because it was really it sucked. So, okay, so I have like, I can run my server, my dev server, so I can test my application, but I also wanna test out my function. I know how to do that. How am I gonna do both? That's where the Azure CLI and the Azure Core functions just gonna come from. Here we go. So I don't know if you already did that, but basically what you wanna do here is install static web app CLI and Azure function's core tools. You're gonna run a build, which in our case means snag to generate. So we're gonna generate new static apps and then we're gonna use this command. So we're gonna do swa, or static web apps start and then the output of my static apps or my static documents, files, static application and the API location API. Right now you still have to 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 would just gonna do like a build. Where npm generate, so it's gonna generate a new set of static files for me now. Gonna take a while, 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 start, dot output slash public, and then API location API. And basically, what we're gonna do now is we're gonna create a web app emulator, basically. On the one hand, serving your static contents, 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 the final piece that we needed to make sure that our API call is actually being done, that it's actually generating or getting the correct response. And that piece, that error that I showed you, it was maddening how no information was available on that topic. Like if you tried to search for REV-input, I don't know what it is. I don't know what it is at all. And the only thing I could find were a few relaxed related documents, but never what it was. So, that might have saved some trouble. As you can see here, we're on our own server or a different server right now. We're generating a bug. The ENDS, our famous ENDS is here again. We have only the Fasricone error. And we're getting a completely different response here within the value. Let me see. This is the complete data that we get back. And that warmed my heart. I saw it and I was so happy. So now as you can see as well, when I do click on generate new bug, it just updates the image, the description. It just takes a new object here and does whatever it should do. So I didn't want to, you know, not show you that error because it's been a defining moment in this virtual preparation. This is just pretty, I got all the pictures from Paxfuls and there's a script from like the Encyclopedia, Encyclopedia I think Britannica. So I didn't create any of that, but it was very fun to make. Okay.

So we did this. You are going to push all our code now. I'm still on feature styling, but 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 phone workshop, so we can do stuff like that and not be very official, after each function and function call.

Okay. Cool. So now what we can do again is first go to GitHub and a new build has been, how do you say, really cool, on this feature branch. 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 Azure Static Web Apps now in the web app that we've created. We are doing an actual function call. The dataset, the, whatever we are calling, the API end point is going to be available. So that is an end point that someone else might be able to call.

And that's it, we created this very tiny, very tiny application, of course. But we touched upon so much stuff, we touched upon Nuxtree, which is still a bit, not necessarily wobbly, there's just a lot of new stuff that people have to get used to. And we deployed that app in mere minutes, almost. It was so easy. We didn't really have to configure anything. We just had to make sure that our in and our output was correct, that Azure knew where the stuff was, so that Azure knew 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 gonna be rough, but using Azure Functions to do all those goals for you, I don't work for Azure. I don't get paid to say all these things. I was just really surprised at how easy it was to get to know it, to set it up, everything.

So now when we're done, and I've been talking for two and a half hours and I really feel it in my voice and stuff, but I'm also very excited, what we did is we did all those things. And this is now, well, if I merge it to master, of course, but this is then now the end state of our application. So when we created this application, we created this in just two and a half hours. We gave its 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 professional person like I am, but it should be possible. I think that's really, really cool. I'm going to merge it to master. It's going to create a new build, and then my website will be live and people can visit it and everything. That's what I wanted to show you. Let me see. Yeah. I think that's it, we pushed all our code. That's it, we have an application with functionality. It generates any of the 20 insects that are in there. It took us less than three hours and a bit of prep. But it's so easy. I'm really happy that these kind of flows are there. So it's sometimes still a bit magical, of course. I have to wait for my action to be run if node two 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. I can take a quick shot. Yes, it does. That's nice. Okay. So this is my URL now. 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 A-team 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. I hope you 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. If you have any questions or comments, I would also sometimes be writing stuff on Hashnode or I'm a bit active on social media, not that much, but maybe then pictures of birds and fish and stuff. But if you have any questions relating this workshop or any at all, you can find me on LinkedIn, or send me just an email and I'll try to respond to them.