https://serverless-stack.com/ logo
Join Slack
Powered by
what does `npx sst deploy --stage test` run in the...
# help
j
what does 
npx sst deploy --stage test
run in the frontend directory? Can someone point me to the code for 
sst deploy
?
t
can I see your site definition in your stacks code?
j
Copy code
const site = new sst.StaticSite(this, "AngularSite", {
      path: "frontend",
      buildOutput: "dist",
      buildCommand: "ng build --output-path dist",
      errorPage: sst.StaticSiteErrorOptions.REDIRECT_TO_INDEX_PAGE,
      // Pass in our environment variables
      environment: {
        ANGULAR_APP_REGION: scope.region,
        ANGULAR_APP_BUCKET: bucket.bucketName,
        ANGULAR_APP_USER_POOL_ID: auth.cognitoUserPool.userPoolId,
        ANGULAR_APP_IDENTITY_POOL_ID: auth.cognitoCfnIdentityPool.ref,
        ANGULAR_APP_USER_POOL_CLIENT_ID:
          auth.cognitoUserPoolClient.userPoolClientId,
      },
    });
from my testing, it seems like its only building for start, not for deploy
t
For sst start we don't do anything with the build command. We assume you're running your frontend locally in a different way
For sst deploy we run the command and upload what's in 
buildOutput
to s3
j
thanks, yeah, I did some testing and I see that. Now my issue is the environment variables are not being passed to my build. They work for sst start, but not for build. How do I get them into the build?
start has 
sst-env -- npm run config
but if I add that to build I get an error
I changed my build command to:
Copy code
const site = new sst.StaticSite(this, "AngularSite", {
      path: "frontend",
      buildOutput: "dist",
      buildCommand: "echo ANGULAR_APP_REGION $ANGULAR_APP_REGION && echo ANGULAR_APP_BUCKET $ANGULAR_APP_BUCKET && npm run build",
      errorPage: sst.StaticSiteErrorOptions.REDIRECT_TO_INDEX_PAGE,
      // Pass in our environment variables
      environment: {
        ANGULAR_APP_REGION: scope.region,
        ANGULAR_APP_BUCKET: bucket.bucketName,
        ANGULAR_APP_USER_POOL_ID: auth.cognitoUserPool.userPoolId,
        ANGULAR_APP_IDENTITY_POOL_ID: auth.cognitoCfnIdentityPool.ref,
        ANGULAR_APP_USER_POOL_CLIENT_ID:
          auth.cognitoUserPoolClient.userPoolClientId,
      },
    });
and the output I received is:
Copy code
ANGULAR_APP_REGION us-east-1
ANGULAR_APP_BUCKET {{ ANGULAR_APP_BUCKET }}
I'm confused. Why does it like ANGULAR_APP_REGION, but no love for ANGULAR_APP_BUCKET
t
Yeah so the way this all works is some values are known at synthesize time but others are only available during / after the cloudformation deploy. What our staticsite does is insert placeholders eg 
{{ ANGULAR_APP_BUCKET }}
which get inlined into your code then uploaded to s3. Once the value is available, we have a lambda function that scans your files and replaces placeholders with the real value. Really complicated which is why we try to hide that from you and works for 99% of cases but it breaks when something about the build process is dependent on knowing the value.
j
Makes sense. Can I opt to write them to a .env file? Angular seems to work well with picking up a .env file. Where in the lambda does it keep what the values are?
t
We do allow you to write outputs to a file but I don't think that'll solve this issue. The values are not available prior to calling 
build
, only after. We need to build first before we can ship anything to aws and get those values
what is the error you're seeing with sst deploy?
j
I think I've fixed that, but I think I'm now getting {{ ANGULAR_APP_USER_POOL_ID }} in the js file in s3. I believe I'm still at that point, but now the build keeps minifying, so I cannot even find the {{ ANGULAR_APP_USER_POOL_ID }}
t
hm even if minified it shouldn't remove a string value that has that
can you link me to the js file?
and how do environment variables work in angular? How are you accessing them in code?
j
I used this as my starting point, unfortunately I just start using sst start and everything was working locally and I did not try to deploy until last night https://github.com/Manitej66/serverless-stack/tree/angular-app/examples/angular-app
npm run config
runs 
ts-node ./scripts/setenv.ts
which creates the environment.ts file
on the frontend I have updated 
npm run build
to 
npm run config -- && ng build --optimization=false --build-optimizer=false
this is the attempt I just deployed https://d219ux0pj3jdur.cloudfront.net
t
gotcha, let's see if @manitej can help you out. I'm really unfamiliar with angular so don't immediately know why it's not being replaced
It might be because angular doesn't support environment variables in the usual way
m
Sorry I missed this. Yeah angular does very differently with environment variables. @Jon Holman I'll take a look into the code again and will let you know.
j
Thanks @manitej. Yeah, I also tried deploying the sample as is and also had issues. sst start works great, but not sst deploy.
ok, I got the sample to deploy and work now with the API URL being passed, so I must have broken it when I was adding cognito and amplify. I'll try again and see what happens.
@manitej for the frontend build, 
npm run config
should be before 
ng build
right?
Wow, on that static site, it took me way too long to realize the part I'm missing is actually happening on the replaceValues property and not the environment property. Thank you all for all your help.
m
Glad it worked!
j
oh, replaceValues doesn't seem to run when doing local dev, 
sst start
and 
npm start
. I need to change how I did this last night.
m
it only works in prod
for local dev, you need the script
t
sst-env
Angular is a bit janky we maybe need to make an 
ng
specific construct
m
sst-env doesn’t work with angular, as angular doesn’t have 
process.env
t
ah
m
inorder to make it work, we need to use the script
j
I would clarify that replaceValues works in any deployed environment, 
sst deploy
. While we need the script for local. That tripped me up initially as I was thinking that was similar to angular's 
enableProdMode()
what's the significance of the 
--
in 
sst-env -- npm run config && ng serve
?
I found it doesn't work without the 
--
I'm gathering 
--
is saying run the following command with the SST environment variables set.
t
--
is a convention used in scripts to seperate things you forward along vs flags to the command
j
Thanks Dax. And sst-env is coded to accept what comes after 
--
and execute it?
t
yeah it'll execute it with the environment variables specified in 
environment
But I don't think 
ng
has support for reading env variables
j
Yeah, @manitej explained that. I now have mine working with the frontend/package.json with:
Copy code
"createLocalConfig": "ts-node ./scripts/createLocalConfig.ts",
    "start": "sst-env -- npm run createLocalConfig && ng serve",
I don't know how people feel about camelCase in the package.json npm commands, but that's what I found to be more clear to distinction the different path for start vs build
I have not done much javascript in the last decade... so I wanted to put what I did on GitHub and ask some people for feedback, but I wanted to ensure the deploy and local were both working first. I hope this will also expose more people to SST.
Open in Slack
PreviousNext
Powered by