0:00 Introduction and Project Overview

0:00 Hello, and welcome back to the Rawkode Academy. I'm your host, David Flanagan. Today, we are taking a look at a real world application using Fermion Spin. Why am I saying real world? Well, I wanted to build something that was topical and that being some sort of AI integration that shows you how to build real applications with Fermion Spin. We're going to do this with a multi component application. We'll be using Spin's static file server to serve HTML. The simple HTML we're using today is just a very simple form that will allow you to submit a request to the back end

0:24 Application Structure with Spin

0:35 API. The second component on our Spin application is a JavaScript back end component, which will actually make an HTTP request with authenticated secure credentials to the open API service and give us a response which we will display on the screen. Now this is real world and that this would hopefully mimic what you would want to do with Fermion Spin and your real jobs, your day, your real hobbies, your real side projects and so forth. Spin is great allowing you to componentize multiple facets of your application. Here API and front end, but that could be micro service

1:10 architectures where you have ten, twenty, 50 different components all working together as one cohesive unit. We're working with a third party service which means that we have secure credentials we need to inject in to our application. And like most applications that have users and growth, you're probably going to need a front end. And Fairway on Spin allows us to keep this very simple by just putting HTML into a static file server. Of course, it doesn't just have to be static HTML. You could use Next. Astro or any other static site generating capability front end framework.

1:45 As long as this spits out a build directory, you can serve it with Fermion Spin. And in fact, in this video today, we're going to take my crude HTML and deliver it with Astro. So let's dive right in. So let's set the scene and see where we are right now. Currently, we have a spin application which has the two components I mentioned on the introduction. The first component as our real app OpenAI language guesser. That's right. We're gonna allow the user to input any arbitrary language text. We're gonna send that to OpenAI and ask it to qualify it, to tell us which

2:07 Backend Component: JavaScript & OpenAI

2:20 language it thinks it is. We will then return this to the user. We're building this in JavaScript and we'll take a look at the tool chain for doing that in just a moment. As with all Spin applications and if you haven't seen one before, check out the rest of this course on my YouTube channel. There's over five hours of content to show you how to build Spin applications in Rust, Python, dot net, JavaScript and more. Now because we need to use a secure secret and actually I shouldn't have ever quoted that, this is a real secure

2:47 secret. This is a real API token for my OpenAI account. So we say that we expect some piece of configuration and our component, notably, we expect the OpenAI token. Now we're going to render this from a variable and we'll come back to that in just a second. Because Spin allows us to have multi component applications, we have to set up a rip or a rip prefix that tells it to send all the requests from that to this component. We're gonna keep our API simple and see the anything that matches slash API will go to the JavaScript component. Next, we're going to

3:20 use our build step. For our build step, we're telling to run NPM run build. If we pop open our package dot JSON, we'll see here that we use a webpack in production mode and spend a JS to Wasm plugin to compile our JavaScript application to a WebAssembly Wasm binary. As such, this is the same binary that we provide as a component source. Next, we have to tell the spin application that we have one required variable or this application will not work. Here, I'm just in open a I underscore token is required. Okay. Let's take a look at our last

3:56 Frontend Component: Static Files

3:56 component. This is the static file server that will serve our assets. Currently, a single HTML file. We use this long line source here because Spin has the ability to consume Wasm Spin modules anywhere on the Internet. We're pulling this from a GitHub release artifact on the spin fail server repository. We can give this an ID, notably we call this one front end. Novel, not so much. Then we configure the files that we want to serve and in this case, we're going to serve the front end directory, which has a single index dot HTML. Here, we just take the text, submit,

4:33 and send it to the API endpoint. Nothing fancy, but we're going to change that in a moment. Next, we can configure the fail server to fall back to another path if required. Here we're saying that the fallback path is index dot HTML. This just means that on our component which has a root prefix of slash, meaning anything slash except API will go to our static file server component. If that file doesn't exist, we just return the index. It just means that we can hit local host port 2,000 with nothing and get the correct page. So

5:09 Demo: Initial Application

5:09 does it work? Well, it does. On our command line, we're currently running our spin build dash dash up command, which will build this and spin up our project. We can pop off into our browser where I have a split tab configured. On the top, we have our spin and front end application. Well, at least our front end application, which will talk to our back end application. And we have Google Translate. Here, I've asked it to to hello to Estonian, which we can copy and paste. And if we had determined language, our application, after speaking to OpenAI, tells us that this

5:45 is Estonian word meaning hello or hi. Let's choose one more language. This time, we'll pick Italian where we'll copy ciao, paste, and determine. And it tells us Italian. Perfect. So let's take a look at the back end and then we'll look at upgrading the front end. If we pop open Versus Code, we'll have our index dot j s for the back end service. Here, we have an asynchronous function called handle request where we consume through the Spin SDK config object our OpenAI token. This is provided through Spin config. Spin config just means any environment variable on a host

