Blog

Go Back

Building separate folders with different adapters in SvelteKit

I wanted to create an NWJS SvelteKit template different from the one that edde746 made, that is capable of building the API and Frontend separately for NWJS to run. I was originally considering just using Tauri, but I was not ready to delve into the world of Rust just yet. I wanted to make it so that I am still in the same language regardless if whether I am in the frontend or backend, as I can enforce the same types for both of them.

So I tried creating one for myself. After a few hours of thinking through as to how I would integrate the backend and frontend in the same SvelteKit app itself, I suddenly remembered how SvelteKit exludes folders that are named with parenthesis:

So I thought, why not do that, and then in svelte.config.js, modify routes during building?

So I did that, and I now have this in my SvelteKit config:

$import { default as adapterNode } from '@sveltejs/adapter-node'; import { default as adapterStatic } from '@sveltejs/adapter-static'; import 'dotenv/config'; const NWJS_BUILD_STATIC = process.env.NWJS_BUILD_STATIC; const NWJS_BUILD_API = process.env.NWJS_BUILD_API; /** @type {import('@sveltejs/kit').Config} */ const config = { kit: { adapter: NWJS_BUILD_STATIC ? adapterStatic() : adapterNode(), files: { routes: NWJS_BUILD_STATIC ? 'src/routes/(main)' : NWJS_BUILD_API ? 'src/routes/(api)' : 'src/routes' }, alias: { $nw: 'src/nw' } } }; export default config;$

And in package.json, have these in your scripts:

${ "scripts": { "build:static": "set NWJS_BUILD_STATIC=1 && vite build", "build:api": "set NWJS_BUILD_API=1 && vite build", } }$

So if I want to build the static files in my SvelteKit app, I'll just do pnpm build:static, and when I want to build the API, I'll do pnpm build:api, then do further processing from there.

You may check the repo of this template here:

https://github.com/thisjt/nwjs-sveltekit-template

Keep in Touch!

Github

Stackoverflow