Gatsby Tutorial

Questions
#1

Hi!

New to the party and I was hoping to get started with the Gatsby guide released on Nov 13 '20.

Is this guide work in progress?
I’ve tried to follow it pretty much word-by-word, but it seems that there’s a lot left out.

  • literally the third codeblock I’m supposed to copypaste into my app causes a crash, because there is no blok.title.
  • first guided replacement of pages/index.js is making use of ../components/Layout, which at this point doesn’t exist.
  • then, the example code for components/layout.js does not inject anything into my header, which I assume is critical for the visual editor to pick up my app.
    (also, <Header> is not defined in that component)

Now, I am also just getting started with React, so I must admit I am not proficient enough to proofread all of the guide and fix it while trying to follow along.
Is there any guide that actually works “out of the box” with Gatsby? Or would you suggest I do the Next guide instead?

Cheers & thanks for the help :slight_smile:

#2

Hi sla_alex,

I’m sorry if there is something missing. In that case I will have to go through the whole tutorial again and check what steps are missing / wrong. We are happy about any feedback, that can improve the tutorials. The problem is that it’s built by pieces and in the end the code is a lot different to beginning since it’s getting more complex with every piece and should have a working demo in the end (gatsby-multilanguage-website.vercel.app/). Also the gatsby starters sometimes changes, which causes that we often need to rewrite certain tutorials. One way to get it working quickly is by cloning the end example from Github (github.com/storyblok/gatsbyjs-multilanguage-website) and importing the components via the CLI (github.com/storyblok/gatsbyjs-multilanguage-website#import-necessary-components) and then add the necessary content with those components (github.com/storyblok/gatsbyjs-multilanguage-website#add-content).

To your questions for the tutorial:

  • The blok.title needs an additional check: typeof blok.title !== 'undefined' && blok.title.length ? ... or can be removed entirely in the beginning
  • The Layout file is a file created by the gatsby new ... command and depends on the starter template that is used. In the older starter it used to be uppercase but in the new one the components/layout.js is lowercase, so the imports of layout need to be adapted to lowercase import Layout from "../components/layout". Here there seems to be mixed imports in the tutorial, I will updated all of those to lowercase.
  • For the Visual Editor you will need two React Helmet Tags like described in this step (https://www.storyblok.com/tp/gatsby-multilanguage-website-tutorial#add-the-storyblok-bridge-and-cache-version) to the components/layout.js file. The script tags should be injected into the <head> with the React Helmet package. The <Header> component is an actual DOM element and has the title and such, thus is not the place for the script tags. You can check the finished component of the tutorial to see what you might be missing (github.com/storyblok/gatsbyjs-multilanguage-website/blob/master/src/components/Layout.js)

The multilanguage Gatsy example can get a little bit complex, since it makes use of a lot of different things like GraphQL and multilanguage routing. Next.js might be a little bit easier, but both options are fine. You can check our technology pages to find also beginner tutorials for both technologies: storyblok.com/tc/gatsbyjs or storyblok.com/tc/nextjs

Best,
Lisi

#3

Hi Lisi,

thanks for your help!
I’ll give the simpler beginner tutorials a try, I guess then the other ones will make more sense later.

Alex