This is a starter template that can be extended to quickly build a Storybook React UI component library in TypeScript. This template includes the ability to:
- deploy the Storybook to GitHub Pages
- publish npm package of the UI component library to GitHub Packages or the npm registry
- deploy preview Storybook environments in Chromatic on creation of pull-requests (to merge into the main branch).
Access live QA environment deployed on GitHub Pages.
- Include
"publishConfig": {
"registry": "https://npm.pkg.github.com"
},
in the package.json.
- In package.json, change value of the "name" field to
@<GitHub-account-that-owns-repo>/typescript-react-storybook-template
. In the case of my repo, that would be
"name": "@AVu120/typescript-react-storybook-template",
- Enable GitHub Actions workflow: .github\workflows\publish_github_package.yml (read comments in that file for instructions on how to enable it).
- Disable .github\workflows\publish_to_npm_registry.yml.
- Exclude
"publishConfig": {
"registry": "https://npm.pkg.github.com"
},
from package.json.
- In package.json, change value of "name" field to
@<npm-account-username>/typescript-react-storybook-template
. In the case of my profile in which I want to publish to https://www.npmjs.com/package/@anthonyhienvu/typescript-react-storybook-template, that would be
"name": "@anthonyhienvu/typescript-react-storybook-template"
-
Enable GitHub Actions workflow: .github\workflows\publish_to_npm_registry.yml (read comments in that file for instructions on how to enable it).
-
Disable .github\workflows\publish_github_package.yml.
-
Increment the semantic versioning in the package.json file to reflect the changes you have made.
-
Create a pull-request (PR) to merge your feature branch into the main branch.
-
Have relevant stakeholders inspect code/DOM/component/visual/story changes in the Chromatic PR preview environment. You can access this PR preview environment by going to the pull-request page:
-
Click on the 'Details' link.
-
Click on one of the links below to see the full updated Storybook or only the PR changes deployed in Chromatic.
-
If you open the build details on Chromatic, you'll see a summary of the changes in the PR:
- Click on the 'Review changes' button to drill-down into each change.
- After all the changes have been accepted in Chromatic & the PR has been approved on GitHub by relevant stakeholders, merge & squash the PR into main.
On completion of step 8, the updated Storybook will be automatically deployed to the live QA environment (if .github\workflows\deploy_to_qa_env.yml is enabled).
- Create a .npmrc file in the root of your project directory if it doesn't already exist.
- Add this to your .npmrc file:
@<Github-account-that-owns-repo-hosting-the-GitHub-Package>:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=
E.g. for this template repo, this would be
@avu120:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=
- Generate a GitHub personal access token with repo, read:packages, write:packages permissions.
- Add that token into the .npmrc file as follows (fake token used as example)
@avu120:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=ghp_hCL59WDSY2fj1SbJOiwA5hpA7Hao2w4mak29
- Go to the repo home page.
- Click on the typescript-react-storybook-template package link:
- Follow the displayed instructions to import the package into your project.
- Go to https://www.npmjs.com/package/@anthonyhienvu/typescript-react-storybook-template
- Follow the instructions to import the package into your project.
- Name: Anthony Hien Vu
- Email: [email protected]
- LinkedIn: www.linkedin.com/in/anthony-hien-vu
- Online Resume/Portfolio: https://avu120.github.io/portfolio/