Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jpedroschmitz/gatsby-starter-ts
TypeScript starter for Gatsby. No plugins and styling. Exactly the necessary to start. Ready for Gatsby 5 🔥
https://github.com/jpedroschmitz/gatsby-starter-ts
gatsby hacktoberfest react starter typescript
Last synced: about 16 hours ago
JSON representation
TypeScript starter for Gatsby. No plugins and styling. Exactly the necessary to start. Ready for Gatsby 5 🔥
- Host: GitHub
- URL: https://github.com/jpedroschmitz/gatsby-starter-ts
- Owner: jpedroschmitz
- License: mit
- Created: 2020-04-08T19:25:11.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-10-28T17:29:25.000Z (16 days ago)
- Last Synced: 2024-10-30T00:33:12.330Z (14 days ago)
- Topics: gatsby, hacktoberfest, react, starter, typescript
- Language: TypeScript
- Homepage: https://typescript.gatsbyjs.io
- Size: 4.78 MB
- Stars: 304
- Watchers: 2
- Forks: 27
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
Non-opinionated TypeScript starter for Gatsby
A TypeScript starter for Gatsby. No plugins and styling. Exactly the necessary to start.
## Features
- ⚡️ Gatsby 5
- ⚛️ React 18
- ⛑ TypeScript
- 🐐 Tests — Vitest and Testing Library out of the box
- 📏 ESLint — To find and fix problems in your code
- 💖 Prettier — Code Formatter for consistent style
- 🐶 Husky — For running scripts before committing
- 🚓 Commitlint — To make sure your commit messages follow the convention
- 🖌 Renovate — To keep your dependencies up to date
- 🚫 lint-staged — Run ESLint and Prettier against staged Git files
- 👷 PR Workflow — Run Type Check & Linters on Pull Requests
- ⚙️ EditorConfig - Consistent coding styles across editors and IDEs
- 🗂 Path Mapping — Import components or images using the `@` prefix
## Quick Start
The best way to start with this template is using the [Gatsby CLI](https://www.gatsbyjs.com/docs/reference/gatsby-cli/).
```
npx gatsby new starter-ts https://github.com/jpedroschmitz/gatsby-starter-ts
```
### Development
To start the project locally, run:
```bash
pnpm start
```
Open `http://localhost:8000` with your browser to see the result.
## Documentation
### Requirements
- Node.js >= 18
- pnpm 7
### Directory Structure
- [`__helpers__`](./__helpers__/) — Helpers files for testing configuration.
- [`__mocks__`](./__mocks__/) — Mocks for testing.
- [`.github`](.github) — GitHub configuration including the CI workflow.
- [`.husky`](.husky) — Husky configuration and hooks.
- [`src`](./src) — Application source code, including pages, components, styles.
### Scripts
- `pnpm start` — Starts the application in development mode at `http://localhost:8000`.
- `pnpm build` — Compile your application and make it ready for deployment.
- `pnpm serve` — Serve the production build of your site
- `pnpm clean` — Wipe out the cache (`.cache` folder).
- `pnpm type-check` — Validate code using TypeScript compiler.
- `pnpm lint` — Runs ESLint for all files in the `src` directory.
- `pnpm format` — Runs Prettier for all files in the `src` directory.
- `pnpm test` — Run tests with Vitest.
- `pnpm test:watch` — Run tests on watch mode.
### Path Mapping
TypeScript are pre-configured with custom path mappings. To import components or files, use the `@` prefix.
```tsx
import { Button } from '@/components/Button';
// To import images or other files from the static folder
import avatar from '@/static/avatar.png';
```
### Switch to Yarn/npm
This starter uses pnpm by default, but this choice is yours. If you'd like to switch to Yarn/npm, delete the `pnpm-lock.yaml` file, install the dependencies with Yarn/npm, change the CI workflow, Husky Git hooks to use Yarn/npm commands, and uninstall the `gatsby-plugin-pnpm` plugin (you also need to remove it from the `gatsby-config` file).
## License
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for more information.