CODEWITHSUNDEEP
reactjstemplatesfilesystemsgatsbyfile-structure
Alexander Loktiev
Alexander Loktiev

Reputation: 51

For what do we need the templates folder in Gatsby project file structure

For what do we need the templates folder in Gatsby project file structure? Can I use this folder for storing ordinary components that I reuse on a home page such as "hero" or "info" components ets?

Upvotes: 3

Views: 1841

Answers (2)

Ferran Buireu
Ferran Buireu

Reputation: 29320

The purpose of /templates folder is to store templates (huh?), that is to say, all pages that would be created programmatically via createPage API and will share the same internal structure (components, header, footer, etc) but different content. Ideally, you will have there a post.js, legal.js (for all terms and conditions, terms of service, etc) in order to share the same structure for all your retrieved data from CMS, like:

  posts.forEach(({ node }, index) => {
    createPage({
      path: node.fields.slug,
      component: path.resolve(`./src/templates/posts.js`),
      context: { id: node.id },
    })
  })
}

It is only used to structure the code and create a more clean structure. For me, rather the Robin Métral answer I would keep it, if you don't use it and remains empty the file won't be committed but is really useful and the programmatic page creation is one of the main advantages of Gatsby, but also is really helpful to keep a clean and clear structure.

Upvotes: 2

Robin Métral
Robin Métral

Reputation: 3209

The /src/templates folder doesn't do anything in particular (unlike the /src/pages folder for example), but it's normally used to store templates for pages that you're creating programatically. You could also simply store any page templates in a /src/components folder and remove /src/templates altogether, if you prefer.

Upvotes: 4

Related Questions