{"id":20625076,"url":"https://github.com/jasonsturges/vite-npm-package","last_synced_at":"2025-04-15T15:04:50.830Z","repository":{"id":142401703,"uuid":"576514246","full_name":"jasonsturges/vite-npm-package","owner":"jasonsturges","description":"Vite JavaScript library npm package template","archived":false,"fork":false,"pushed_at":"2024-10-27T18:17:15.000Z","size":48,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-15T15:04:44.173Z","etag":null,"topics":["boilerplate","library","npm","package","template","vite"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jasonsturges.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-12-10T04:33:26.000Z","updated_at":"2025-03-25T13:01:19.000Z","dependencies_parsed_at":"2024-10-27T19:45:17.287Z","dependency_job_id":null,"html_url":"https://github.com/jasonsturges/vite-npm-package","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jasonsturges%2Fvite-npm-package","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jasonsturges%2Fvite-npm-package/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jasonsturges%2Fvite-npm-package/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jasonsturges%2Fvite-npm-package/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jasonsturges","download_url":"https://codeload.github.com/jasonsturges/vite-npm-package/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249094932,"owners_count":21211837,"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","library","npm","package","template","vite"],"created_at":"2024-11-16T13:08:03.753Z","updated_at":"2025-04-15T15:04:50.809Z","avatar_url":"https://github.com/jasonsturges.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vite JavaScript NPM Package\r\n\r\nScaffold JavaScript npm packages using this template to bootstrap your next library.\r\n\r\n\u003e [!TIP]\r\n\u003e Looking for a TypeScript version of this template?  Try: [Vite TypeScript NPM Package](https://github.com/jasonsturges/vite-typescript-npm-package)\r\n\r\n\r\n## Getting Started\r\n\r\nBegin via any of the following:\r\n\r\n- Press the \"*Use this template*\" button\r\n    \r\n- Use [GitHub CLI](https://cli.github.com/) to execute: \r\n\r\n    ```\r\n    gh repo create \u003cname\u003e --template=\"https://github.com/jasonsturges/vite-npm-package\"\r\n    ```\r\n    \r\n- Simply `git clone`, delete the existing .git folder, and initialize a fresh repo:\r\n\r\n    ```\r\n    git clone https://github.com/jasonsturges/vite-npm-package.git\r\n    cd vite-npm-package\r\n    rm -rf .git\r\n    git init\r\n    git add -A\r\n    git commit -m \"Initial commit\"\r\n    ````\r\n\r\nThere is no package lock included so that you may chose either `npm` or `yarn`.\r\n\r\nRemember to use `npm search \u003cterm\u003e` to avoid naming conflicts in the NPM Registery for your new package name.\r\n\r\n\r\n## Usage\r\n\r\nThe following tasks are available:\r\n\r\n- `dev`: Run Vite in watch mode to detect changes - all modules are compiled to the `dist/` folder\r\n- `start`: Run Vite in host mode to work in a local development environment within this package - vite hosts the `index.html` with real time HMR updates\r\n- `build`: Run Vite to build a production release distributable\r\n\r\nRollup all your exports to the top-level index.js for inclusion into the build distributable.\r\n\r\nFor example, if you have a `utils/` folder that contains an `arrayUtils.js` file.\r\n\r\n/src/utils/arrayUtils.js:\r\n```js\r\nexport const distinct = (array = []) =\u003e [...new Set(array)];\r\n```\r\n\r\nInclude that export in the top-level `index.js` .\r\n\r\n/src/index.js:\r\n```js\r\n// Main library exports - these are packaged in your distributable\r\nexport { distinct } from \"./utils/arrayUtils\"\r\n```\r\n\r\n\r\n## Development\r\n\r\nThere are multiple strategies for development, either working directly from the library or from a linked project.\r\n\r\n### Local Development\r\n\r\nVite features a host mode for development with real time HMR updates directly from the library via the `start` script.  This enables rapid development within the library instead of linking from other projects.\r\n\r\nUsing the `start` task, Vite hosts the `index.html` for a local development environment.  This file is not included in the production build.  Note that only exports specified from the `index.js` are ultimately bundled into the library.\r\n\r\nAs an example, this template includes a React app, which could be replaced with a different framework such as Vue, Solid.js, Svelte, etc...\r\n\r\nFor UI projects, you may want to consider adding tools such as [Storybook](https://storybook.js.org/) to isolate UI component development by running a `storybook` script from this package.\r\n\r\n\r\n### Project Development\r\n\r\nTo use this library with other app projects before submitting to a registry such as NPM, run the `dev` script and link packages.\r\n\r\nUsing the `dev` task, Vite detects changes and compiles all modules to the `dist/` folder\r\n\r\nTo test your library from within an app:\r\n\r\n- **From this library**: run `npm link` or `yarn link` command to register the package\r\n- **From your app**: run `npm link \"mylib\"` or `yarn link \"mylib\"` command to use the library inside your app during development\r\n\r\nInside your app's `node_modules/` folder, a symlink is created to the library.\r\n\r\n\r\n## Development Cleanup\r\n\r\nOnce development completes, `unlink` both your library and test app projects.\r\n\r\n- **From your app**: run `npm unlink \"mylib\"` or `yarn unlink \"mylib\"` command to remove the library symlink\r\n- **From your library**: run `npm unlink` or `yarn unlink` command to unregister the package\r\n\r\nIf you mistakenly forget to `unlink`, you can manually clean up artifacts from `yarn` or `npm`.\r\n\r\nFor `yarn`, the `link` command creates symlinks which can be deleted from your home directory:\r\n```\r\n~/.config/yarn/link\r\n```\r\n\r\nFor `npm`, the `link` command creates global packages which can be removed by executing:\r\n```bash\r\nsudo npm rm --global \"mylib\"\r\n```\r\n\r\nConfirm your npm global packages with the command:\r\n```bash\r\nnpm ls --global --depth 0\r\n```\r\n\r\nFor your app, simply reinstall dependencies to clear any forgotten linked packages.  This will remove any symlinks in the `node_modules/` folder.\r\n\r\n\r\n## Release Publishing\r\n\r\nUpdate your `package.json` to the next version number and tag a release.\r\n\r\nAssure that your package lockfile is also updated by running an install.  For npm, this will assure the lockfile has the updated version number.  Yarn does not duplicate the version number in the lockfile.\r\n\r\nIf you are publishing to a private registry such as GitHub packages, update your `package.json` to include `publishConfig` and `repository`:\r\n\r\npackage.json:\r\n```json\r\n  \"publishConfig\": {\r\n    \"registry\": \"https://npm.pkg.github.com/@MyOrg\"\r\n  },\r\n```\r\n\r\nUnless you are using a continuous integration service such as GitHub Actions, assure that your `dist/` folder is cleanly build.  Note that `npm publish` will ship anything inside the distributable folder.\r\n\r\nFor clean builds, you may want to install the `rimraf` package and add a `clean` or `prebuild` script to your `package.json` to remove any artifacts from your `dist/` folder.  Or, manually delete the `dist/` folder yourself.\r\n\r\npackage.json:\r\n```json\r\n  \"scripts\": {\r\n    \"clean\": \"rimraf dist\"\r\n  }\r\n```\r\n\r\nBefore you submit for the first time, make sure your package name is available by using `npm search`.  If npm rejects your package name, update your `package.json` and resubmit.\r\n\r\n```bash\r\nnpm search \u003cterm\u003e\r\n```\r\n\r\nOnce ready to submit your package to the NPM Registry, execute the following tasks via `npm` (or `yarn`):\r\n\r\n```bash\r\nnpm run build\r\n```\r\n\r\nAssure the proper npm login:\r\n\r\n```bash\r\nnpm login\r\n```\r\n\r\nSubmit your package to the registry:\r\n\r\n```bash\r\nnpm publish --access public\r\n```\r\n\r\n## Continuous Integration\r\n\r\nFor continuous integration with GitHub Actions, create a `.github/workflows/publish.yml`:\r\n\r\n```yml\r\nname: Publish Package to npmjs\r\non:\r\n  release:\r\n    types: [created]\r\n\r\njobs:\r\n  build:\r\n    runs-on: ubuntu-latest\r\n    permissions:\r\n      contents: read\r\n      packages: write\r\n    steps:\r\n      - uses: actions/checkout@v4\r\n      - uses: actions/setup-node@v4\r\n        with:\r\n          node-version: '20'\r\n          registry-url: 'https://registry.npmjs.org'\r\n      - run: npm ci\r\n      - run: npm run build\r\n      - run: npm publish\r\n        env:\r\n          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}\r\n```\r\n\r\nThis will deploy your build artifact when a release is tagged.\r\n\r\nObtain an \"Automation\" CI/CD access token to bypass 2FA from [npm](https://www.npmjs.com/) by selecting your profile image in the upper right, and chosing \"Access Tokens\".\r\n\r\nTo add secrets to your repository:\r\n- From your repository, select _Settings_\r\n- From the _Security_ section of the sidebar, expand _Secrets and variables_ and select _Actions_\r\n- From the _Secrets_ tab, press _New repository secret_ to add the `NPM_TOKEN` key\r\n\r\nTo add secrets to your organization:\r\n- From your organization, select _Settings_\r\n- From the _Security_ section of the sidebar, expand _Secrets and variables_ and select _Actions_\r\n- From the _Secrets_ tab, press _New organization secret_ to add the `NPM_TOKEN` key\r\n\r\nAssure either a `.npmrc` or `publishConfig` in your `package.json`:\r\n\r\npackage.json:\r\n```json\r\n  \"publishConfig\": {\r\n    \"access\": \"public\",\r\n    \"registry\": \"https://registry.npmjs.org/\",\r\n    \"scope\": \"username\"\r\n  },\r\n```\r\n\r\nFor more information, see: \r\n- [Using secrets in GitHub Actions](https://docs.github.com/en/actions/security-guides/using-secrets-in-github-actions)\r\n- [Publish to npmjs and GPR with npm](https://github.com/actions/setup-node/blob/main/docs/advanced-usage.md#publish-to-npmjs-and-gpr-with-npm)\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjasonsturges%2Fvite-npm-package","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjasonsturges%2Fvite-npm-package","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjasonsturges%2Fvite-npm-package/lists"}