Storybook: How to make a REST API call from a story.

[amittkSharma]

Hi Team,

I wanted to make a REST call from the story in order to fetch the data from server but the port of storybook gets in the REST call.

How I can configure storybook to access the server?

Thanks in Advance.

Amitt

[mshaaban088]

I believe in development you can make use of webpack devServer.proxy option to proxy all API calls to your back-end server.

You can do the same in production but not through webpack, external proxy will do the job

[Hypnosphi]

What I do in my project is use absolute URLs in requests from stories

[amittkSharma]

Thanks, Can you please provide the example or some pointers how to set it up? In Webpack.config.js and packages.json? Do I need to install some special package for the same?

[Hypnosphi]

I mean, I pass the full URL 'http://my-web-app.address/rest/endpoint'

[amittkSharma]

Thanks for the pointers guys.

I used middleware extension storybook. Created a file middleware.js in .storybook folder with the following code:

const proxy = require('http-proxy-middleware')
module.exports = function expressMiddleware (router) {
router.use('/api', proxy({
target: 'http://localhost:8090',
changeOrigin: true
}))
}
using the http-proxy-middleware I was able to make all the /api to the server (where target is the server from where data is expected)

Thanks
Amit