Originally built using the Default Gatsby Starter template.
This template contains scaffolding for a Gatsby 4 project that uses TypeScript as the language, SCSS Components for styling, and Jest (using React Test Renderer) for the testing framework.
Do you find this template useful? ... Great! Please be kind and follow these steps when using this template to ensure it stays useful
- Clone the repo template (do not create project from template, actually clone it)
- Checkout a new branch
- Update packages to latest stable versions:
npm update
- Resolve any lingering issues
- Submit a PR
If there is a major upgrade available, such as Gatsby 5 being released, please open an issue.
Software
- Run
gatsby new <project-name> https://github.com/devetry/template__gatsby-ts-sass-jest
- Generate TypeScript definition files for SCSS Modules for editing (see styling) by running
npm run type-scss
The styling is Component-Scoped Styling with SCSS Modules. However, we use are using TypeScript and there is not a module for typed scss modules that has support for our version of Gatsby, therefore, there is a few extra configurations in place to fix some of missing features that are helpful for development:
- TypeScript files
.ts(x)
show a false error when importing scss files as modules. To fix this, insrc/typings/declarations.d.ts
there is a module declaration that exports all the SCSS module files. - TypeScript files
.ts(x)
are unable to recognize and suggest contents available in SCSS modules while editing. The node modulestyped-scss-modules
andnode-sass@"^4.11.0
exist in the project as dev dependencies so that we can generate TypeScript definition files for our SCSS module files. To generate said files, simply runnpm run type-scss
Jest is the testing framework for our Unit Tests. Specifically, it uses the React Test Renderer
testing package. View this documentation for the details of how it's all configured and how to write tests.