I was curious if there is a way to modify HMR (in React/NextJs) to listen for webhooks. I'm doing some work in Contentful, and I have to reload the app every time I update Contentful. Contentful has webhooks that can listen for changes, I think it would be awesome to have my dev server listen for these webhooks and auto-update with the edits from Contentful.
Any ideas or suggestions are welcome, Thanks!
Customizing Hot Module Replacement with a webhook
116 Views Asked by Barrard At
1
There are 1 best solutions below
Related Questions in NEXT.JS
- Error **net::ERR_CONNECTION_RESET** error while uploading files to AWS S3 using multipart upload and Pre-Signed URL
- Check list of pages with axios
- Calling functions from Main Component while using tanstack table
- NextJS 14 site working in development but not in vercel
- Route Handler not working Next auth, Next Intl & Next 14
- NextJS Docker build fails: fetch failed ECONNREFUSED
- Need some advice on differentiating between subscriptions using Stripe
- Update Sidebar Height to Cover the Document Height (with React Pro Sidebar)
- How do I send an audio file to OpenAi?
- Next.js not updating state during OnClick after router.push to same page with different ID
- Next js delay before applying Emotion and MUI styles
- Next.js. Server actions in form using formik. Action with arguments didnt work
- Protect Server Actions with Next Auth in Next JS 14
- Next-Auth credentials login troubles debugging
- Hydration failed because the initial UI does not match what was rendered on the server: Next js Tanstack table
Related Questions in CONTENTFUL
- Contentful PHP SDK : How to retrieving localized embedded content in Content Renderer
- Contentful do not retrieve all entries correctly / Needs to unpublish and publish again entries in order to get it
- Contentful UI extension to intercept unpublishing
- Why is Astro site not building with Contentful fields?
- Nuxt page not fetching data if routed from broken page
- Contentful Rich-Text-Html Embedded Assets no url
- Error: Save event is not initialized, please call `ContentfulLivePreview.init()` first
- Sorting posts by creation date with Contentful
- How to write retry policy in Contentful .net when the api rate limiting occurs?
- Displaying an image from Contenful in Next.js
- In Contentful - MultipleEntryReferenceEditor how can we add more Action?..I need a "Duplicate" field button
- Contentful rich text renderer: custom BLOCK styles do not apply properly if BLOCK.PARAGRAPH is present
- Contentful graphQL: filtering content by publishDate
- Is this approach to fix a typing error between typescript and Contentful's content delivery API safe?
- Why does my Astro site shows HTML tags of Contentful data?
Related Questions in WEBPACK-HMR
- Why does webpack-dev-server infinitely reload?
- http://localhost:3000/applink/_next/webpack-hmr?page=/ keeps 308 redirecting to https://localhost:3000/applink/_next/weback-hmr?page=%2F
- Webpack dev server is deleting bundle
- Webpack ModuleFederationPlugin and HMR "Cannot set properties of undefined"
- Can't run the server with debug Vue3 Vite app in Docker with VS Code
- next.js with custom server HMR for express server code outside of nextjs app
- Why does my Next.js 13 app keep getting 'WebSocket connection failed' error on server deployment?
- HMR not working for a React app being served by Express
- VSCode, webpack, devServer, hot reload (HMR) and remote debugging - do I have to pick one?
- Nuxt 3 HMR with Docker
- Is there any way in angular that do not clear the browser console log after HMR?
- Infinite HMR updates in React app created with Vite
- SvelteKit: Unrecoverable HMR error in <+page>: next update will trigger a full reload
- A couple of questions about Webpack HMR and how to use it in ReactJS application from scratch?
- Issue with react-refresh-webpack-plugin and wordpress/scripts using --hot
Related Questions in HOT-MODULE-REPLACEMENT
- Run Vite + React in docker with Hot Module Reload
- webpack 5 with HMR enabled - everything (even CSS changes) causes a full reload
- how to have webpack-dev-server connect to different wss port than the http port?
- Hot Module Replacement not working with default svelte project on wsl2
- Angular 15 HMR not working, Throwing Circular Dependency error
- How do I correctly configure Neutralinojs to work with Vite HMR?
- Overriding endpoints with Redux Toolkit Query and Vite HMR
- How to add proxy configuration in web.config file and remove from appsettings.json in .NET 6 with Angular 5?
- HMR not working for a React app being served by Express
- Vite serve functionality is importing Vuetify's main.sass and is overriding old styling
- Reflect changes as they are saved using webpack-hot-middleware with node
- ViteJs, Docker, React, Symfony - HMR update not showing in Browser
- Vite / Vue / HMR : ReferenceError: Cannot access '...' before initialization
- Nuxt3 HMR not working, page reload needed for HMR to fire
- How to add HMR to Rollup with Svelte?
Trending Questions
- UIImageView Frame Doesn't Reflect Constraints
- Is it possible to use adb commands to click on a view by finding its ID?
- How to create a new web character symbol recognizable by html/javascript?
- Why isn't my CSS3 animation smooth in Google Chrome (but very smooth on other browsers)?
- Heap Gives Page Fault
- Connect ffmpeg to Visual Studio 2008
- Both Object- and ValueAnimator jumps when Duration is set above API LvL 24
- How to avoid default initialization of objects in std::vector?
- second argument of the command line arguments in a format other than char** argv or char* argv[]
- How to improve efficiency of algorithm which generates next lexicographic permutation?
- Navigating to the another actvity app getting crash in android
- How to read the particular message format in android and store in sqlite database?
- Resetting inventory status after order is cancelled
- Efficiently compute powers of X in SSE/AVX
- Insert into an external database using ajax and php : POST 500 (Internal Server Error)
Popular # Hahtags
Popular Questions
- How do I undo the most recent local commits in Git?
- How can I remove a specific item from an array in JavaScript?
- How do I delete a Git branch locally and remotely?
- Find all files containing a specific text (string) on Linux?
- How do I revert a Git repository to a previous commit?
- How do I create an HTML button that acts like a link?
- How do I check out a remote Git branch?
- How do I force "git pull" to overwrite local files?
- How do I list all files of a directory?
- How to check whether a string contains a substring in JavaScript?
- How do I redirect to another webpage?
- How can I iterate over rows in a Pandas DataFrame?
- How do I convert a String to an int in Java?
- Does Python have a string 'contains' substring method?
- How do I check if a string contains a specific word?
The tricky part here is that webhooks can only be sent to a public URL. You can still use a tool such as ngrok (there are also others but ngrok is the most common one) to spin up a public tunnel to your local machine.
The flow would then be: