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?

Hey @thdxr, currently the

environment

property is used in 3 places. For example, given this:

new ReactStaticSite(this, "ReactSite", {
  path: "path/to/src",
  environment: {
    REACT_APP_API_URL: api.url,
  },
});

1.

environment

is used to generate build environment variables

REACT_APP_API_URL="{{ REACT_APP_API_URL }}" yarn run build

2.

environment

is used to generate

replaceValues

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

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

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?

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:

_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,
        },
      ],

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?

I feel like I'd prefer something not specific to snowpack, there's other systems (vite, webpack, parcel, etc) that all operate this way

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?

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

Makes sense, yeah let’s move it to the

StaticSite

construct. @Frank says

sst-env

should work as well.

sweet 👍🏽