Gatsby minimal TypeScript starter

🚀 Create a starter Gatsby TS site

1. Create a Github repository.

   Setup a Github repository for the project

2. Create a Gatsby-ts site.

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

   # create a new Gatsby site using the minimal TypeScript starter
   npm init gatsby -y -ts my-site-name

   Navigate to newly created folder

   cd my-site-name

3. Create a .nvmrc with a value of "16" on line 1.

   16;

4. Install global yarn(if not already).

   delete package-lock.json

5. Install current dependencies

   nvm use
   yarn install

6. Push the starter Gatsby site to the Github repository.

   Use Github to create a repository.

   # create a origin path to the Github URL and push
   git remote add origin 'github repository URL'
   git branch -M main
   git push -u origin main

🚀 Bring in the dependencies that we will need

1. eslint dependencies.

   # install eslint dependencies
   yarn add eslint prettier eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-simple-import-sort eslint-plugin-unused-imports

   # install eslint ts types
   yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser

2. tailwindcss dependencies

   # install tailwind dependencies
   yarn add tailwind @tailwindcss/aspect-ratio @tailwindcss/forms @tailwindcss/line-clamp @tailwindcss/typography autoprefixer classnames

   # install tailwind ts types
   yarn add -D @types/tailwindcss

3. Gatsby plugins

   # install ease of life gatsby plugins
   yarn add gatsby-plugin-root-import gatsby-source-filesystem

   # install ts types for Gatsby Link
   yarn add -D @types/reach__router

4. Other plugins that are needed

   # install the rest of the other plugins
   yarn add @babel/plugin-transform-runtime @headlessui/react @testing-library/jest-dom slugify

   # install other ts types
   yarn add -D @types/jest

5. Lets push the new dependencies up to main and keep a good track of operations

   git add .
   git commit -m "added all starter dependencies"
   git push

🚀 Set up all the workspace settings

1. Copy over .gitignore contents in the root of the project with Gatsby's

   .gitignore

   # Logs
   logs
   *.log
   
   # Runtime data
   pids
   *.pid
   *.seed
   
   # Directory for instrumented libs generated by jscoverage/JSCover
   lib-cov
   
   # Coverage directory used by tools like istanbul
   coverage
   junit.xml
   
   # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
   .grunt
   
   # node-waf configuration
   .lock-wscript
   
   # Compiled binary addons (http://nodejs.org/api/addons.html)
   build/Release
   
   # Dependency directory
   # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
   node_modules
   integration-tests/gatsby-cli/execution-folder/*
   *.un~
   dist
   bin/published.js
   
   # Build Path of Test Fixtures
   test/**/public
   .gatsby-context.js
   .DS_Store
   public/
   node_modules/
   e2e-tests/gatsby-pnp/
   __diff_output__/
   .cache/
   .netlify
   .Rhistory
   
   # IDE specific
   .idea/
   *.sw*
   
   # misc
   .serverless/
   .eslintcache
   scripts/.env
   
   # lock files
   yarn.lock
   package-lock.json
   # ignore any lock file other than main lock file
   !/yarn.lock
   
   # starters are special; we want to persist the lock files
   !starters/*/package-lock.json
   !themes/gatsby-starter-blog-theme/package-lock.json
   !themes/gatsby-starter-notes-theme/package-lock.json
   !themes/gatsby-starter-theme/package-lock.json
   !themes/gatsby-starter-theme-workspace/package-lock.json
   
   .parcel-cache
   
   # yarn
   yarn-error.log
   

2. Create a folder in the root of the project directory.

   • .vscode

     • Create a files in .vscode

       cspell.json

       {
         "version": "0.2",
         "ignorePaths": [],
         "dictionaryDefinitions": [],
         "dictionaries": [],
         "words": [
           "gtag",
           "headlessui",
           "heroicons",
           "tailwindcss",
           "typecheck"
         ],
         "ignoreWords": [],
         "import": []
       }

       settings.json

       {
         "editor.codeActionsOnSave": {
           "source.fixAll.eslint": true
         },
         "typescript.tsdk": "node_modules/typescript/lib",
         "search.exclude": {
           "public/**": true,
           "node_modules/**": true
         },
         "files.exclude": {
           "**/.cache": false,
           "**/.DS_Store": true,
           "**/.git": true,
           "**/.husky": true,
           "**/.idea": true,
           "**/public": true,
           "**/Thumbs.db": true,
           "node_modules/**": true
         },
         "javascript.preferences.importModuleSpecifier": "shortest"
       }

3. Create files in the root of the project directory

   .prettier

4. Learn more

   • Documentation

   • Tutorials

   • Guides

   • API Reference

   • Plugin Library

   • Cheat Sheet

🚀 Quick start (Gatsby Cloud)

Deploy this starter with one click on Gatsby Cloud: