Starter template configured with TypeScript and TailwindCSS
Report Bug
·
Request Feature
- What is a Starter
- Installation
- Usage Guide
- Recommended Modifications
- Contributing
- License
- Contact
- Acknowledgements
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.
This template was built and aims to utilize the best of 3 main technologies.
- 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
- Type Check: Complies TypeScript files for errors.
-
If you wish to use npm as your package manager, check the recommended modifications section of the README.
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.
- 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.
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
.
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 runningnpm 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 removeeslint-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.
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.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/new-feature
) - Commit your Changes. Please use feat prefix for new features (
git commit -m 'feat: new feature added'
) - Push to the Branch (
git push origin feature/new-feature
) - Open a Pull Request
Distributed under the MIT License. See LICENSE
for more information.
Shreyas K. - @HelixW - shreyas.2000@hotmail.com
Project Link: https://github.com/helixw/gatsby-typescript-tailwind-starter