March 21, 2021 ~ 1 min read

How to share a store between 2 SSR svelte apps

By default, when you have 2 Svelte apps that are server-side rendered, they won’t share a store. So let’s take a look into how to solve this.

Basket example:

Basket.Svelte javascript

<script lang="ts">
    import {store} from './store'
</script>

{#if $store.showBasket}
    <div id="overlay" on:click={() => ($store.showBasket = !$store.showBasket)} />
    <div id="shopping-basket" />
{/if}

BasketButton.Svelte javascript

<script lang="ts">
    import {store} from './store'
</script>

<button on:click={() => ($store.showBasket = !$store.showBasket)}> The button </button>

We want both of the apps to have control over when to display the basket.

When clicking the overlay of the basket
When clicking the button

Here’s how to make it work:

store.ts typescript

import {writable} from 'svelte/store'

function createStore() {
    return writable({showBasket: false})
}

function getStore() {
    if (typeof window === 'undefined') return createStore()
    window.store = window.store || createStore()
    return window.store
}

export const store = getStore()

We get the store from the window, and if it doesn’t exist we create a new store and attach it to the window.