What is the process to enable a deployed React app (hosted in S3) to retrieve JSON data that is uploaded to an S3 bucket?

I'm in the process of creating a static React App that showcases API documentation. Utilizing Swagger for the backend (which is hosted separately on a lambda) to generate the JSON data model. I have another lambda set up to provide me with endpoint details like headers, requests, and responses for new endpoints created. This data is delivered in JSON format and stored in an S3 bucket. Is there a way for my React app, which is also deployed in the same bucket, to consume this JSON data and display the newly added API documentation without needing a node backend?

Here's an analogy to clarify what I'm trying to accomplish:

  1. An application showcasing cooking recipes built using React is hosted statically on an AWS S3 bucket.
  2. The recipe data for this app is structured in a JSON model, consistent for any upcoming recipes.
  3. This app is located within an AWS S3 bucket.
  4. A new recipe needs to be integrated into the app, however, the app is already built and live.
  5. Is it possible to architect my app in a manner where when I upload new JSON files, it automatically consumes and updates its frontend, all while being serverless on S3?
reactjsjsonamazon-s3next.js

Answer №1

If your app is hosted statically on S3, you'll need to utilize client-side JavaScript to check for any new recipes being added.

You can trigger your Lambda function from the client-side to retrieve the endpoint and send a request to fetch all the recipes. Alternatively, if you know the folder path in S3, you can perform this check without calling the Lambda function.

By implementing this approach, your app will update the frontend seamlessly without relying on a server each time you introduce a new JSON file.

Answer №2

After conducting extensive research, I discovered that you can easily store all your JSON files in the Public folder within your React App. These files remain unchanged and can be accessed in your react components using the react useEffect Hook. For more information, refer to this article.

Learn how to incorporate Static JSON files in a React App after deployment

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The function getServerSideProps does not return any value

I'm a beginner with Next.js and I'm currently using getServerSideProps to retrieve an array of objects. This array is fetched from a backend API by utilizing the page parameters as explained in the dynamic routes documentation: https://nextjs.org ...

typescriptnext.js

Is there a way to align the scrollable tab in the center of the screen

I'm struggling to center 3 tabs on the screen. Right now, they are stuck on the left side. How can I make them scrollable and centered? Any suggestions? Check out the codesandbox for reference: https://codesandbox.io/s/material-demo-forked-dbcxl?file ...

reactjsmaterial-ui

Using a toolbar to insert a hyperlink for hypertext communication

My journey with Javascript and React began this week, so I'm still getting the hang of things, especially in the front end domain. In my project, there's a link button within a toolbar. The idea is to click on it, have a text box pop up where yo ...

javascriptnode.jsreactjs

The component is receiving additional styles that were not specifically imported for it

Currently, I am working on a simple CRUD application in React JS version 18.0.0. One issue that I am facing is related to styling in one of my components, let's call it Home. Strangely, the styles from other components are also being applied to the Ho ...

reactjsreact-bootstrap

The issue with ReactJS Material-UI's theme.mixins.toolbar offset not adjusting properly when the <toolbar variant="dense"/> is applied

Looking for a solution to adjust the offset of content behind the Material-UI AppBar in a clean way. I initially thought that theme.mixins.toolbar would automatically adapt, but that doesn't seem to be the case. (Even using the theme density prop as ...

reactjsmaterial-ui

Implementing a New Port Number on a ReactJs Local Server Every Time

As a newcomer to ReactJS, I recently encountered an issue while working on a project that puzzled me. Every time I shut down my local server and try to relaunch the app in the browser using npm start, it fails to restart on the same port. Instead, I have ...

javascriptnode.jsreactjs

Error message in Typescript with React: "The type 'ComponentClass<StyledComponentProps<{}>>' cannot be assigned to type 'typeof MyComponent'"

Currently experimenting with integrating the Material UI 1.0 (beta) @withStyles annotation into a React component. The documentation provides a JavaScript example (), however, it results in a compilation error when using Typescript. Despite the error, the ...

reactjstypescriptmaterial-ui

Using jQuery to send JSON data through AJAX to PHP

