How to deploy Svelte (plain SPA) on Saplo

Svelte compiles components to pure JavaScript during the build process, without a virtual DOM loaded into the browser, so the resulting bundle is one of the smallest among popular frameworks. In the plain SPA variant (without SSR, without the SvelteKit framework), Svelte is built by Vite into a handful of static HTML, CSS, and JS files - exactly like React or Vue. On Saplo, you set up Svelte (plain SPA) identically to any other application from the catalog: the engine scaffolds the project, builds it with Vite, and exposes the ready-made dist directory under Nginx, without any Node process running in the background after the build.

Who is Svelte (plain SPA) on Saplo for?

Before you start the installation, check if it's the right choice for your project:

• You're building a client panel or dashboard - Saplo serves the ready build as static files, without its own Node process in the background.
• The frontend needs to connect to your own API - You're setting up SPA next to the backend (Django, Node, Docker) on the same Box or separately.
• You care about the smallest possible bundle - The Svelte compiler removes the framework from the resulting code, so the page starts faster than with libraries based on a virtual DOM.
• The project doesn't need server-side rendering - If you need SSR and better SEO, you'll find SvelteKit in the same directory.
• You want deployments with git push instead of manually transferring files via FTP - You link the repository once, and every push to the production branch builds and deploys a new version automatically.

If the project needs server-side rendering, file-based routing, or better SEO right out of the box, check the app catalog for the SvelteKit stack instead of plain Svelte.

Requirements

To set up Svelte (plain SPA) on Saplo, you will need:

• A Box on any plan, even an S is enough - a built SPA is just a handful of static files, with no process kept in memory after the build,
• A minimum of 256 MB of free RAM for the build process itself and 2 GB of disk space,
• A domain or subdomain *.saploapp.pl included in the price of every plan,
• A Git repository if you want automatic deployments (optional to start, you can also upload the application as an archive .zip via the panel).

Step-by-step installation

1. In the Saplo panel, go to Application Catalog and select Svelte (category "Applications", description "Lightweight SPA frontend").
2. Indicate the Box and the application name - this will be used to create the default subdomain <name>.saploapp.pl.
3. Select the Node.js version for the build (18, 20, or 22, default 20) and confirm the installation.
4. The engine scaffolds the Svelte skeleton via Vite (equivalent to npm create vite -- --template svelte), installs dependencies, and builds the project. The content of the dist directory is then placed directly into the application directory, served by nginx.
5. After the installation is complete, the domain from step 2 will display the Vite + Svelte starter skeleton - from this moment on, you can deploy your own code to it.

Deploy your own code via Git

1. In the application details, find the Git / CI-CD section and click "Connect GitHub". Confirm the installation of the "Saplo Deploy" application and point it to your Svelte project repository.
2. The saplo.yaml file must be located in the root directory of the repository.
3. Commit and push the saplo.yaml file to the production branch (default is main).
4. Every subsequent git push to this branch builds the project and replaces the contents of the dist directory on your Box. You can see the status on the Deployments tab.
5. If the build fails, the previous working version remains in place - Saplo will not replace it with a broken one.

Example of a minimal saplo.yaml file for Svelte:

name: my-project
stack: svelte
build:
  install: npm ci
  command: npm run build
  output: dist

Svelte (plain SPA) on Saplo vs. Alternatives

FAQ

What's the difference between Svelte (plain SPA) and SvelteKit in the Saplo catalog? Plain SPA refers to static files without SSR and without a background Node process, built solely with Vite. SvelteKit is a full framework with optional SSR, running on Saplo as a long-lived process with automatic restarts.

Can I have multiple Svelte applications on one Box? Yes, the application catalog allows you to deploy many modules side-by-side, each with its own subdomain or domain.

I need SSR and better SEO - what should I choose? The SvelteKit stack from the same catalog - it's Svelte with full server-side rendering.

Do I get SSL and my own domain? Yes, the SSL certificate is automatic, and a domain or subdomain *.saploapp.pl is included in every plan.

How do I change the build output directory if I'm not using the default dist? Set the build.output field in saplo.yaml to the correct path.

With Svelte (plain SPA) on Saplo, you go from zero to a live domain in minutes, and the resulting bundle is one of the lightest among available stacks. If your project grows to require SSR, migrating to SvelteKit within the same catalog doesn't require changing your hosting.