Svelte Anywhere Docs

Appearance

Backend Integration ​

There are several ways of adding files generated by Svelte Anywhere to your project

Plugins ​

  • A lot of ready to use Backend Integrations can be found on Awesome-Vite

Manual ​

Development ​

Dev Environment is pretty easy. All you have to do is to add the vite client script and your entrypoint script to the head section of your page:

html
<head>
   <script type='module' src='http://localhost:5173/@vite/client'></script> 
   <script type="module" src="http://localhost:5173/src/main.ts"></script>  
</head>

Production ​

Since we moved our entrypoint of our svelte components away from the index.html, into the main.ts, the compiler can no loger inject our entrypoint into our index.html. So we have to figure out, where to get our Svelte-App. It's a little complex, but it has a lot of advantages, like cacheable filenames and javascript chunks, that get loaded when needed.

First you define your output-directory in your vite config. If you already have a directory that's served public, choose that.

ts
build: {
    manifest: true,
    rollupOptions: {
        input: './src/main.ts',
    },
    outDir: '../public/svelte',
    emptyOutDir: true,
}

Next run npm run build once. It will create the folder, generate some js and css files and also a .vite folder. Inside you will find a manifest.json file, with all the files listed. You will need the "src/main.ts" file and css entries.

An example looks like this:

json
...
 "src/main.ts": {
    "file": "assets/main-DxdvDsYZ.js",
    "name": "main",
    "src": "src/main.ts",
    "isEntry": true,
    "dynamicImports": [
      "src/lib/shared/Switch.svelte",
      "src/lib/PokemonWidget.svelte",
      "src/lib/ShadowCounter.svelte",
      "src/lib/shared/Translator.svelte",
      "src/lib/Counter.svelte"
    ],
    "css": [
      "assets/main-CliQUYpN.css"
    ]
...

And now comes the hard part: Find a way to parse the manifest file and extract those infos. Then, for production, add the js-entry (src/main.ts) and prepend it with your public subdirectory (in this example /svelte).

Do the same for the css-file-entries for the entrypoint file. It's an array, so loop over it.

Examples ​

PHP ​

php
$useVite = false;
if ($applicationVersion === 'development') {
    //test connection to  vite, no need to throw warning
    $fp = @fsockopen('tcp://localhost', 5173, $errno, $errstr, 1);
    if ($fp) {
        $useVite = true;
    }
}

if ($useVite) {
    echo
    <<<HTML
        <script src="http://localhost:5173/svelte/@vite/client" type="module"></script>
        <script src="http://localhost:5173/svelte/src/app.ts" type="module"></script>
    HTML;
} else {
    $manifest = file_get_contents(PROJECT_ROOT . '/public/svelte/.vite/manifest.json');
    $manifest = json_decode($manifest, true); //decode json string to php associative array
    $svelteJs = "/svelte/" . $manifest['src/app.ts']['file'];
    $svelteCssFiles = $manifest['src/app.ts']['css']; //there are multiple
    echo "<script src='$svelteJs' type='module'></script>";
    foreach ($svelteCssFiles as $file) {
        echo "<link rel='stylesheet' href='/svelte/$file' type='text/css'>";
    };
}
?>