https://serverless-stack.com/ logo
Join Slack
Powered by
I'm trying to add edge lambda to the the static si...
# sst
m
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
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
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
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
Nice thanks for sharing.
f
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
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
Right
m
I don't think memory is a concern...
f
How do you plan to replace the variables locally? (ie. when u run 
npm run start
for your React app)
m
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
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
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
Ahh that makes sense.
m
Starting to I feel I might be trying to be tooooo dynamic.
f
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
You da man
f
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
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
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
Awesome!
f
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
oh man, sweet!
3 Views
Open in Slack
PreviousNext
Powered by