I'm attempting to utilize jQuery AJAX to send JSON data to a PHP file. My goal is to extract the values and IDs from multiple child elements, create a JSON object with this data, and then transmit that object to a PHP file for processing and insertion ...

phpjqueryajaxjson

"I am interested in using the MongoDB database with Mongoose in a Node.js application to incorporate the

I am facing a situation where I need to validate the name and code of a company, and if either one matches an existing record in the database, it should notify that it already exists. Additionally, when receiving data with isDeleted set to true, I want to ...

javascriptnode.jsreactjsmongodbmongoose

The getInitialProps method does not have access to the Passport user object in the request when the server is running on a different port

I currently have my express server running on a separate port from my client-side nextjs project. Typically, when the server is on the same port as the client, you can use getRequestHandler with next to pass the user object that can be accessed in the cli ...

expressgraphqlnext.jspassport.jsapollo-client

Can you explain the term used to describe when specific sections of the source code are run during the build process to improve optimization?

One interesting feature I've noticed in next.js is its automatic code optimization during the build process. This means that instead of running the code every time the app is executed, it's evaluated and executed only once during the build. For ...

javascriptoptimizationnext.jsbuild

What is the best way to stop setInterval on click using React Hooks?

Recently, I attempted to restructure my code using react hooks. However, I encountered some challenges as the setInterval and setTimeout functions did not behave as expected when I copied and pasted them into hooks. After multiple attempts, I was able to m ...

reactjsreact-hooks

Embedding services into Entities: Verifying the presence of an image file

Currently, I am working with PHP and the Doctrine ORM. The situation at hand involves a product table that has an image field. My goal is to create an event that verifies whether an image exists in my assets cloud storage (specifically Amazon S3). If the f ...

phpsymfonydependency-injectiondoctrine-ormamazon-s3

Unexpected issue with Typo3 v9 - receiving empty Ajax Plugin JSON response

Consider the following setup in TYPO3 for an ajax request: ajaxAutocomplte_page = PAGE ajaxAutocomplte_page { typeNum = 111871 10 = COA_INT 10 { userFunc = TYPO3\CMS\Extbase\Core\Bootstrap->run extensionNa ...

jsonajaxpluginstypo3response

How to seamlessly integrate Redux into your React project using create-react-app?

Is it correct to pass a reducer as props when using a rootreducer? This is the content of my rootReducer.js file: import { combineReducers } from 'redux'; import simpleReducer from './simpleReducer'; import messageReducer from '. ...

javascriptreactjsreact-reduxcreate-react-app

What is the best way to maintain Redux state between Redux @init executions?

I am working on a React app that makes use of redux.js. One issue I encountered is related to a timeoutMonitor function that triggers when a user fails to complete a task within a set timeframe. This function dispatches a redux action (logoutUser()) and up ...

reactjsreduxreset

Extracting information from a website link using Python

Can anyone help me create a HTTP link using information from a database, such as IP and port number? I have tried the following code but keep encountering an error while parsing. Any assistance will be greatly appreciated. @app.route('/link_test/< ...

pythonjsonparsingurl

The MUI Fade component specializes in showcasing, concealing, and transitioning components without any fading effects

I have recently made a change in my code where I replaced conditional rendering of child components with wrapping them in <Fade />. However, the Fade effect does not seem to work as both components always display. Below is the updated code snippet: / ...

reactjsmaterial-ui

Exploring the synergies of Remark and Rehype plugins alongside MDX in Next.js powered by @next/mdx

I’ve been experimenting with Github Flavored Markdown using @next/mdx, but I’m struggling to understand how to use plugins alongside the code. Here’s a breakdown of what I’ve attempted so far: (I’m following the instructions from the Next.js Doc ...

javascriptreactjsnext.jsmarkdownmdxjs

Refreshing the page in Next.js causes issues with the CSS classNames

I am currently in the process of migrating a React SPA to Next.js, and I am relatively new to this framework. The issue I am encountering is that when I initially load the Home page, everything appears as expected. However, if I refresh the page, incorrect ...

javascriptcssreactjsnext.jscss-modules