General Strategy for Visual Editor Usage with Gatsby Site

My goal, if possible, is for our content editors to use the Storyblok Visual Editor.
Our site is built with Gatsby.

I can use the Visual Editor because I have the Gatsby site running in my dev environment on my machine. And, my Storyblok general settings | location is pointing there (http://localhost:8000/editor?path=)

But, what is the best way for a content editor, who does not have a dev environment, be able to use the Visual Editor?

Hello Ed,

you can use the instructions found in this tutorial https://www.storyblok.com/tp/gatsby-multilanguage-website-tutorial#creating-the-editor-page which explains how to achieve that.

Thanks Hannes,

I’ve followed the tutorial. It gives the instruction to set the preview domain to:

localhost:8000/editor?path=

But, the editors have no localhost:8000. That becomes available only when running “gatsby develop” from a dev environment, which the writers do not have. Can the Visual Editor still work for them somehow?

Yes, of course and you should basically run “develop” version of the gatsby for the editor. You may set multiple preview environment/preview for your space. You should have an environment for preview which would use the draft token and then environment for the production site with the published access token

Check out the Preview Urls in the picture - you will find it in Settings > General tab

2 Likes

Thanks Samuel,

My Storyblok Visual Editor isn’t quite working at the moment. But, that aside, I was able to setup a preview environment on Heroku. The setup process was:

  1. Add a Heroku “Procfile” to the root of my app with the contents:
web: gatsby develop -p $PORT -H 0.0.0.0
  1. Create a new Heroku app.
  2. Add a Heroku environment variable:
    heroku config:set NODE_ENV=development
  3. Deploy my app to Heroku.
2 Likes