Svelte SPA workspace setup guide
Svelte SPA workspace + Component SDK + IFrame adapter
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();
});
Updated 2 months ago