Deploy the Editor on Netlify without rebuilding Gatsby

If you're using our default setup you might ask yourself how to enable the preview editor on Netlify. Normally we would tell you that using SSR is the only option to enable that, but as Gatsby does not allow SSR after the build step, or is very hard to get it running on Heroku and Now by now, you can include the Editor URL as it will enable you to consume data directy from the API and display the current site.

1) Add the following code

in your gatsby-node.js file as shown below, to enable access to /editor route even after deploy.

exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions

  return new Promise((resolve, reject) => {
+    createPage({
+      path: `/editor`,
+      component: path.resolve('src/pages/editor.js')
+    })
...

2) Build your Gatsby Project

npm run build

3) Deploy your app as usual on Netlify

netlify deploy

4) Add the editor URL

In your Space Settings you can now add a new URL either as environment or as default location as shown below. Make sure to keep the /editor?path= as it allows you to directly consume the API.

https://your_netlify_domain/editor?path=

5) Enjoy.