0

Is there a way to add a file in the pages directory in Gatsby and not have it turn into a page?

For instance, let's say that I have a contact page which has a contact form. I would like to create a contact folder, which has within it an index.js file as well as a contact-form.js file. I.e., a structure like this:

src
- pages
 - contact
  - index.js
  - contact-form.js

The idea is that that the index.js file would import the contact form component from the contact-form.js file. But there would not be a contact/contact-us page.

Is there some way to do this with Gatsby? If so, how?

Moshe
  • 6,011
  • 16
  • 60
  • 112

1 Answers1

1

According to gatsby-plugin-page-creator docs files matching the following patterns are excluded:

template-*
__tests__/*
*.test.jsx?
*.spec.jsx?
*.d.tsx?
*.json
*.yaml
_*
.*

Try renaming your file to _contact-form.js.

However I would avoid that altogether and have a dedicated folder for components say src/components. Going further I set a webpack alias to src directory so my imports could look like import PartialComp from "@/components/PartialComp.jsx" no matter where the import originates from.

Z. Zlatev
  • 4,757
  • 1
  • 33
  • 37
  • Thanks -- that is what I was looking for. In terms of a components folder -- I do have a components folder. But I like to save that for general components that are used among multiple pages. For a component that is specific to one page, I like to organize that component together with the relevant page. Either way -- thanks for the help and the link. – Moshe Dec 09 '19 at 11:43