Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/refzlund/giraffe

A template to quickly 📦 any typescript library/project using high industry standards!
https://github.com/refzlund/giraffe

library-template monorepo-template project-template template ts-template typescript vite-template

Last synced: 8 days ago
JSON representation

A template to quickly 📦 any typescript library/project using high industry standards!

Awesome Lists containing this project

README 

        


	

	


	Giraffe🦒

	




A template to quickly 📦 any typescript library/project using high industry standards!





  Get Started  • 

Semantic Versioning  • 

  Development







	

		
Toolchain


	

	

		pnpm

		package manager

	

	

		TypeScript

		language

	

	

		ESLint

		linter

	

	

		Vite

		build tool

	

	

		Vitest

		unit testing

	

	

		Changesets

		changelog

	

	

		Renovate

		package upgrading

	










#### Who is this for?



	Those who are planning to

	
    

    		
  • create a scalable project using Vite

    • 

    		
  • build any library using typescript
    • 

    	







#### Standardizations



- Continous Integration

- [Semantic Versioning](https://github.com/Refzlund/giraffe-template/blob/main/SEMANTICS.md#semantic-versioning)

- [Conventional Messages](https://github.com/Refzlund/giraffe-template/blob/main/SEMANTICS.md#semantic-changes)

- [Pull Request -> Squash & Merge](https://github.com/Refzlund/giraffe-template/blob/main/DEVELOPMENT.md#pull-request)

- Changesets: [Changelogs](https://github.com/Refzlund/giraffe-template/blob/main/DEVELOPMENT.md#before-merging) and [auto-publishing](https://github.com/Refzlund/giraffe-template/blob/main/.github/workflows/publish.yml)

- Linting, testing, typechecking







#### FAQ





Q: Why a Monorepo?

	


		This template seperates concerns. We can have a demo and/or documentation website live in `apps/*` — but we also seperate the toolchain. The package will only contain dependencies that's relevant to the package.

	


	


		The template can both be used for a small library, or a large project making it versatile. So, as long you are working in node.js, this template will suit you perfectly.

	








Q: Giraffe?

	


		Giraffes are a symbol of adaptation. With their long necks,

		they reach new heights, see things from a different perspective,

		and look for solutions in places you otherwise wouldn't.

		Their height makes them alert, allowing them to see trouble from far away.

	


	


		Let us aspire to be like giraffes in a demanding market,

		creating robust, scalable and maintainable solutions.

	











## Get Started





	Clone project to the current folder 

	
npx degit refzlund/giraffe





### Create your repository

- Initialize a new git repository

- Commit & push to your new repository







### Configure repository

- Auto-publishing:

	- Provide a repository secret:  `NPM_TOKEN`,  for auto-publishing via github workflows


	`https://github.com//settings/secrets/actions`

	- Uncomment action at `.github/workflows/publish.yml`

- Activate [renovate](https://github.com/settings/installations/39337889) and [changesets](https://github.com/settings/installations/39340984) for your repository

- Change Pull Requests to **only allow** `Squash: Default to pull request title`


`https://github.com//settings#merge-button-settings`

- Create branch protection at
 `https://github.com//settings/branch_protection_rules/new`
and enable:

	- Require a pull request before merging

		- Untick 'Require approvals'

	- Require status checks to pass before merging

		- Add [`test`](https://github.com/Refzlund/giraffe/blob/main/.github/workflows/main.yml#L9) to the list of required status checks

	- Allow force pushes

		- Specify who can force push *will allow administrators automatically

- Allow workflow **Read and write permissions**
`https://github.com//settings/actions`

	- Below ^, tick on '**Allow GitHub Actions to create and approve pull requests**'







### Create branch

Let's set a good first example, and create a branch for configurating our project.



We will push changes one by one into our new branch.



Create a branch following [Semantic Changes](./SEMANTICS.md):  `chore-configurating-initial-project`







### Configure your library

- Find & Replace `` with your repository

	- Example: `` -> `x-classes`

- Find & Replace `` with your owner/repository

	- Example: `` -> `refzlund/x-classes`

- Rename `packages/template` to ``, ex. -> `packages/x-classes`

- Configure your `packages//package.json`

- Define your **monorepo** *README*

- Define your **library package** *README*







### Changelog!

Great! We've configured our project. Let's create our first patch release using changeset.



`pnpm i`



- Create changeset: 

	1. `npx changeset`

	1. Select your package using space, enter to continue

	1. No major changes

	1. No minor changes

	1. Patch — `chore: configurating initial project`

- Push your changes

- Create pull request on the main branch for `chore-configurating-initial-project`

	- Title: `chore: configurating initial project`

- ***Squash & Merge changes***



When you're ready to publish a new release, merge the incoming "Version Packages"-pull request by changesets.







Congratsulations! You're a natural🚀🎉








## Development

See [Development](./DEVELOPMENT.md)







### Community tips & tricks

> [!NOTE]  

> Pull requests and issues to this repository are more than welcome🦒



- [Shield.io](https://shields.io/): Spice up your README.md using badges

	- [GitHub Release badge](https://shields.io/badges/git-hub-release-with-filter)

- Paths in `tsconfig.json` allows you to [import aliases](https://www.npmjs.com/package/vite-tsconfig-paths)

- Complex projects can use Docker containers to make setting up a project take 5 minutes instead of 5 hours

- Cache your project using [Turbo Monorepo](https://turbo.build/repo/docs/getting-started/existing-monorepo) and [Caching it via GitHub Actions](https://github.com/dtinth/setup-github-actions-caching-for-turbo)



#### VSCode Extensions

- [Toggle Excluded Files](https://marketplace.visualstudio.com/items?itemName=amodio.toggle-excluded-files): Hide unnecessary config files

- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint): Integrates ESLint into VS Code

- [Vitest Runner](https://marketplace.visualstudio.com/items?itemName=kingwl.vscode-vitest-runner): Run your Vitests with a single click

	- It launches the terminal. 


	After — press arrow up — replace `vitest run ...` with `vitest watch ...`, and it will run the tests when the files change.

- [Console Ninja](https://marketplace.visualstudio.com/items?itemName=WallabyJs.console-ninja): Outputs console logs in your IDE — immensly helpful debugging tool 







### Get Inspired

Here are some repositories that follow similar structure:



- [sveltejs/kit](https://github.com/sveltejs/kit)