Client-Side Installation

Once you have prepared server-side adapter, you will need to setup your client-side framework.

Install Dependencies

First, you need to install Vortex client:

npm install @westacks/vortex

Initialize Application

Next, initialize Vortex client and create your application root:

For Svelte 5, your entry file should have svelte.js extension and you will update your root props using $state rune:

app.svelte.js

import { createVortex, subscribe, install } from '@westacks/vortex';
import { core } from '@westacks/vortex/extensions'
import { props as getProps } from './setup';
import { mount, hydrate } from 'svelte'
import App from './App.svelte';

createVortex(async (target, page, ssr) => {
    const props = $state(await getProps(page))
    const h = ssr ? hydrate : mount

    h(App, {target, props})

    install(core())
    subscribe(async (page) => Object.assign(props, await getProps(page)))
})

Or in case you use older version of Svelte, you can use legacy class component syntax:

app.js

import { createVortex, subscribe, install } from '@westacks/vortex'
import { core } from '@westacks/vortex/extensions'
import { props } from './setup'
import App from './App.svelte'

createVortex(async (target, page, hydrate) => {
    const app = new App({ target, props: await props(page), hydrate })

    install(core())
    subscribe(async (page) => app.$set(await props(page)))
})

You will need to resolve page component, using your bundler's API. We will provide example for Vite as most popular, but code below may differ depending on bundler you are using.

setup.js

export const props = async (page) => {
    const pages = import.meta.glob('./pages/**/*.svelte')
    const component = (await pages[`./pages/${page.component}.svelte`])?.default

    return { component, props: page.props ?? {} }
}

App.svelte

<script>
    export let component, props
</script>

{#if component}
    <component this={component} {...props} />
{/if}

After that you may start creating components in ./pages directory. Each time vortex initiates page change, it will resolve corresponding component, provide it with props and render it.

You are not glued to use app structure provided above, so you may modify it as you wish for your use-cases (layouts, loading states, etc).

Server-Side Rendering

Optionally, you can setup bundle for server-side rendering (SSR), which can be utilized by your server to pre-render pages of your application:

Svelte 5

ssr.js

import { createVortexServer } from '@westacks/vortex/server'
import { render } from 'svelte/server'
import { props } from './setup'
import App from './App.svelte'

createVortexServer(async (page) => {
    const {html, head} = render(App, {props: await props(page)})

    // You should return data type, that compatible with your server API
    return {body: html, head}
})

Svelte (legacy)

ssr.js

import { createVortexServer } from '@westacks/vortex/server'
import { props } from './setup'
import App from './App.svelte'

createVortexServer(async (page) => {
    const {html, head} = App.render(await props(page))

    // You should return data type, that compatible with your server API
    return {body: html, head}
})

Using SSR bundle

SSR bundle takes page data as input and returns pre-rendered HTML strings based on your client-side logic. You will need a JavaScript runtime configured on your server to use it:

Server Mode

node ./dist/ssr.js

curl -X POST http://localhost:13714/render \
    -H 'Content-Type: application/json' \
    -d '{"component":"Page","props":{},"url": "/","version":"..."}'

CLI Mode

node ./dist/ssr.js '{"component":"Page","props":{},"url": "/","version":"..."}'