Deploy a Svelte site.

Svelte is an increasingly popular, open-source framework for building user interfaces and web applications. Unlike most frameworks, Svelte is primarily a compiler that converts your component code into efficient JavaScript that surgically updates the DOM when your application state changes.

In this guide, you will create a new Svelte application and deploy it using YouAppz sitez. You will use SvelteKit, the official Svelte framework for building web applications of all sizes.

Note: At this guide's time of publication, SvelteKit is still in beta. However, the Svelte team is confident that the steps below are stable. This guide will be updated as needed, both during and after the beta phase.

Setting up a new project

Create a new project by running the npm init command in your terminal, giving it a title:

$ npm init [email protected] my-svelte-app 

During init, SvelteKit will prompt you for customization choices. Your answers will not affect the rest of this tutorial. Choose the option that is ideal for your project.

SvelteKit Configuration

By default, SvelteKit prepares our project with the assumption that it will deployed to a Node.js server. This is not appropriate for this tutorial, but luckily SvelteKit is flexible and has a ready-made "adapter" for your needs. A few, easy changes have to be made.

First, install the @sveltejs/adapter-static package:

$ npm install @sveltejs/[email protected] --save-dev

Then, in the svelte.config.js file, update the adapter selection:

++ import adapter from '@sveltejs/adapter-static';
++
/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
++ adapter: adapter(),
  // ... truncated ...
  target: '#svelte'
  }
}; export default config;

Deploying with Youappz Sitez

Deploy your site to Sitez by running the following commands

# Enter the new directory
cd my-svelte-app
# build the site
npm run build
# deploy to youappz
appz create -n my-svelte-app
appz deploy -d build

In less than 30 seconds your website will be deployed to an https URL on our global CDN.

For the complete guide to deploying your first site to YouAppz Sitez, refer to the Get started guide.

After deploying your site, you will receive a unique subdomain for your project on *.sitez.live. Every time you deploy your Gatsby site, Youappz Sitez will automatically rebuild your project and deploy it. You will also get access to preview deployments on every deploy, so you can preview how changes look to your site before deploying them to production.

Updated at Mon, Jan 24, 2022