https://serverless-stack.com/ logo
#guide
Title
# guide
c

Clayton

09/10/2021, 2:47 PM
Is anyone using Svelte with SST yet? I’m trying to connect a Svelte frontend via the
StaticSite
construct and curious how to connect env variables – • Do you still need to leverage the `@serverless-stack/static-site-env`` package? • How are you calling env vars within Svelte files - do you need to connect them via an exported props first? Thanks
t

thdxr

09/10/2021, 2:48 PM
It should "just work" if you use static-site-env for local development and specify the
environment
prop on StaticSite
what build server are you using, vite?
Depending on your build server they expose environment variables in different ways. Vite for example it shows up in
import.meta.env.VITE_MY_VARIABLE
c

Clayton

09/10/2021, 3:05 PM
Thanks @thdxr It is Vite and that reminds me there’s some wierdness there to account for in Svelte - https://kit.svelte.dev/faq#env-vars
The workaround they currently suggest of importing vars via a separate module still seems to be falling short when trying to connect to the StaticSite env outputs - https://timdeschryver.dev/blog/environment-variables-with-sveltekit#the-workaround
I’m currently - • using
static-site-env
and prefacing the svelte-kit npm scripts with
sst-env --
• exposing the vars in the StaticSite
environment
prop • capturing these in a JS module and importing them into the Svelte frontend (via approach shown in link above) • have tried also prefacing var names with
VITE_
and the vars are still showing up as undefined 🤔 Not sure yet if the vars not getting exposed is a Svelte/Vite issue or if I’m not getting them out of StaticSite/SST correctly?
@thdxr when you have a moment, could you help me better understand the role
static-site-env
plays in this? Is it only used to connect vars during dev or should it also be wired up to the build scripts too?
f

Frank

09/10/2021, 6:03 PM
Hey @Clayton, when
environment
is configured in StaticSite ie.
Copy code
environment: {
  API_URL: api.url,
}
sst start
will auto-generate a mapping file inside
.build
folder with the env var name
API_URL
and the deployed env var value
https://…
Then when you wrap ur script with
sst-env --
, all it does is: 1. look up the mapping file; 2. set the environment variables, ie.
API_URL
in this case; 3. spawns a child process to run the wrapped script
People usually just wrap their
start
scripts.
c

Clayton

09/10/2021, 6:18 PM
Thanks @Frank
f

Frank

09/10/2021, 6:21 PM
For building, you should configure a
buildCommand
for StaticSite. It will handle the replacement for you.
c

Clayton

09/10/2021, 7:23 PM
@Frank I have this added for the StaticSite
buildCommand
-
Copy code
const site = new sst.StaticSite(this, "SvelteSite", {
      path: "frontend",
      buildOutput: "build",
      buildCommand: "npm run build",
      ...
Do you mean that with this you don’t need to use
static-site-env
(and preface the package.json scripts with
sst-env --
) or that should still be done as well?
t

thdxr

09/10/2021, 7:34 PM
I currently use vite with staticsite
c

Clayton

09/10/2021, 7:35 PM
Well, not to look a gifted horse in the mouth, but after coming back to this later and restarting everything – env vars are now working correctly. Here’s what I had to for Svelte, for anyone else who stumbles on this later – • install
@serverless-stack/static-site-env
package (as a dev dependency) • update SvelteKit’s package.json dev script to
sst-env -- svelte-kit dev
• expose vars within the StaticSite contruct’s
environment
property as documented in SST docs • preface all var names with
VITE_
(e.g. APP_API_URL becomes VITE_APP_API_URL) to make them available to SvelteKit • create a new .js module file that exports variables (example) • import module into any Svelte file that needs access to variables (see example above) • if you update vars or var names (e.g. adding VITE_ prefix) must restart SvelteKit server in addition to rebuilding any SST infrastructure
t

thdxr

09/10/2021, 7:35 PM
let me find anexample
yep you got it