README
Features
- π» React suport >=16.8.0
βοΈ Project init with vite- π¦ Support cjs & esm
-
πͺ Github Actions support (Auto CI on pull_request / Auto Release on push tag / Auto Deploy on push & pull_request)
-
π Build npm package with tsup
-
π Built-in react dev environment
playground folder
start -->
npm run dev
-
π Use browserslistrc
-
πͺ Build styles with sass &&postcss (postcss-nested/ autoprefixer / cssnano)
-
π Stylelint that helps you avoid errors and enforce conventions in your styles.
-
π Mono repo with npm
-
π TypeScript, of course
-
π Unit Testing with Vitest
-
π Storybook for building UI components and pages
-
π§ ESLint statically analyzes your code to quickly find problems.
-
β Husky & lint-staged
-
β Commitlint that helps your team adhering to a commit convention
-
π₯³ MIT License
how to use
replace custom-package-name
with your package name
Directory structure
Project
βββ __tests__ # Unit Testing
βββ babel.config.js # babel config
βββ package.json
βββ playground # dev environment folder (can use source code)
β βββ index.html
β βββ package.json
β βββ public
β βββ src
β βββ tsconfig.json
β βββ vite-env.d.ts
β βββ vite.config.ts
βββ postcss.config.js # build styles with postcss
βββ src # Package source code
β βββ index.ts # Package source entry
β βββ stories # storybook for building UI components and pages
β βββ styles # styles for Package
β βββ types.ts # ts type declaration for Package
βββ tsconfig.json # ts config
βββ tsup.config.ts # build package with tsup
How to add GITHUB_TOKEN
How to add NPM_TOKEN
-
then copy npm token, add to github project settings
- project -> settings -> secrets -> actions -> create new token with name:NPM_TOKEN
How to add NETLIFY_TOKEN
-
then copy netlify token, add to github project settings
- project -> settings -> secrets -> actions -> create new token with name:NETLIFY_TOKEN
-
create a site on netlify
-
copy the site_id from your netlify site settings, add it to github project settings
- project -> settings -> secrets -> actions -> create new token with name:NETLIFY_SITE_ID
-
Stop Build from Build settings of site
How to generate VERCEL_ORG_ID / VERCEL_PROJECT_ID
-
run
npx vercel
in project root folder -
open .vercel/project.json
-
copy orgId & projectId, add it to github project settings
- project -> settings -> secrets -> actions -> create new token with name:VERCEL_ORG_ID & VERCEL_PROJECT_ID
-
create vercel token, add it to github project settings
- project -> settings -> secrets -> actions -> create new token with name:VERCEL_TOKEN
-
change project build setting