{"id":15007599,"url":"https://github.com/wolfpackthatcodes/vite-typescript-package-toolkit","last_synced_at":"2026-01-08T09:41:34.948Z","repository":{"id":195731093,"uuid":"693506066","full_name":"wolfpackthatcodes/vite-typescript-package-toolkit","owner":"wolfpackthatcodes","description":"Toolkit for creating Vite TypeScript library npm packages.","archived":false,"fork":false,"pushed_at":"2024-04-12T20:15:01.000Z","size":1324,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2024-04-13T03:51:53.195Z","etag":null,"topics":["boilerplate","github-actions","github-packages","library","npm","npm-registry","npmjs","package","template","typescript","vite","vitest","yarn"],"latest_commit_sha":null,"homepage":"","language":"Makefile","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wolfpackthatcodes.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":".github/SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null},"funding":{"custom":["https://www.buymeacoffee.com/luisaveiro"]}},"created_at":"2023-09-19T06:59:10.000Z","updated_at":"2024-04-15T08:57:22.102Z","dependencies_parsed_at":null,"dependency_job_id":"2f8b7f6c-9104-46ee-86d9-edf1fcbc12a7","html_url":"https://github.com/wolfpackthatcodes/vite-typescript-package-toolkit","commit_stats":null,"previous_names":["wolfpackthatcodes/vite-typescript-package-toolkit"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wolfpackthatcodes%2Fvite-typescript-package-toolkit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wolfpackthatcodes%2Fvite-typescript-package-toolkit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wolfpackthatcodes%2Fvite-typescript-package-toolkit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wolfpackthatcodes%2Fvite-typescript-package-toolkit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wolfpackthatcodes","download_url":"https://codeload.github.com/wolfpackthatcodes/vite-typescript-package-toolkit/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246574859,"owners_count":20799221,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["boilerplate","github-actions","github-packages","library","npm","npm-registry","npmjs","package","template","typescript","vite","vitest","yarn"],"created_at":"2024-09-24T19:12:03.439Z","updated_at":"2026-01-08T09:41:34.919Z","avatar_url":"https://github.com/wolfpackthatcodes.png","language":"Makefile","funding_links":["https://www.buymeacoffee.com/luisaveiro"],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"http://github.com/wolfpackthatcodes/vite-typescript-package-toolkit\"\u003e\n    \u003cimg src=\"./images/banner.png\" alt=\"banner\" width=\"100%\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch4 align=\"center\"\u003e\n  Toolkit for creating Vite TypeScript library npm packages.\n\u003c/h4\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#about\"\u003eAbout\u003c/a\u003e •\n  \u003ca href=\"#disclaimer\"\u003eDisclaimer\u003c/a\u003e •\n  \u003ca href=\"#getting-started\"\u003eGetting Started\u003c/a\u003e •\n  \u003ca href=\"#how-to-use\"\u003eHow To Use\u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#changelog\"\u003eChangelog\u003c/a\u003e •\n  \u003ca href=\"#contributing\"\u003eContributing\u003c/a\u003e •\n  \u003ca href=\"#security-vulnerabilities\"\u003eSecurity Vulnerabilities\u003c/a\u003e •\n  \u003ca href=\"#sponsor\"\u003eSponsor\u003c/a\u003e •\n  \u003ca href=\"#license\"\u003eLicense\u003c/a\u003e\n\u003c/p\u003e\n\n## About\n\nThis repository is a GitHub Template for scaffolding a TypeScript library npm package. This repository includes the following:\n\n- Example package code.\n- VS Code recommended extensions \u0026 settings.\n- A Makefile to automate the set-up of the Vite TypeScript package toolkit.\n- A Docker Compose file to run Vitest UI to interact with your tests.\n- GitHub Actions for pull requests, publishing to npm registry \u0026 GitHub Packages.\n- GitHub community standards documents and policies.\n\n---\n\n#### Tech Stack\n\nThe tech stack included in this repository:\n\n- Node.js\n- Vite\n- Vitest\n- TypeScript\n- ESLint\n- Prettier\n- GitHub Actions\n- Docker\n\n## Disclaimer\n\n\u003e [!IMPORTANT]  \n\u003e The Docker Compose file included in this repository was configured for local environments. Do not deploy the Docker Compose file in production environments.\n\n## Getting Started\n\nThis repository requires the use of [Node.js](https://nodejs.org) and a Node.js package manager e.g. [Yarn](https://yarnpkg.com/) or alternately, you can use [Docker](https://www.docker.com/). You will need to make sure your system meets the following prerequisites:\n\n- Node \u003e= 20.0.0\n- Docker Engine \u003e= 20.10.00\n\n---\n\n#### Download Repository\n\nThere are a few ways to start using this repository. You can begin by following any of the steps:\n\n- Press the \"_Use this template_\" button or follow the steps in the GitHub documentation for [creating a repository from a template](https://docs.github.com/en/github/creating-cloning-and-archiving-repositories/creating-a-repository-from-a-template) for a step-by-step guide.\n\n- Use [degit](https://github.com/Rich-Harris/degit) to execute:\n\n  ```shell\n  degit github:wolfpackthatcodes/vite-typescript-package-toolkit\n  ```\n\n- Use [GitHub CLI](https://cli.github.com/) to execute:\n\n  ```shell\n  gh repo create \u003cname\u003e --template=\"https://github.com/wolfpackthatcodes/vite-typescript-package-toolkit\"\n  ```\n\n- Or simply `git clone` this repository, delete the existing .git folder, and then run the following commands:\n\n  ```shell\n  git init \u0026\u0026 git add -A \u0026\u0026 git commit -m \"Initial commit\"\n  ```\n\n## How To Use\n\nBelow, we have outlined the main steps you would need to take to get started.\n\n#### Directory Structure\n\nThe package code is located in the `./code` directory. This repository includes a sum function for adding numbers and test examples using Vitest.\n\n---\n\n#### Install Dependencies\n\nYou can run the `yarn install` command or use the Makefile `local-setup` target to install your package dependencies.\n\n```shell\n$ yarn install\n\n# or\n\n$ make local-setup\n```\n\n\u003e [!NOTE]  \n\u003e The Makefile `local-setup` target utilizes Docker. Please have Docker installed and running before executing the make command.\n\n---\n\n#### Package Development\n\nDuring development, you can link your package to a project. This is often useful to test out new features or when trying to debug an issue. \n\n###### Link Package\n\nTo link your package from within an app:\n\n- **From your package**:  \n  Run the `link` command to register the package.\n\n  ```shell\n  $ yarn link\n  ```\n\n- **From your app**:  \n  Run the `link` command to use the package inside your app during development.\n\n  ```shell\n  $ yarn link \"package-name\"\n  ```\n\n###### Unlink Package\n\nOnce you have completed developing your package, you will need to `unlink` both your library and test app projects.\n\n- **From your app**:  \n  Run the `unlink` command to unlink a package that was symlinked during development.\n\n  ```shell\n  $ yarn unlink \"package-name\"\n  ```\n\n- **From your package**:  \n  Run the `unlink` command to remove the global symbolic link (symlink) for the package.\n\n  ```shell\n  $ yarn unlink\n  ```\n\n---\n\n#### Testing Frameworks\n\nThis repository includes [Vitest](https://vitest.dev/) \u0026 [Vitest UI](https://vitest.dev/guide/ui). You can run the following command to access the Vitest UI.\n\n```shell\n$ yarn run test:ui\n\n# or\n\n$ docker compose up\n```\n\nThen you can visit the Vitest UI in your web browser at [http://localhost:51204/\\__vitest__/](http://localhost:51204/__vitest__/).\n\n\u003e [!TIP]\n\u003e You can override the variables in the Docker Compose file, e.g. container name, network name and port mapping. This repository includes a DotEnv example file (`.env.example`) that you can copy to create your DotEnv file and override the Docker Compose variables.\n\n---\n\n#### GitHub Actions\n\nThis repository includes Composite Actions and three GitHub Actions:\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003ePull Request\u003c/b\u003e\u003c/summary\u003e\n\nThe Pull Request workflow only runs when a `pull_request` event's activity type is **opened**, **synchronize**, or **reopened** and when git push affects files in the `code` directory.\n\n**Please note:** Workflows will not run on the `pull_request` activity if the pull request has a merge conflict. The merge conflict must be resolved first.\n\n##### Workflow Jobs\n\nThe Pull Request workflow will run the following jobs:\n\n- Run linting \u0026 formatting\n- Run type checking \u0026 tests (Node 20.x, 21.x \u0026 22.x)\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003ePublish to npm registry\u003c/b\u003e\u003c/summary\u003e\n\nThe publish to npm registry workflow only runs when a `release` event's activity type is **published**. The workflow will publish your package to [npm registry](https://www.npmjs.com/).\n\n**Please note:** Workflows are not triggered for the created, edited, or deleted activity types for draft releases. When you create your release through the GitHub browser UI, your release may automatically be saved as a draft.\n\n##### Workflow Jobs\n\nThe publish to npm registry workflow will run the following jobs:\n\n- Run type checking \u0026 tests\n- Build \u0026 publish package\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003ePublish to GitHub Packages\u003c/b\u003e\u003c/summary\u003e\n\nThe publish to GitHub Packages workflow is similar to the publish to npm registry workflow. The workflow will publish your package to [GitHub packages](https://github.com/features/packages).\n\n\u003c/details\u003e\n\n---\n\n#### Publishing Package\n\nBefore you publish your package, there are a few things you need to do.\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003e1. Update package.json\u003c/b\u003e\u003c/summary\u003e\n\nThe `package.json` file contains descriptive and functional metadata about your project, such as a **name**, **version**, and **dependencies**.\n\n###### Example of package.json\n\n```json\n{\n  \"name\": \"@wolfpackthatcodes/package-name\",\n  \"description\": \"Package description\",\n  \"version\": \"0.0.0\",\n  \"license\": \"MIT\",\n  \"homepage\": \"https://github.com/wolfpackthatcodes/vite-typescript-package-toolkit\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/wolfpackthatcodes/vite-typescript-package-toolkit.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/wolfpackthatcodes/vite-typescript-package-toolkit/issues/new/choose\"\n  },\n  \"author\": {\n    \"name\": \"Luis Aveiro\",\n    \"email\": \"support@luisaveiro.io\"\n  },\n  \"keywords\": [\"wolfpackthatcodes\", \"vite\", \"typescript\", \"package\", \"toolkit\"]\n}\n```\n\nFor a list of available `package.json` fields, you can visit [npm docs package.json page](https://docs.npmjs.com/cli/v10/configuring-npm/package-json).\n\nRemember to use the `npm search \u003cterm\u003e` to avoid naming conflicts in the npm registry for your new package name.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003e2. Update vite.config.ts\u003c/b\u003e\u003c/summary\u003e\n\nIn your `./code/vite.config.ts` file, you need to update the library name and filename to your package name:\n\n```typescript\nexport default defineConfig({\n  build: {\n    sourcemap: true,\n    lib: {\n      entry: path.resolve(__dirname, 'src/index.ts'),\n      name: 'package-name', // \u003c-- Change here.\n      fileName: 'package-name', // \u003c-- Change here.\n    },\n  },\n});\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003e3. Publish to npm registry\u003c/b\u003e\u003c/summary\u003e\n\nWhen you sign up for an npm user account or create an organization, you are granted a scope that matches your user or organization name. You can use this scope as a namespace for related packages.\n\n##### Scope format\n\n```\n@username/package-name\n```\n\nA scope allows you to create a package with the same name as a package created by another user or organization without conflict.\n\n**Please note:** Unscoped packages are always public and private packages are always scoped.\n\n##### Update scope\n\nIn `./.github/publish-to-npm-registry.yml` file, you need to update the npm scope to your npm username or organization name.\n\n```yaml\n- name: Use Node.js ${{ env.node-version }}\n  uses: ./.github/actions/setup-node\n  with:\n    node-version: ${{ env.node-version }}\n    registry-url: 'https://registry.npmjs.org'\n    scope: '@wolfpackthatcodes' # \u003c-- Change here.\n```\n\n##### Update package access\n\nBy default, the publish to npm registry workflow will publish your package as a public package. If you want to publish a private package you need to update the access to be `restricted`.\n\n```yaml\n- name: Publish the package to npm registry\n  uses: ./.github/actions/publish-npm-package\n  env:\n    NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}\n  with:\n    access: 'restricted' # \u003c-- Add here.\n```\n\n##### Generate npm access token\n\nYou will need to log into your [npm account](https://www.npmjs.com/). If you don't have an account, you can follow the steps in npm documentation for [setting up your npm user account](https://docs.npmjs.com/creating-a-new-npm-user-account) for a step by step guide. Once you have logged into your account, you will need to create a legacy token with the **Automation** type.\n\n**Automation type:** You can use these tokens to download packages and install new ones. These tokens are best for automation workflows where you are publishing new packages. Automation tokens do not 2FA for executing operations on npm and are suitable for CI/CD workflows.\n\nYou can follow npm documentation for [creating and viewing access tokens](https://docs.npmjs.com/creating-and-viewing-access-tokens) for a step by step guide.\n\n##### Saving npm access token as a secret\n\nOnce you have created your npm access token, you will need to store the access token as an `NPM_TOKEN` secret in your GitHub repository or organization. You can follow GitHub documentation for [using secrets in GitHub Actions](https://docs.github.com/en/actions/security-guides/using-secrets-in-github-actions) for a step by step guide.\n\n##### Don't publish to npm registry\n\nIf you don't want to publish to npm registry, you can delete the workflow.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003e4. Publish to GitHub Packages\u003c/b\u003e\u003c/summary\u003e\n\nThe publish to GitHub Packages workflow is similar to the publish to npm registry workflow and reuses the same Composite Actions.\n\n##### Update scope\n\nIn `./.github/publish-to-github-packages.yml` file, you need to update the npm scope to your npm username or organization name.\n\n```yaml\n- name: Use Node.js ${{ env.node-version }}\n  uses: ./.github/actions/setup-node\n  with:\n    node-version: ${{ env.node-version }}\n    registry-url: 'https://npm.pkg.github.com/'\n    scope: '@wolfpackthatcodes' # \u003c-- Change here.\n```\n\n##### Update package access\n\nBy default the publish to GitHub Packages workflow will publish your package as a public package. If you want to publish a private package you need to update the access to be `restricted`.\n\n```yaml\n- name: Publish the package to GitHub Packages\n  uses: ./.github/actions/publish-npm-package\n  env:\n    NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n  with:\n    access: 'restricted' # \u003c-- Add here.\n```\n\n##### Don't publish to GitHub Packages\n\nIf you don't want to publish to GitHub Packages, you can delete the workflow.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003e5. Create a release\u003c/b\u003e\u003c/summary\u003e\n\nOnce you have completed the steps above and finalized your package, you can create a release. You can follow GitHub documenation for [managing releases in a repository](https://docs.github.com/en/repositories/releasing-projects-on-github/managing-releases-in-a-repository) for a step by step guide.\n\nOnce your release has been created, the publish to the npm registry and GitHub Packages workflows will be triggered. If you don't want to publish your package to the npm registry or GitHub packages, you can delete the respective workflow.\n\n\u003c/details\u003e\n\n## Changelog\n\nPlease see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.\n\n## Contributing\n\nWe encourage you to contribute to **_Vite Typescript Package Toolkit_**! Contributions are what makes the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.\n\nPlease check out the [contributing to Vite Typescript Package Toolkit guide](.github/CONTRIBUTING.md) for guidelines about how to proceed.\n\n## Security Vulnerabilities\n\nTrying to report a possible security vulnerability in **_Vite Typescript Package Toolkit_**? Please check out our [security policy](.github/SECURITY.md) for guidelines about how to proceed.\n\n## Sponsor\n\nDo you like this project? Support it by donating.\n\n\u003ca href=\"https://www.buymeacoffee.com/luisaveiro\"\u003e\n  \u003cimg src=\"./images/bmc-button.svg\" alt=\"Code Review\" width=\"144\"\u003e\n\u003c/a\u003e\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwolfpackthatcodes%2Fvite-typescript-package-toolkit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwolfpackthatcodes%2Fvite-typescript-package-toolkit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwolfpackthatcodes%2Fvite-typescript-package-toolkit/lists"}