Svelte SPA workspace setup guide

Step 1: Scaffolding

Based on svelte-spa-router-template, run the following command:

npx degit ItalyPaleAle/svelte-spa-router-template my-project

When the script finishes, navigate into your project directory and install the dependencies:

cd my-project
npm install

Step 2: Integrate Component SDK

To integrate the Component SDK in the workspace, run the following command:

npm install -D @ixon-cdk/core @ixon-cdk/runner

Step 3: Generate IFrame wrapper component

Now that the workspace is correctly set up to run IXON Component SDK commands, run the following command to generate a component:

npx cdk generate my-component

Choose the IFrame wrapper template.

Step 4: Configure Vite

In the vite.config.ts file you must add the following lines to set a new base and build.outDir for the vite build:

  import { defineConfig } from 'vite'; 
  import { svelte } from '@sveltejs/vite-plugin-svelte';

  // https://vitejs.dev/config
  export default defineConfig({
+   base: './',
+   build: {
+     outDir: 'components/my-component/dist'
+   },
    plugins: [svelte()],
  });

Step 5: Build and Simulate

You can now build the vue app and simulate it through the iframe wrapper component, by running these two commands:

npx vite build --watch
npx cdk simulate my-component

Step 6: Component Context

Within the Svelte app you can access the component context by importing the getComponentContext function which returns a Promise that resolves with the component context instance.

import { onMount } from 'svelte';
import { getComponentContext } from '@ixon-cdk/iframe-adapter';

onMount(async () => {
  const context = await getComponentContext();
});