# catca-vite > Boilerplate for building a TypeScript + Rollup + Vite module that can be published to NPM. Latest version **1.0.3** (published 2022-03-20) · MIT license · 0 weekly downloads ## Install ```sh npm install catca-vite pnpm add catca-vite yarn add catca-vite bun add catca-vite ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities; high quality score. Warnings: low downloads; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.3 | | Published | 2022-03-20 | | First published | 2022-03-20 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 0 | | Unpacked size | 10 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 7 | | Author | Gumball12 | | Maintainers | catca | | Keywords | template, boilerplate, typescript, sandbox, rollup, vite | ## Links - npm: https://www.npmjs.com/package/catca-vite - Repository: https://github.com/Gumball12/ts-rollup-npm-vite-boilerplate - Homepage: https://github.com/Gumball12/ts-rollup-npm-vite-boilerplate#readme - Issues: https://github.com/Gumball12/ts-rollup-npm-vite-boilerplate/issues - npm.io page: https://npm.io/package/catca-vite ## Alternatives - [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads - [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads - [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads - [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads - [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads ## Recent versions - 1.0.3 (latest) — 2022-03-20 - 1.0.2 — 2022-03-20 ## README # ts-rollup-npm-vite-boilerplate [![codecov](https://codecov.io/gh/Gumball12/ts-rollup-npm-vite-boilerplate/branch/main/graph/badge.svg?token=7cwshFg12N)](https://codecov.io/gh/Gumball12/ts-rollup-npm-vite-boilerplate) Boilerplate for building a TypeScript + Rollup + Vite module that can be published to NPM. ## ⭐️ Included Packages | Package Name | Version | | --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | TypeScript | [![TypeScript Badge](https://img.shields.io/badge/typescript-v4.4.4-blue)](https://www.npmjs.com/package/typescript/v/4.4.4) | | Preact | [![Preact Badge](https://img.shields.io/badge/preact-v10.5.15-blue)](https://www.npmjs.com/package/preact/v/10.5.15) | | Htm | [![Htm Badge](https://img.shields.io/badge/htm-v3.1.0-blue)](https://www.npmjs.com/package/htm/v/3.1.0) | | Jest | [![Jest Badge](https://img.shields.io/badge/jest-v27.3.1-blue)](https://www.npmjs.com/package/jest/v/27.3.1) | | Rollup | [![Rollup Badge](https://img.shields.io/badge/rollup-v2.59.0-blue)](https://www.npmjs.com/package/rollup/v/2.59.0) | | Rollup-plugin-dts | [![Rollup-plugin-dts Badge](https://img.shields.io/badge/rollup--plugin--dts-v4.0.0-blue)](https://www.npmjs.com/package/rollup-plugin-dts/v/4.0.0) | | Rollup-plugin-typescript2 | [![Rollup-plugin-typescript2 Badge](https://img.shields.io/badge/rollup--plugin--typescript2-v0.30.0-blue)](https://www.npmjs.com/package/rollup-plugin-typescript2/v/0.30.0) | | Rollup-plugin-uglify | [![Rollup-plugin-uglify Badge](https://img.shields.io/badge/rollup--plugin--uglify-v6.0.4-blue)](https://www.npmjs.com/package/rollup-plugin-uglify/v/6.0.4) | | @rollup/plugin-node-resolve | [![@rollup-plugin-node-resolve Badge](https://img.shields.io/badge/@rollup/plugin--node--resolve-v13.0.6-blue)](https://www.npmjs.com/package/@rollup/plugin-node-resolve/v/13.0.6) | | Vite | [![Vite Badge](https://img.shields.io/badge/vite-v2.6.13-blue)](https://www.npmjs.com/package/vite/v/2.6.13) | | Eslint | [![Eslint Badge](https://img.shields.io/badge/eslint-v8.1.0-blue)](https://www.npmjs.com/package/eslint/v/8.1.0) | | Prettier | [![Prettier Badge](https://img.shields.io/badge/prettier-v2.4.1-blue)](https://www.npmjs.com/package/prettier/v/2.4.1) | ## 🚀 Installation ### 1. Fork this Repo After visiting [this link](https://github.com/Gumball12/ts-rollup-npm-vite-boilerplate), Fork the repository. ### 2. Clone your Repo ```sh git clone https://github.com//ts-rollup-npm-vite-boilerplate cd ts-rollup-npm-vite-boilerplate ``` ### 3. Edit the Package name, Version and Description

Edit package.json fields

### 4. Set `CODECOV_TOKEN` (Optional) > If you don't need [CodeCov CI](https://about.codecov.io/), you should delete the [.github/workflows/ci.yml](./.github/workflows/ci.yml) file. **Step 1**: Visite [CodeCov CI](https://about.codecov.io/) and get `CODECOV_TOKEN` for your repository.

Get the CODECOV_TOKEN

Copy the `Upload Token` text. **Step 2**: Enter the token with the name `CODECOV_TOKEN` in the **Secrets** of your GitHub repository.

Enter the token

### 5. Set `NPM_TOKEN` (Optional) > If you don't need to Deploy with NPM, you should delete the [.github/workflows/publish.yml](./.github/workflows/publish.yml) file. **Step 1**: Visite [NPM](https://www.npmjs.com/) and get `NPM_TOKEN` for your repository.

Get the NPM_TOKEN - 1

Click the `Generate New Token` Button

Get the NPM_TOKEN - 2

When generating a token, it must be created as an `automation` token.

Get the NPM_TOKEN - 3

Copy the `NPM Token` text. **Step 2**: Enter the token with the name `NPM_TOKEN` in the **Secrets** of your GitHub repository.

Enter the token

**Step 3**: Edit the NPM account name in the [publish.yml](./.github/workflows/publish.yml) file

Edit NPM account name

Don't forget the `@`. ## 🛠 Usage ### Scripts ```sh pnpm install # or (yarn|npm) install pnpm test # unit tests pnpm lint pnpm build # production build pnpm build:watch # for debug modules only pnpm build:sandbox # for debug modules with sandbox (alias `pnpm start`) ``` ### CodeCov CI If you have successfully set up CodeCov, if you push or PR to the `main` branch, CodeCov Coverage is automatically updated.

CodeCov CI Image

### Publish to NPM First, you need to deploy module with a Tag on GitHub using the [`npm version patch`](https://docs.npmjs.com/cli/v7/commands/npm-version) command. ```sh # Update module version (This command changes `package.json`) npm version patch # Push to GitHub git push origin main git push origin # = vX.X.X ``` Then Create and Publish a new release on GitHub.

Publish a new release

After completing the above process, you will see the NPM module deploy to `@npm-account-name/` like this:

Published NPM Module

--- _Source: https://npm.io/package/catca-vite · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._