Skip to content

Commit 567a20e

Browse files
committed
docs(Readme): update developers guide
1 parent cadc2df commit 567a20e

File tree

1 file changed

+75
-2
lines changed

1 file changed

+75
-2
lines changed

README.md

Lines changed: 75 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,17 @@
11
# component-template [![Build Status](https://travis-ci.org/reactstrap/component-template.svg?branch=master)](https://travis-ci.org/reactstrap/component-template)
22

3-
The purpose of this project is to enable the community to build and publish customized components for [reactstrap](https://github.com/reactstrap/reactstrap).
3+
Build, Document, Release & Publish React Components for [reactstrap](https://github.com/reactstrap/reactstrap) with this [Component Template](https://github.com/reactstrap/component-template).
44

55
This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).
66

7+
## [Documentation](https://reactstrap.github.io/component-template/)
8+
9+
To start using the example npm module `component-template`, check out the [documentation](https://reactstrap.github.io/component-template/).
10+
11+
## Developing with Component Template
12+
13+
Looking to build your own components? Fork this repo and proceed with the following documentation.
14+
715
### Getting started
816

917
To begin, install dependencies with
@@ -18,4 +26,69 @@ To run a local server with `create-react-app`, run:
1826
npm start
1927
```
2028

21-
A new browser window should open up with the following url: [http://localhost:3000])(http://localhost:3000)
29+
A new browser window should open up with the following url: [http://localhost:3000](http://localhost:3000)
30+
31+
### Testing components
32+
33+
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).
34+
35+
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).
36+
37+
```sh
38+
npm run test
39+
```
40+
41+
To also see test coverage when running tests, execute the following command:
42+
43+
```sh
44+
npm test -- --coverage
45+
```
46+
47+
### Adding your own components
48+
49+
Currently the example component shipped in this project is `HelloWorld`. To add your own components, replace HelloWorld with your own named component and tests.
50+
51+
Notes:
52+
53+
- Component source code should live in `/src/components`
54+
- Be sure to export your components here `/src/components/index.js`
55+
- When published to npm, the `main` script in package.json will be available at `lib/index.js` thanks to the `prebuild` task
56+
- Use
57+
58+
### Release Flow
59+
60+
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.
61+
62+
Once your components are added and tested, use the following steps to release to npm.
63+
64+
## Create Release branch
65+
66+
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. After the script is run, a branch will be pushed to the repo.
67+
68+
```sh
69+
# RELEASE_VERSION: "1.0.0", patch, minor, major
70+
RELEASE_VERSION=0.2.0
71+
npm run create-release-branch -- $RELEASE_VERSION
72+
```
73+
74+
With the branch pushed to github, you can now manually create the pr.
75+
76+
## Publish Docs
77+
78+
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.
79+
80+
Follow the next sections to publish locally or via Travis CI.
81+
82+
### Without CI
83+
84+
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.
85+
86+
### via Travis CI
87+
88+
Coming soon
89+
90+
## Publish Release
91+
92+
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.
93+
94+
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.

0 commit comments

Comments
 (0)