imageimage

sveltekit-modal

Write Python endpoints in SvelteKit using Modal.

Why

  • Start deploying Python endpoints in just a few steps
  • GPU support for an entire ML Stack in your SvelteKit app
  • Integrates completely, write +server.py just like your +server.js files
  • Deploy the rest of your app anywhere, with SvelteKit's adapters for Vercel, Netlify, Cloudflare, etc.
  • Serverless Python with ease

Add to your SvelteKit project

  • Open a new or existing SvelteKit Project
  • Install npm i -D sveltekit-modal
  • Sign up for modal.com, the serverless python platform. All users get $30 free monthly credits!
  • Update vite.config.js
    import { sveltekit } from '@sveltejs/kit/vite';
    import { defineConfig } from 'vite';
    
    import { sveltekit_modal } from 'sveltekit-modal/vite'; //Add this import
    
    export default defineConfig({
        plugins: [sveltekit_modal(), sveltekit()] //Add the `sveltekit_modal()` plugin
    });
    
  • Update svelte.config.js
    import adapter from '@sveltejs/adapter-auto';
    import { vitePreprocess } from '@sveltejs/kit/vite';
    
    /** @type {import('@sveltejs/kit').Config} */
    const config = {
        preprocess: vitePreprocess(),
        kit: {
            adapter: adapter(),
            moduleExtensions: [".js", ".ts", ".py"] //Add this line, to resolve +server.py endpoints
        }
    };
    
    export default config;
    
  • Create sveltekit_modal_config.py. The option stub_asgi is passed to Modal. This is where you can define GPU acceleration, secrets, and an Image for pip installs, etc. Explore their docs!
    import modal
    
    config = {
        'name': 'sveltekit-example',
        'log': False,
        'stub_asgi': {
            'image': modal.Image.debian_slim()
        }
    }
    
  • Update .gitignore, add !.env.production.
  • Write your endpoints! See an example here.

Use

  • Develop like a normal SvelteKit app, just npm run dev
  • Deploy all your python endpoints with one command, just npx sveltekit-modal deploy

Examples

The example_app/ directory contains an incredibly bare and demonstrates how to get it working.

Top categories

svelte logo

Want a Svelte site built?

Hire a Svelte developer
Loading Svelte Themes