https://serverless-stack.com/ logo
#sst
Title
# sst
t

thdxr

07/25/2021, 12:23 AM
I'm having an issue with ReactStaticSite. I use Snowpack and not CRA so the variables there are supposed to be prefixed with
SNOWPACK_PUBLIC_
The ReactStaticSite rejects any env variabels not prefixed with
REACT_APP
My question is why does this construct have to be specific to CRA or even React? Shouldn't
StaticSite
also just support an
environment
option that is passed to the build command?
Currently working around it with
Copy code
replaceValues: [
        {
          files: "**/*.js",
          search: "import.meta.env.SNOWPACK_PUBLIC_API_URL",
          replace: api.httpApi.apiEndpoint,
        },
        {
          files: "**/*.js",
          search: "import.meta.env.SNOWPACK_PUBLIC_USER_POOL_ID",
          replace: user_pool.userPoolId,
        },
        {
          files: "**/*.js",
          search: "import.meta.env.SNOWPACK_PUBLIC_USER_POOL_CLIENT_ID",
          replace: user_pool_client.userPoolClientId,
        },
      ],
not ideal though
f

Frank

07/25/2021, 5:32 AM
Hey @thdxr, currently the
environment
property is used in 3 places. For example, given this:
Copy code
new ReactStaticSite(this, "ReactSite", {
  path: "path/to/src",
  environment: {
    REACT_APP_API_URL: api.url,
  },
});
1.
environment
is used to generate build environment variables
Copy code
REACT_APP_API_URL="{{ REACT_APP_API_URL }}" yarn run build
2.
environment
is used to generate
replaceValues
Copy code
replaceValues: [
   {
     files: "**/*.js",
     search: `{{ REACT_APP_API_URL }}`,
     replace: api.url,
   },
   {
     files: "index.html",
     search: `{{ REACT_APP_API_URL }}`,
     replace: api.url,
   }
]
3.
environment
is used to generate the
.build/static-site-environment-output-keys.json
file, which will be consumed by
sst-env
cli
So #3 is relevant to Snowpack. So if you were to do #1 and #2 manually, it’d look like this:
Copy code
new ReactStaticSite(this, "ReactSite", {
  path: "path/to/src",
  buildCommands: `REACT_APP_API_URL="{{ REACT_APP_API_URL }}" yarn run build`
  replaceValues: [
   {
     files: "**/*.js",
     search: `{{ REACT_APP_API_URL }}`,
     replace: api.url,
   },
   {
     files: "index.html",
     search: `{{ REACT_APP_API_URL }}`,
     replace: api.url,
   }
  ]
});
And you want the
environment
property to pretty much just do this, correct?
t

thdxr

07/25/2021, 12:36 PM
I don't need it to replace values because Snowpack will take care of that for me during the build step. I'm pretty sure CRA does that as well so it shouldn't need any replacing
I want 1+3
I found
_buildCommandEnvironment
with
sst.StaticSite
and was able to get it to do what I needed. If that's made more official and then output to
static-site-environment-output-keys.json
then my dreams all come true
....nevermind haha. I see how replace needs to be run as custom resource so the values are actually available. Now I get why the replacing is necessary
f

Frank

07/27/2021, 3:25 AM
Ah I see. Does Snowpack have an environment variable system like React, where you can use
SNOWPACK_PUBLIC_*
in html/js and then set the environment values at build time?
t

thdxr

07/27/2021, 12:11 PM
Yeah exactly and a lot of other frontend build systems have that concept as well so maybe it's worth collapsing the ReactStaticSite functionality into the base StaticSite. Here's what I did to get it working:
Copy code
_buildCommandEnvironment: {
        SNOWPACK_PUBLIC_API_URL: "{{ API_URL }}",
        SNOWPACK_PUBLIC_USER_POOL_ID: "{{ USER_POOL_ID }}",
        SNOWPACK_PUBLIC_USER_POOL_CLIENT_ID: "{{ USER_POOL_CLIENT_ID }}",
      },
      replaceValues: [
        {
          files: "**/*.js",
          search: "{{ API_URL }}",
          replace: api.httpApi.apiEndpoint,
        },
        {
          files: "**/*.js",
          search: "{{ USER_POOL_ID }}",
          replace: user_pool.userPoolId,
        },
        {
          files: "**/*.js",
          search: "{{ USER_POOL_CLIENT_ID }}",
          replace: user_pool_client.userPoolClientId,
        },
      ],
f

Frank

07/27/2021, 7:33 PM
Ah got it. Let me pull in @Jay. I think it makes sense to create a
SnowpackStaticSite
construct with sensible default for Snowpack. And ensure
environments
starts with
SNOWPACK_PUBLIC_
. What do you all think?
t

thdxr

07/27/2021, 8:10 PM
I feel like I'd prefer something not specific to snowpack, there's other systems (vite, webpack, parcel, etc) that all operate this way
My initial thought is adding this functionality directly to
StaticSite
j

Jay

07/27/2021, 8:39 PM
Yeah I think it doesn’t make sense to have something Snowpack specific. I think a construct for the frameworks like Vue or Angular makes more sense, as opposed to ones for the build systems. @thdxr what do you run to start your Snowpack app locally?
t

thdxr

07/28/2021, 1:12 AM
To run it locally I'm doing
yarn start
which maps to
snowpack dev
. Right now I'm using the last code snippet I sent to pass through environment variables to insert dummy values which then get replaced by the replacer. This works but I'd like to also be able to use
sst-env
for local development. Ultimately I don't think this is specific to a build system or a framework
j

Jay

07/28/2021, 2:26 AM
Makes sense, yeah let’s move it to the
StaticSite
construct. @Frank says
sst-env
should work as well.
t

thdxr

07/28/2021, 2:34 AM
sweet 👍🏽