React Prime Gatsby

⚠️This repository has been moved to the Prime Monorepo.

---

🚀 Quick start

Clone Git repository.

Use create-react-prime for easy install.

npx create-react-prime my-app
cd my-app
npm start

Add the environment files

If the boilerplate was not installed by create-react-prime then you will need to manually add the environment files.

1. Create two files in the root of the project: .env.development and .env.production.
2. Add the following key/value to the development file: GATSBY_SITE_URL=http://localhost:3000
3. For the production file, you can leave it as only GATSBY_SITE_URL=

Open the code and start developing!

You will find the website at http://localhost:3000/.

View GraphiQL, an in-browser IDE, to explore your site's data and schema at http://localhost:3000/___graphql.

👨‍💻 Editor setup

1. Make sure to install the VSCode Apollo GraphQL extension (YES, even this isn’t Apollo project). This plugin will make use of the schema's exported by gatsby-plugin-typegen (See Gatsby plugins section down below).

2. Install the EditorConfig plugin for your editor.

📑 Making a build with non-production data

This project uses dotenv to load environment variables from a .env file into process.env. By default Gatsby supports 2 environments:

• Development. If you run gatsby develop, then you will be in the ‘development’ environment.
• Production. If you run gatsby build or gatsby serve, then you will be in the ‘production’ environment.

You can add other environments, and thus load other .env files, by setting the APP_ENV environment variable before starting npm start or npm run build.

📖 Project features

1. Main dependencies

• Gatsby
• TypeScript
• Styled-Components
• React Helmet

2. Gatsby plugins

See gatsby-config.js for the following plugins configuration.

• gatsby-source-graphql Source plugin for pulling content types, entries, and assets into Gatsby from Contentful spaces. It creates links between entry types and asset so they can be queried in Gatsby using GraphQL.

• gatsby-plugin-module-resolver Allows us to use the same folder structure as in our React Prime projects.

• gatsby-plugin-manifest The web app manifest enabled by this plugin allows users to add your site to their home screen on most mobile browsers. The manifest provides configuration and icons to the phone.

  NOTE: You need to add some additional configuration to generate icons. See the documentation here.

• gatsby-plugin-react-helmet Provides drop-in support for server rendering data added with React Helmet.

• gatsby-plugin-react-svg Adds svg-react-loader to gatsby webpack config.

• gatsby-transformer-sharp & gatsby-plugin-sharp Creates ImageSharp nodes from image types that are supported by the Sharp image processing library and provides fields in their GraphQL types for processing your images in a variety of ways including resizing, cropping, and creating responsive images.

• gatsby-plugin-sitemap Automatically generated a sitemap for the website (/sitemap.xml). NOTE: This plugin only generates output when run in production mode! To test your sitemap, run:

  gatsby build && gatsby serve

• gatsby-plugin-styled-components A plugin for styled-components with built-in server-side rendering support.

• gatsby-plugin-typegen Watches your queries and automatically generates TypeScript/Flow definitions out-of-box.

  Only automatically adds the generated types for static queries, you have to manually select the right type for page queries. Eg:

  type IndexPageProps = PageProps & {
    data: GatsbyTypes.PageTitleQuery
  };
  
  export const pageQuery = graphql`
    query PageTitle {
      site {
        siteMetadata {
          title
        }
      }
    }
  `;

  Within this project the plugin is also configured to use eslint-plugin-graphql and ts-graphql-plugin.

  Autogenerated files should be committed to Git so new developers don't have to run the project once to get all type definitions.

  Note: This plugin is pretty opionated, there aren't a lot of options to customize the behaviour of the plugin.

• gatsby-source-filesystem A Gatsby source plugin for sourcing data into your Gatsby application from your local filesystem.