CODEWITHSUNDEEP
javascriptsveltesveltekit
Djent
Djent

Reputation: 3467

Building svelte app as a set of static files

I want to use Svelte in my next project, due to its clean syntax and how nice is to work in it. Unfortunately, to deploy the app in my company I can't use node or anything like that on the server. I can only serve the app from nginx as static files.

Is it possible in svelte? I can't find anything that would allow me to do that, all solutions I've tried like @sveltejs/adapter-static didn't seem to generate it correctly to use it in this way. I can't find any guide on how to do that on the web.

Upvotes: 17

Views: 17666

Answers (3)

isapir
isapir

Reputation: 23503

In order to pre-render a SvelteKit 1.0 static site you need to:

  1. Install the static adapter with npm i -D @sveltejs/adapter-static

  2. Put the following in svelte.config.js

/**
 * from https://kit.svelte.dev/docs/adapter-static
 */
import adapter from '@sveltejs/adapter-static';

export default {
    kit: {
        adapter: adapter({
            // default options are shown. On some platforms
            // these options are set automatically — see below
            pages: 'build',
            assets: 'build',
            fallback: null,
            precompress: false,
            strict: true
        })
    }
};
  1. Add to devDependencies in package.json (you can remove the default adapter-auto):
    "@sveltejs/adapter-static": "next",
  1. Add the following line to src/routes/+layout.js - create the file if it does not exist:
    export const prerender = true;
  1. Run npm run build

The static files will be generated in the build directory.

More details at https://kit.svelte.dev/docs/adapter-static and https://github.com/sveltejs/kit/tree/master/packages/adapter-static#sveltejsadapter-static

Upvotes: 13

T.J. Crowder
T.J. Crowder

Reputation: 1074276

I think Libertas' answer posted a couple of weeks after this is most likely what you're looking for.

But I'll leave the below here anyway in case it's useful to you or someone else coming along later:

SvelteKit (from the Svelte core team) supports server-side rendering, and documents generating static sites:

Static Sites

Most adapters will generate static HTML for any prerenderable pages of your site. In some cases, your entire app might be prerenderable, in which case you can use @sveltejs/adapter-static@next to generate static HTML for all your pages. A fully static site can be hosted on a wide variety of platforms, including static hosts like GitHub Pages.

(my emphasis)

Upvotes: 2

Libertas
Libertas

Reputation: 408

If you aren't using SvelteKit, you can just copy contents of /build/ generated by npm run build. This should work.

Upvotes: 7

Related Questions