/gatsby-typescript-tailwind-starter

Starter template for Gatsby using TypeScript and TailwindCSS

Primary LanguageTypeScriptMIT LicenseMIT

GitHub repo size GitHub last commit Maintenance


Logo

Gatsby Starter

Starter template configured with TypeScript and TailwindCSS
Report Bug · Request Feature

Table of Contents

What is a Starter

This template aims to be the pure starting point for any project utilizInstallationing the same technologies. The goal of this project is to cut down on installation and setup time so that similar projects can be set up to be up and running as soon as possible.

Built With

This template was built and aims to utilize the best of 3 main technologies.

Installation

  • To get started on your new project use this template to create a new repository.
  • This project uses yarn as the package manager. To install all the dependencies run
yarn install
  • It is recommended to update the dependencies to the latest versions upon install. Warning: This may cause bugs, if you wish to stay on the stable version, keep it to the templates defaults. The template will have dependency updates from time to time and will always be hold the stable versions.
yarn upgrade --latest
# or
yarn upgrade-interactive --latest

  • Template uses the default scripts of GatsbyJS with a few additions:

    • Type Check: Complies TypeScript files for errors. 
      yarn type-check
    • Linting: Checks for linting errors 
      yarn lint
    • Linting :: Fix: Checks for linting errors and tries to fix them automatically 
      yarn lint:fix
    • Clean: Cleans the build code from previous builds 
      yarn clean
    • Build: Compiles and builds static files for production 
      yarn build
    • Serve: Serves the build files 
      yarn serve
    • Develop: Starts the server in developer mode 
      yarn develop
    • Start: Alias for the develop command; runs yarn develop 
      yarn start
    • Format: Formats files as per prettier configuration 
      yarn format
    • Testing: Runs all tests. Note: Testing has not been set up in the template 
      yarn test

  • If you wish to use npm as your package manager, check the recommended modifications section of the README.

Usage Guide

This guide will briefly cover what has already been set up and to what extent. It will also cover what needs attention before proceeding to work on the project.

Already Setup

  • The template utilizes yarn as the package manager, to switch to npm refer to the recommended modifications section.
  • Gatsby has been set up to be up and running with the config files: gatsby-browser.js, gatsby-config.js, gatsby-node.js, gatsby-ssr.js.
  • TypeScript has been set up with a default configuration of tsconfig.json.
  • TailwindCSS has been set up and by default uses tailwind.config.js as the config file. The styles are imported in /src/css/index.css.
  • PurgeCSS has been setup with the help of a Gatsby Plugin to minimize the CSS filesize.
  • PostCSS has been setup with autoprefixer for maximum browser compability. Relavant files: postcss.config.js
  • ESLint has been set up and configured to use the Airbnb Styleguide. It utilizes .eslintrc.json as its config file. If you wish to use another styleguide refer to recommended modifications section.
  • Prettier has been set up and configured to use .prettierrc with some default rules which you may want to change as per your need. .prettierignore has also been added to ignore build files.
  • .gitignore has been added and is optimized for a gatsby project.
  • An SEO Component has been setup to utilize react-helmet for providing dynamic site metadata and social previews for all pages. Filepath: /src/components/seo.tsx.
  • MIT LICENSE has been added.
  • Set of gatsby plugins being used in template:
    • React Helmet: Provides dynamic meta data for pages. Being used in the seo component. For more information, refer to its docs.
    • Robots Provides a robots.txt file for the site. For more information, refer to its docs.
    • Sitemap: Provides a sitemap.xml for the site. For more information, refer to its docs.
    • Google Analytics: Google Analytics has been setup for the site. For more information, refer to its docs.
    • Source FileSystem: Used for accessing the file system in gatsby; in this case being used to access /src/images. For more information, refer to its docs.
    • PostCSS: Allows the use of PostCSS in Gatsby. For more information, refer to its docs.
    • PurgeCSS: Allows the use of PurgeCSS in Gatsby. For more information, refer to its docs.
    • TypeScript: Allows the compilation of typescript. For more information, refer to its docs.
    • Sharp: Offers various image optimizations and capabilities. For more information, refer to docs[1], docs[2].
    • Manifest: Creates a manifest file for PWA. For more information, refer to docs.
    • ESLint: Offers linting capabilities. For more information, refer to docs.
    • Google Fonts: Allows importing google fonts directly. For more information, refer to docs.
    • Offline: Allows caching of pages to load pages offline or with weak internet. For more information, refer to docs.

Needs to be Set Up

  • TSConfig.json may need modifications as per your project use case. Uncomment properties accordingly.
  • Custom CSS properties will be needed to be set up as per project styling guidelines. It can be done by using tailwind.config.js. Refer to TailwindCSS Docs to know more.
  • Default manifest metadata needs to be modified in gatsby-config.js under the gatsby-plugin-manifest plugin.
  • Default metadata needs to be modified in gatsby-config.js under the gatsby-plugin-react-helmet plugin.
  • Google Analytics Key needs to be added in gatsby-config.js under the gatsby-plugin-google-analytics plugin.
  • The host site needs to be modified for all plugins in gatsby-config.js.
  • Linting may need to be modified, files you may want to modify: .prettierrc, .eslintrc.json.
  • To use the SEO component, please add the required props and use images with the right resolution for proper social previews (1200 x 630).
  • Change the name and year in LICENSE.

Recommended Modifications

You may not wish to use the provided features of the template, hence these are the steps to remove some of the most commonly modified parts:

  • Yarn -> NPM: You may wish to switch to npm instead of yarn. This can be easily done by deleting the yarn.lock file and running 
    npm ci
  • Use a different styleguide: You may not wish to use the provided Airbnb Styleguide. In order to remove airbnb under plugins in .eslintrc.json and remove eslint-config-airbnb from project dependencies.
  • Remove Gatsby Plugins: You may not need some of the plugins provided. To safely remove plugins, remove the plugin from gatsby-config.js and remove the respective plugin from the project dependencies.

Contributing

This project is open for any modifications which you may feel that makes the template a better option over others. Any contributions you make are greatly appreciated.

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/new-feature)
  3. Commit your Changes. Please use feat prefix for new features (git commit -m 'feat: new feature added')
  4. Push to the Branch (git push origin feature/new-feature)
  5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Shreyas K. - @HelixW - shreyas.2000@hotmail.com

Project Link: https://github.com/helixw/gatsby-typescript-tailwind-starter

Acknowledgements