Gatsby Boilerplate

🚀 Quick start

Clone Git repository. Clone the repository

# SSH
git@github.com:rnnyrk/gatsby-boilerplate-ts.git

Install packages and run project.

Navigate into your new site’s directory and install NPM packages.
```
cd gatsby-boilerplate-ts
npm install
npm run develop
```
Open the code and start developing!

You can now view boilerplate in the browser at http://localhost:3000/. ⠀ View GraphiQL, an in-browser IDE, to explore your site's data and schema at http://localhost:3000/___graphql.

🎯 Deployment

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.
The project uses CI/CD to deploy to the test and production environment! By default it's recommended to use Netlify

📖 Project features

Main dependencies
Gatsby plugins

See gatsby-config.js for the following plugins configuration.
- gatsby-source-graphql Plugin for connecting arbitrary GraphQL APIs to Gatsby’s 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.