deploy it with no problems. Let's add that. It should be called LC Svelket examples right here. Import that. You can see the framework is detected as Svelket. You can edit these settings if you like for build and output. The default is fine, and you can also specify your environment variables right here. So let's go ahead and do that for our weather API key. So it should be in our .env file. So let's add this key. And the value is the actual key. Let's add that. And that should be all the config we need. Let's go ahead and deploy the application. And that took about 20 seconds. Let's go ahead and visit it in the browser. So it deployed to lcsvelketexample.versell.app. And there's the application we created. So we should be able to visit all of our pages here. Let's check out our posts, the weather. That's correct. So it is pulling from our environment variable. And let's also check

So we should be able to visit all of our pages here. Let's check out our posts, the weather. That's correct. So it is pulling from our environment variable. And let's also check if our API endpoints work. So API/weather was one of our endpoints. It does work. So again, if you deploy to these platforms, it's actually making use of serverless functions. But if you need a traditional node server, you can do that as well with a node adapter. So let's take a look at that. So let's go back to the adapters documentation page. Let's scroll down to node.js. And we have to install the adapter node. So let's go ahead and do that. And we also have to configure a node server, which is a bit more work. But we'll make use of Laravel Forge to do that. So let me run this for npm install. Let's put it in our dev dependencies. And let's install the node adapter here. Okay, and now within our config, we have to change the adapter.

that. So let me run this for npm install. Let's put it in our dev dependencies. And let's install the node adapter here. Okay, and now within our config, we have to change the adapter. So back to rsvelteconfig.js, we just have to change this adapter to the node adapter. So let me just duplicate this, comment this out. And now we're going to use adapter-node. Okay, and you can specify certain settings here, but I'll just leave it to whatever is default. So let's save this. Now if we update our repo, our Vercel app is no longer going to work. Because like I said, Vercel makes use of serverless functions and does not support traditional node servers. So let's go ahead and push this up to our repo. So let's say git add, git commit, use node adapter. And let's go ahead and push that. And you'll see within Vercel that there should be an error now. So let's go back into Vercel.

So it's this one. Back down here, deployment script. So all it's doing is going into that folder, pulling from the GitHub repo, and then npm install everything. So we do have to add a step here to run the build command. So if you take a look at our package.json, we have this build command here, which generates the output that you need to put on the server. So in this case, it generates a build folder up here. Or in this case, I haven't run it yet. So there is no build folder yet. But let's do it locally first. So you can see the build folder that it generates, and we'll also run a local node server to see it working. So let's say npm run build. Okay, you can see it's done. And now you can see the build folder here. Now to run the actual node server in Next.js, there is a start command here within our npm scripts. But there's none within SvelteKit. So we have to do it manually. So to do that, we can just say

Okay, that should be done. And back to the article, it's going to say that we should see a 502 error because we're not running node yet. So let's go ahead and visit that site. We'll make use of this one here. So it was lcs felt get example, andré.demos.ca. And we do get that 502. So now we just have to make sure node is running and keeps running even though there are errors. So this article is making use of a daemon to do that. But you can also make use of something like PM2. So like I said earlier, it's making use of npm run start here. But in our case, we have to do what I showed you a second ago with node build. So let's do that. So we have to go to our daemons configuration within our server, and add that for the specific folder. So let's go ahead and do that back here. That should be within the server configuration. So andre.demos.daemons is down here. Let's go ahead and add that.

and add that for the specific folder. So let's go ahead and do that back here. That should be within the server configuration. So andre demos daemons is down here. Let's go ahead and add that. So the command is node build. The folder is this one, and everything else should be okay. So let's go ahead and create that. Okay, that should be active. Now let's go ahead and check the logs to make sure it's okay. And we do get the correct output. So back to the article, it should say after we do this, we should be able to visit our site. So if I go back here, hit refresh, we do get ours felt get application. But again, this is now running on a traditional node server. So again, let's just click through to make sure everything's okay. Looks like it is posts, weather. And we are not getting the weather because we do not specify

So again, let's just click through to make sure everything's okay. Looks like it is posts, weather. And we are not getting the weather because we do not specify our environment variables. But let's make sure the API endpoints work. Actually, that will work too, because we need the environment variable for that. So let's go ahead and grab that again. So back to our project. Let's go back to our .env. Let's copy this entire thing. And there is a section within Forge for environment variables. So let's go ahead and do that. So if you go back to the site configuration, you'll see a section here for environment. And you can just paste in your environment variables here. So let's add ours. Let's save. And we do have to deploy because part of the build process injects this API key into the actual code. So let's go ahead and deploy again.

the advantage of doing it this way is better performance, as you no longer need a node server to process your request. And it comes with the added benefit of being easy to host. The disadvantage is that some pages cannot be pre rendered like your API routes. So let's take a look at how we can statically generate our pages. So we have to make use of the adapter-static. So it's adapter-static here. So let's grab this. Let's make sure to install this. So let me stop this. That's npm install --save-dev @sveltejs/adapter-static. And we do have to add some configuration here. So back to our code. Let's go back to our svelte.config.js. So this is now static. So let's duplicate this adapter-static. So you have the option to pre render only certain pages. Or if you want to do the entire site, you have to add preRender: true right here. So preRender: true.

So you have the option to pre render only certain pages. Or if you want to do the entire site, you have to add preRender true right here. So preRender default true. So spelt code will try to statically generate HTML for all of your pages. Okay. And I also found that I needed this option to make it work correctly, trailingSlash, and set that to always. Now, if we run npm run build, it's going to generate a bunch of HTML pages for us within the build folder. So let's try that out. npm run build. Okay, that's done. If we take a look at the build folder, up here, you can see that it generated a bunch of static HTML pages corresponding to all of the pages in our app. So for example, about/index, here is our posts/index. And you can see it also generated one for our individual posts. So now if you want to preview this locally, we can say npm run preview. And this will look the same, but our pages are now

you can see it also generated one for our individual posts. So now if you want to preview this locally, we can say npm run preview. And this will look the same, but our pages are now statically generated into HTML files. So we click around, this should still work. But let's take a look at the weather page here. Before, when our app was dynamic, if I refresh the page a few times, you'll see that the weather actually fluctuated. But now, as I refresh, you'll see it's always the same. Because the HTML page was already pre rendered and generated, we are no longer getting dynamic data. So if I were to push this back to Vercel, it should work again, because we change the adapter again, and we are now making use of static sites. So let's push this up to Vercel, git add, git commit, change adapter to static. And let's make sure to push it. So git push origin main. And we are getting an error here. See what the error is.