https://github.com/reactstrap/component-template
Build, Document, Release & Publish React Components
https://github.com/reactstrap/component-template
Last synced: 4 months ago
JSON representation
Build, Document, Release & Publish React Components
- Host: GitHub
- URL: https://github.com/reactstrap/component-template
- Owner: reactstrap
- License: mit
- Created: 2016-09-24T22:15:12.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2023-01-24T17:27:39.000Z (almost 3 years ago)
- Last Synced: 2024-12-05T22:21:36.705Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://reactstrap.github.io/component-template
- Size: 1.95 MB
- Stars: 119
- Watchers: 11
- Forks: 35
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# component-template [](https://travis-ci.org/reactstrap/component-template)
Build, Document, Release & Publish React Components for [reactstrap](https://github.com/reactstrap/reactstrap) with this [Component Template](https://github.com/reactstrap/component-template).
This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).
## [Documentation](https://reactstrap.github.io/component-template/)
To start using the example npm module `component-template`, check out the [documentation](https://reactstrap.github.io/component-template/).
## Developing with Component Template
Looking to build your own components? Fork this repo and proceed with the following documentation.
### Getting started
To begin, install dependencies with
```
npm install
```
To run a local server with `create-react-app`, run:
```
npm start
```
A new browser window should open up with the following url: [http://localhost:3000](http://localhost:3000)
### Testing components
Testing is provided via [create-react-app](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#testing-components) which includes the [jest](https://facebook.github.io/jest/) test runner. [Enzyme](http://airbnb.io/enzyme/) is also added to enable better integration testing of components via [mount](http://airbnb.io/enzyme/docs/api/mount.html).
Execute the following command to run tests. Read more about that [here](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#command-line-interface).
```sh
npm run test
```
To also see test coverage when running tests, execute the following command:
```sh
npm test -- --coverage
```
### Adding your own components
Currently the example component shipped in this project is `HelloWorld`. To add your own components, replace HelloWorld with your own named component and tests.
#### Notes
- Component source code should live in `/src/components`
- Be sure to export your components here `/src/components/index.js`
- When published to npm, the `main` script in package.json will be available at `lib/index.js` thanks to the `prebuild` task
- Changelogs are important for communicating to users what features, fixes and breaking changes have been shipped. This project uses the [angular commit convention](https://github.com/angular/angular.js/blob/cf241c425b20569e4c7909bfbd379f5c07694288/CONTRIBUTING.md#-git-commit-guidelines) as standard for creating readable and machine parseable commit messages.
### Release Flow
Included in this project are a few scripts to help document, release and publish a react component. Before proceeding, make sure the `name`, `version`, `description`, and `repository` in `package.json` are updated to properly define your own component.
Once your components are added and tested, use the following steps to release to npm.
#### Create Release branch
First, run the `create-release-branch` script locally, which takes 1 argument, the release version. The release version can be a specific semantic version or it accepts `patch`, `minor`, `major` to automatically increment the current release version and update the changelog. After the script is run, a branch will be pushed to the repo.
```sh
# RELEASE_VERSION: "1.0.0", patch, minor, major
RELEASE_VERSION=0.2.0
npm run create-release-branch -- $RELEASE_VERSION
```
With the branch pushed to github, you can now manually create the pr.
#### Publish Docs
First, update the npm task `gh-pages`, to set the proper `REACT_APP_GH_PAGES_PATH` for your project. Ex: `https://reactstrap.github.io/component-template` project would be `component-template`. No need for the trailing or leading slash.
Follow the next sections to publish locally or via Travis CI.
##### Without CI
With the `REACT_APP_GH_PAGES_PATH` path updated, run the `deploy-docs` script to compile the production version of your docs and push those changes to the `gh-pages` branch of your repo.
```sh
npm run deploy-docs
```
##### via Travis CI
Coming soon
#### Publish Release
First, be sure to [signup for npm](https://docs.npmjs.com/getting-started/publishing-npm-packages#creating-a-user) if you haven't or run `npm login` with your existing credentials.
Next, run the `publish-release` task which will pull the latest changes, compile the components, tag the current commit as the `version` in `packge.json`. push the tags to github and finally will run `npm publish`. Check the [publish-release](/scripts/publish-release) script for more info.
```sh
npm run publish-release
```
## Missing Something
Feel free to create an [issue](https://github.com/reactstrap/component-template/issues/new) or PR.