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

Mike McCall

06/12/2021, 2:30 PM
I'm trying to add edge lambda to the the static site construct, but it looks like default behavior cannot be modified because an origin needs to specified. There is no way to reference the s3 origin of the static site in the cfN config. Doesn't look like you can modify default behavior either.
f

Frank

06/12/2021, 6:37 PM
Right! I think we should have an easy way to customize the default behaviour Lemme take a look at it tonite and put in something.
m

Mike McCall

06/12/2021, 7:57 PM
No rush! My use case if not clear is to dynamically replace variables in the response body. Still experimenting.
I still think customizing the default behavior is important, but I've backtracked on the use case. I've found (what I think) is a good solution to dynamic variable replacements using custom resources.
StaticSite might benefit (if not already going down this road based on the discussion).
Copy code
new cdk.CustomResource(this, "StaticSiteDeployHook", {
      serviceToken: provider.serviceToken,
      properties: {
        bucketName: websiteBucket.bucketName,
        pattern: "*.html",
        replacements: {
          'API_ENDPOINT': api.httpApi.apiEndpoint
        }
      }
    })
f

Frank

06/14/2021, 3:54 AM
Yeah, we had something similar working and ended up scraping it. One of the concerns is custom resource’s (ie. a Lambda function) 500MB disk size limit and it’s memory limit.
m

Mike McCall

06/15/2021, 12:21 AM
Nice thanks for sharing.
f

Frank

06/15/2021, 12:28 AM
I’m working on a version of
StaticSite
without using the
s3-deployment
construct. It does the
s3 upload
locally (as suggested in the blog post).
m

Mike McCall

06/15/2021, 12:30 AM
The custom resource I have is a POC that list bucket files, filters them by pattern, loops over the filtered keys, reads the file in memory, global replace, uploads the content back to the key.
f

Frank

06/15/2021, 12:30 AM
Right
m

Mike McCall

06/15/2021, 12:31 AM
I don't think memory is a concern...
f

Frank

06/15/2021, 12:31 AM
How do you plan to replace the variables locally? (ie. when u run
npm run start
for your React app)
m

Mike McCall

06/15/2021, 12:31 AM
I get the bucket deployment issue for that case
I've gone both extremes, got to find something in the middle. Right now I am locally importing a cdk-outputs.json file
we have been deploying them in separate steps, would love to get it all in one
hence the custom resource replacements idea
f

Frank

06/15/2021, 12:37 AM
I see. I’m going to read it in more details.
Currently, do you already have these placeholder values in ur React app, and you are replacing them with the values in the
cdk-outputs.json
file?
m

Mike McCall

06/15/2021, 12:39 AM
imo the most "stable" so far is using the outputs.json file. It just requires a pipeline.
Oh sorry, I guess that was a bit misleading for the use case. These get pulled in to the aws-exports.js file as we are using amplify frontend libs.
f

Frank

06/15/2021, 12:42 AM
Ahh that makes sense.
m

Mike McCall

06/15/2021, 12:43 AM
Starting to I feel I might be trying to be tooooo dynamic.
f

Frank

06/15/2021, 12:44 AM
Nah.. a lot of ppl have asked for the dynamic variable replacement. Lemme read the blog post, and put something in the next release.
m

Mike McCall

06/15/2021, 12:45 AM
You da man
f

Frank

06/15/2021, 12:45 AM
We just need to figure out how to let ppl replace these dynamic variables locally when they run
npm run start
for their React app (non Amplify users)
m

Mike McCall

06/15/2021, 5:13 AM
for sure and good point
Chopped up some code last night experimenting. I think I've come to the conclusion using some form of environment variables (.env) is best. All frameworks support them and it'll work on build servers. Could inline on the build command
API_ENDPOINT=${variable} npm run build
& output/update a local env in the statics sites source path.
f

Frank

06/15/2021, 7:36 PM
Nice, having a solution for all frameworks would be great. (cc’ing @Jay take a look at Mike’s comment above, and let’s talk about it today)
@Mike McCall you can now configuring
defaultBehavior
in v0.28.0. A couple of examples here https://docs.serverless-stack.com/constructs/StaticSite#configuring-the-default-behavior
m

Mike McCall

06/17/2021, 2:27 PM
Awesome!
f

Frank

06/21/2021, 8:48 AM
Hey @Mike McCall, just released v0.29.1 with some improvements for the `StaticSite`: • You can configure different 
cacheControl
 settings to different files. For example, don’t cache 
*.html
 and cache 
*.css *.js
 forever. Example here - https://docs.serverless-stack.com/constructs/StaticSite#configure-caching
StaticSite
 now does atomic deploys. Each deployment gets deployed to a new folder in S3 bucket. • You can specify a list of glob patterns, with the search and replace terms for each. Example here - https://docs.serverless-stack.com/constructs/StaticSite#replace-deployed-values
With this update, you can replace
process.env.API_ENDPOINT
with the deployed endpoint automatically. But when running React locally, you’d still have to replace the values urself, for now.
m

Mike McCall

06/21/2021, 2:10 PM
oh man, sweet!
3 Views