Client-Side Development

Deploying Client-Side Applications

---

Here, we look into building and deploying a Svelte application as a static site. The term static site refers to a website that is served as-is, without any server-side processing.

It is possible to also deploy Svelte applications so that parts of the content are rendered on the fly on the server, but it is outside of the scope of the present course.

Adding a static adapter

First, in the client folder of the walking skeleton — or your svelte project — modify the package.json file to include the dependency @sveltejs/adapter-static. Place the dependency in the area of “devDependencies”, e.g. as follows.

//...
  "devDependencies": {
    // ...
		"@sveltejs/adapter-auto": "^3.0.0",
		"@sveltejs/adapter-static": "^3.0.0",
		"@sveltejs/kit": "^2.0.0",
    // ...
  }
// ...

Then, run the command deno install --allow-scripts in the client folder. This downloads the adapter to the local machine.

With the adapter installed, modify the file svelte.config.js to include the adapter. Previously, the first line of the file was as follows.

import adapter from '@sveltejs/adapter-auto';

Now, change the first line to the following.

import adapter from '@sveltejs/adapter-static';

This tells Svelte to use the static adapter for building the application. The remaining of the configuration is the same as before.

Setting all pages to be statically generated

Next, create a file called +layout.js to the src/routes folder, and place the following line to the file.

export const prerender = true;

This instructs Svelte to pre-render all pages, which means that the pages are generated as static HTML files that can be served as-is.

Building the application

To build the application, run the command deno run build in the client folder. This creates a build folder in the client folder, which will contain the application as a static site.

Note that when running the command deno run build again, you might need to delete the build folder first.

Deploying the static site

Now that the application is built, we can use Deno deploy to deploy the site. If you have not looked into how server-side applications are deployed with Deno deploy, look first into the chapter on deploying web applications in the part on server-side development.

To proceed, you need to have the Deno deploy CLI installed.

With Deno deploy CLI installed, you can deploy the site by first going to the build folder. Then, in the build folder, run the following command, replacing “my-project-name” with the name of the project you wish to use.

deployctl deploy --project=my-project-name https://jsr.io/@std/http/1.0.9/file_server.ts

Make sure that you are in the build folder that contains the generated site when running the command.

The command deploys the project Deno deploy, and uses Deno’s existing static file server functionality to server the project files. Once the deployment is finished, the application can be accessed at the address https://my-project-name.deno.dev.

As an exaple, the todos application that we have worked on earlier is deployed at the address https://wsd-2024-todos.deno.dev. You can access the deployed application to see how it works.

Loading Exercise...