README.md

Gatsby's Typescript, material.io, rebass, styled system and emotion starter

Kick off your project with this typescript boilerplate. This starter ships with great configuration for using typescript with gatsby. It includes prettier and eslint configurations. I added also emotion, rebass, sass and material.io react implementation to easily bootstrap a project with good tooling

🚀 Quick start

1. Create a Gatsby site with this starter.

   Use the Gatsby CLI to create a new site, specifying the default starter.

   # create a new Gatsby site using the default starter
   npx gatsby-cli new my-new-app-folder https://github.com/abumalick/gatsby-typescript-material-rebass-starter

2. Start developing.

   Navigate into your new site’s directory and start it up.

   cd my-new-app-folder/
   yarn start

3. Open the source code and start editing!

   Your site is now running at http://localhost:8000!

   Note: You'll also see a second link: http://localhost:8000/___graphql. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby tutorial.

   Open the my-new-app-folder directory in your code editor of choice and edit src/pages/index.tsx. Save your changes and the browser will update in real time!

🧐 What's inside?

• Typescript
  • You can start learning typescript here: (An interactive course here)
  • Cheatsheets for experienced React developers getting started with TypeScript
• Emotion: a library designed for writing css styles with JavaScript
• Rebass based on Styled system
• Material Components React, the official implementation of material.io

🎓 Learning Gatsby

Looking for more guidance? Full documentation for Gatsby lives on the website. Here are some places to start:

💫 Deploy

Read the documentation about deployment