Better examples of using this as an NPM import?

[hammzj]

I have been struggling getting this to work as an NPM package where I'm constantly getting a "bind does not exist on undefined" warning or similar. I suppose this is because it wants to immediately mount to the window on import, which limits how it can be used.

Mainly why I want to use it as an NPM package is for two reasons:

1. Limit outside dependencies on unpkg where I can bundle the CMS with the source code
2. Control the config to set it for local or test purposes, so I can automate tests of content creation.

What I understand is that the only way to do this is by injecting a script into the body of the html where I import the package there, but it makes it difficult to control the config.

So, just wanted to drop in and see if anyone had any success with this, or had examples, especially with Vite or SvelteKit? Ultimately, it would be creat if this could be launched as a Vite plugin or a separate SvelteKit page.

[hammzj]

Actually, I think I may have figured out what was going on. I got this to work within a SvelteKit page where my configuration is stored as a JS file, which is so I can change between using a real and test repo if I'm in dev or prod mode.

Basically, SSR needs to be disabled for that route so the entire thing is client-side rendered. Since server rendering does not have a window object, it was failing to attach to the page, but disabling it worked just fine.

---

Here’s how I did it.

/routes/(admin)/admin/+page.ts

export const ssr = false;

/routes/(admin)/admin/+page.svelte

<script lang="ts">
	import CMS from '@sveltia/cms';
    //CMS config exists in my lib as a JS file
	import { config } from '$lib/sveltia-cms.config';

	CMS.init({ config: { load_config_file: false, ...config } });
</script>

<svelte:head>
	<meta charset="utf-8" />
	<meta name="robots" content="noindex" />
	<title>Sveltia CMS</title>
</svelte:head>
<div id="nc-root"></div>

---

That is how I can prerender the remainder of my app on the server while allowing the CMS to be a client-side rendered single page app.

Might want to call it out in the docs when using for SvelteKit.

[Greenheart]

@kyoshino Would you accept a documentation PR to add this to the SvelteKit framework page?

Nevermind, I read the contributing guidelines again, and think the docs site is private for now (?).

I will probably write a blog post about this instead for now.

[kyoshino]

I’ll add it to the doc shortly.

[Greenheart]

Thanks!

I wrote a quick summary describing why and how this approach works for SvelteKit in one of my FOSS projects - you can use this text for the documentation if you want! 😊

[Greenheart]

In my project, I even managed to get it working without the root container.

- <div id="nc-root"></div>

To keep the CMS compatible with as many SvelteKit-projects as possible, I would:

1. Keep the #nc-root wrapper in the default code example
2. Maybe: Mention that #nc-root can be removed if you set up layout groups carefully to remove all CSS, JS and HTML from the /routes/(admin)/admin/+page.svelte route, so the CMS can take full control. Otherwise you might get inconsistent styles.

[vadimkantorov]

I did sth very similar for my Astro project (with Sveltia npm version pinned in package.json)