How to share a store between 2 SSR svelte apps

March 21, 2021 ~ 2 min read

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-->

<script>
    import { store } from './store.js'
</script>

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

<script>
    import { store } from './store.js'
</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.js

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.