React App in AWS S3 has missing env properties

Question

I developed Frontend (ReactJs) and Backend (Spring boot) for my project. I got following issues when deploying FE to S3 bucket.

I set up CodePipeline to:

• pull the code from repository
• build step , in here I also set up environment variables which are needed
• and deploy , extract the code to S3 bucket.

(Then Cloudfront and Route 53 for domain routing, but I don't think that's important.)

When I visit my site (you can try salesforce.martinmachava.link ) fist time (sometimes) it works fine. But then OAuth via Salesforce is not working, there was a bug that I fixed, but those changes do not seem to be reflected on S3. I deleted all files in S3 bucket, hit redeploy button in CodePipeline. Besides the bug still present, I sometimes get these errors:

• Uncaught SyntaxError: Unexpected token '<' that comes from the first line o main file "<.doctype html><html..."
• and Uncaught Error: Properties [client_id, client_secret] are undefined that comes from my method to ensure all Environment Properties are set. Which doesn't make any sense, it should be set up in build step. And yes, in initial deploy I was missing those env properties but I added them to the build step additionally.

It's like some files are cached, but I didn't find any files-caching settings in S3. It's really strange, I got these multiple issues and the whole AWS services are too chaotic and messy to find the real issue. Any help or suggestions?

Answer 1

It looks you are using CloudFront to deliver the assets served from your origin (S3). CloudFront is a CDN and it caches content at its edge locations.

The solution may be as simple as invalidating your CloudFront distribution.