I'm trying to deploy a StaticSite along with my other stacks. I've been using

sst-env

to pull in dynamically generated values for my site, which works perfectly with

sst start

(and running my static site in a local HTTP server). However, when I try to use

sst deploy

, the static site tries to build and fails because it can't find the SST Outputs file (since it doesn't exist until the end of the stack deployment) and so the static site deploy fails. I'm kind of in a catch-22 situation, since I need to have those values in order to build & deploy my static site stack, but they don't exist yet until the stacks have all completed. Is there a way to tell SST to generate the env outputs file before running the StaticSite Stack so

sst-env

can find it? Am I thinking about this wrong? Do I need to built my StaticSite first with

sst start

running, then deploy without having the StaticSite construct run the build command?

You don't need

sst-env

in prod.

@manitej Right, but don't I need it for the build process in order to generate the static HTML to then deploy to S3...

I'm not sure exactly, but i think you can use a script to load env while building.

Yeah, that's sst-env, but it gets the values from the SST outputs file in .build, which isn't generated yet in this process. I want to know if I need to write my own script that gets the values from a more durable source like one generated from --outputs-file, or if there's a way to utilize the out-of-the-box sst-env util (or something else)...

You can try something like this maybe,

const { writeFile } = require('fs');

const targetPath = `./src/environments/environment.ts`;

const environmentFileContent = `
export const environment = {
  production: ${false},
  API_URL:  "${process.env['DEV_API_URL']}",
};
`;
// write the content to the respective file
writeFile(targetPath, environmentFileContent, function (err: unknown) {
  if (err) {
    console.log(err);
  }
  console.log(`Wrote variables to ${targetPath}`);
});

Thanks for the example. That's pretty much what I want to figure out... if I need to roll my own solution for this, or if there's already something built to handle it.

The issue here is the values are not available at build time

I do need them at build time... I need them to replace the process.env.VARIABLE in the static code. How can I create a static site that is built with the dynamic values inserted?

That replacement happens on our end

Ok... I'll give it a try and report back. Thanks!

Incase you're using angular, this example loads env from script. https://github.com/Manitej66/serverless-stack/tree/angular-app/examples/angular-app

@thdxr That worked! I'm always astonished by the amount of pure magic in SST. Thanks for the help!

@manitej @Frank can that angular example get merged?

@Jon Holman will do!

@manitej that angular example you shared above works for local dev, but I cannot deploy to stage, I get errors. Were you able to deploy it to the prod stage?

I will going to merge the example and I will give it a try.

@Frank with @manitej and @thdxr help I got this working. It was several things I did not realize as I was adding more AWS services (cognito and s3).

Oh nice! 👍

I just shared it in #general. https://github.com/JonHolman/sst-angular-s3-file-explorer