5:59 Backend Code Walkthrough

6:22 that starts with Spin underscore config underscore the config key will be projected into the spin runtime. If I jump to the command line and run dart n hello, you'll see that my ENVRC has a spin underscore config underscore open a I underscore token. The spend runtime collects this and makes it available on the config object, all because of the things that we've seen earlier in the spend dot toml. Now because currently our front end application is just using a very simple form with a method post. We're going to receive that as a URL search param on

6:57 the body object. So we can consume the request dot text, which means get the body as text and store as query string. We can then use URL search params to parse that to get our form data. From here, we're just using the standard fetch API where we send a request to OpenAI. Method post with the correct headers for authentication and content followed by a JSON string for our body. Here, we provide to the model that we want to use, the message which contains a role and content. For us, the role is user and the content is just a prefix that says what

7:32 language is this? Followed by end quotes, farm data get text. You can set the temperature to adjust the way that OpenAI handles the request. This is not a video in OpenAI, so I'm not going to go in that in any further detail today. Next, we can await the response and parse it as JSON, meaning we can send a response with an HTTP 200 and our body where we encode data choices, first result message content. That might seem a bit complicated. It's just because OpenAI returns multiple choices or options for you to select from. We're always going to select the first. We're

8:06 always going to select the message and the content. We're not worried about the role, the temperature or anything else that OpenAI returns. And we have to encode this because this is WebAssembly and we have to spit it back out correctly for the consuming browser. And that's it. So hopefully this gives you a taste of something that you can build with Spin, with multiple components, with third party services and secret tokens. But let's improve our vanilla HTML. Here, I'm going to do a p n p m create astro at latest. This is gonna guide us through

8:34 Setting up Astro Project

8:38 the astro website creation process. From here, we get this a name for our project and I'm going to call this front end v two. I'm going to use the blog template just so that you can see all the astro stuff just works even though we're pushing in our own piece of HTML. So let's just give that a moment. We'll install the dependencies and if you want, you can choose to use JavaScript or TypeScript. So let's say yes to TypeScript, restrict to statin and no, we don't need a GET repository. So let's pop in to front end v two where we can run

9:09 Building Astro and Updating Spin Config

9:09 a PMPM run build. This is gonna create a dist directory with all of our front end assets, HTML, JavaScript, and so forth. So let's pop back here and pop open our spin dot toml. We can modify our source to be front end v two dist, which will serve our correct assets. If we pop back over to the terminal, we can run spin build up. Let's pop open our browser and refresh the top. And now we have our ASTRO website, which is very zoomed in, but here we go. So let's make a change to the ASTRO homepage.

9:46 Customizing Astro Content

9:48 So let's open index.ASTRO. From here, we can change hello astronaut to be hello spin fans. You now do more astro like stuff such as including style tags. The reason you're probably wanting to use some sort of front end framework is to make your front end life easier. So just let it do that. Here, we can say color red and we'll add Rawkode where the color is blue. We can now come down to here and see that we don't have an h two. So let's create one. This should be red. And we'll also add class equals Rawkode.

10:26 Two, that this template comes with a few integrations line. Now, if we're emphasizing here that we're just working on Astral land doing Astral things. So let's go back and we'll build our Astro site one more time. This compiles it and creates our static HTML inside the desk directory. We can then relaunch our Spin application and give that just a moment to become healthy. Now if we pop back over here and refresh, we have spin fans, red and blue. This is just to show you that when you work with front end frameworks and spin applications, you don't need to compromise. You can take

10:35 Rebuilding and Demoing Updated Astro

11:04 advantage of React, Fail, Astro, whatever you like. Build a workflow that works for you and consume it with the Spin Fail server. But of course now, we wanna hook this back up to our API. So let's go back to Versus Code and we'll go into our front end and just copy the form that we had before. And we're just gonna replace our h two and drop it straight in like so. Now this should just work because it's just a simple form that sends a post request to the API endpoint. But we do need to run build one

11:13 Integrating Form into Astro Site

11:38 more time followed by spin up. And now we can come back. We have refresh and we have our form. We can select a new language. Let's go with Thai. We can copy, paste, and determine. And this is the Thai language. Perfect. And that's it for today's short tutorial. You can write spin applications in your language of choice. They get compelled to WebAssembly. They're easy to run locally and you could deploy to Fermion Cloud. You don't need to throw away all your favorite front end frameworks or other tools because they're quite easy to integrate web the spin framework. By just modifying one or

11:55 Conclusion

12:14 two lines in the spin.toml, you can grab your statically generated site, serve it via WebAssembly module directly to your customers. I hope this gives you some inspiration for things you can try out with Fermion Spin. So go do that and let me know in the comments what you get up to. Have a great day.