https://serverless-stack.com/ logo
Join Slack
Powered by
Is anyone using Svelte with SST yet? I’m trying to...
# guide
c
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
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
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
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
Thanks @Frank
f
For building, you should configure a 
buildCommand
for StaticSite. It will handle the replacement for you.
c
@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
I currently use vite with staticsite
c
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
let me find anexample
yep you got it
Open in Slack
PreviousNext
Powered by