I am trying to build a static React App which displays api documentation. For backend I am using swagger (hosted separately in a lambda) which generates the JSON data model. With new endpoints created, I have a lambda which will give me the details of the endpoint, like headers, requests and response. The data comes in format of JSON which is dropped in a s3 bucket. Could my react app deployed in the same bucket, consume that json and render the newly added api documentation details? I need help on the same without a node backend?

Here is an example of what I am trying to build

1. A react app with cooking receipies is deployed statically hosted in s3.
2. The receipies for this app is in JSON model, which is common for any up comming receipies
3. This app is in AWS s3 bucket.
4. A new recepie needs to be added to my app. But my app is already built and hosted.
5. Can I build my app in such a way that if I drop any new JSON files, it would consume that file and render/refresh its frontend, without a server in S3?

CodePudding user response：

Given that your app is statically hosted in S3, you will have to write client-side JS code to check for the new recipes.

You can call your Lambda from the client-side to get the endpoint and send a request to get all the recipes. If the folder path in S3 is known, you can do this check without needing the Lambda.

This way, your app will refresh the frontend without a server when you add a new JSON file.

CodePudding user response：

After some through research I found that, you could drop all your JSON files in Public folder in React App. The files in this folder will not be altered. So you could access them in your react component with react useEffect Hook. Here is the reference article I took this implementation from.

How to add Static JSON files in React App post deployment