Gatsby: How to configure a proxy with the gatsby-plugin-netlify-cms plugin?

[dev-b01]

Summary

Hello,

I'd like to proxy or add CORS Headers for requests from http://localhost:8000 to http://localhost:8888 when running netlify dev -c 'yarn gatsby develop'. Similar to how it is done with the Gatsby dev server and the http-proxy-middleware ( as described here https://www.gatsbyjs.org/docs/api-proxy/). This way it will be easier to test and debug Netlify functions that are called from within the cms.

const response: AxiosResponse

This request is done from the netlify react app at http://localhost:8000/admin

Relevant information

The official gatsby-plugin-netlify-cms plugin provides the ability to edit config and add plugins.

   resolve: 'gatsby-plugin-netlify-cms',
   options: {
      htmlFavicon: `src/img/gatsby-icon.png`,
      modulePath: `${__dirname}/src/cms/cms.ts`,
      customizeWebpackConfig: (config) => {
       .....
      }
   }

What method(s) can be used to configure the netlify-cms dev server to proxy requests to the function server?

[vladar]

@erezrokah Can you help with this? 🙏

[erezrokah]

Thanks @vladar.

What method(s) can be used to configure the netlify-cms dev server to proxy requests to the function server?

@dev-b01 I'm not sure I understand the question. Are you referring to netlify-cms-proxy-server as described here:
https://www.netlifycms.org/docs/beta-features/#working-with-a-local-git-repository?

The CMS itself is just a React app and the plugin's purpose is to build the app using Gatsby's Webpack configuration, so they don't run any kind of server, nor the CMS has any code to access functions.

netlify dev documentation can be found here https://cli.netlify.com/commands/dev

Do you mind sharing your use case (e.g. the problem you're trying to solve) and an example repo with the issue?

[dev-b01]

@dev-b01 I'm not sure I understand the question. Are you referring to netlify-cms-proxy-server as described here:
https://www.netlifycms.org/docs/beta-features/#working-with-a-local-git-repository?
No, but I did configured that together with the onCreateDevServer to use the same express server and it's working great. e.g.
exports.onCreateDevServer = async ({ app }) => {
await registerLocalFs(app)
}

The repo I have is based on this, https://github.com/renvrant/gatsby-mdx-netlify-cms-starter
I've build out a number of custom mdx editor components that the user of this project can insert into the page, the select different props.

For one of those props, I want to query a list of Mailerlite groups from their API so the user can select the destination.

To be honest, I'm a bit divided whether this issue belongs here or at netlify-cms, yesterday I noticed this line:
https://github.com/gatsbyjs/gatsby/blob/f99ae04ce5eb055d0a5a4853ed0fd7390e554cb9/packages/gatsby-plugin-netlify-cms/src/gatsby-node.js#L101
So was am hoping there might be a convenient way to add express proxy middleware in there, but I might be looking at this the wrong way. 😬

[erezrokah]

Hi @dev-b01, if the use case is to dynamically query information inside an editor component, I don't think using an express middleware would work as it is only available during development.
The CMS itself doesn't run any server in the context of Gatsby (during development it hooks into the existing server and during production files are hosted statically).

I think you have 2 options:

1. Have that information available during build time (e.g. via pre-created JSON file).
2. Query that information inside the editor component during runtime (call the API inside the editor component).

I think this issue is better discussed under the Netlify CMS repo.
If you do open it on that repo, please follow the issue template and provide code examples if possible.

[dev-b01]

@erezrokah that is helpful thank you

[erezrokah]

Closing the issue. Please comment if you have anymore questions.