Need help with react-rollup-boilerplate?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

KaiHotz
152 Stars 33 Forks MIT License 104 Commits 1 Opened issues

Description

Boilerplate for creating React component libraries, bundled with Rollup.js to ES6 Modules, React Styleguidist, Typescript

Services available

!
?

Need anything else?

Contributors list

# 250,521
TypeScr...
HTML
formik
React
67 commits
# 49,187
React
Three.j...
HTML
CSS
3 commits
# 381,016
Shell
starter...
yii2
Docker
1 commit

Support

If you like the project and want to support my work, you can buy me a coffee :)

paypal

Getting started

There are two methods for getting started with this repo.

Familiar with Git?

  > git clone [email protected]:KaiHotz/react-rollup-boilerplate.git
  > cd react-rollup-boilerplate
  > npm install

Not Familiar with Git?

Click here to download the .zip file. Extract the contents of the zip file, then open your terminal, change to the project directory, and:

  > npm install

Developing

To start the developing run :

> npm run dev

This will build a version of your library, run the watcher and also run the Styleguide. To open the Styleguide manualy open your Browser and navigate to http://localhost:6060. Start developing your components in

src/lib/components
folder and update the
src/lib/index.js
file acordingly. Always provide an
YourComponent.examples.md
file, so your component will show up in the Styleguide. You can refer to example
Button
component, but i think you'll get the idea.

Proposals (Babel)

For smoother development some Babel plugin are included - class-properties - object-rest-spread - optional-chaining

Styling your components

SCSS
and
CSS
are supported out of the box just import your styles into your component like you normaly would do. For the use of
CSS Modules
refere to rollup-plugin-postcss

Testing

Testing is done with Jest, Enzyme and Jasmine Matchers You can refer to

Button.test.js
as an example. ```

npm run test

or (for getting coverage)
npm run test:coverage ```

Linting

Linting is set up through ESLint and configured with eslint-config-airbnb You can modify linting rules by overriding them in the

.eslintrc.json
file.
> npm run lint

or (for for automatic fixing if possible) ```

npm run lint:fix ```

Publishing your library to NPM

To release your library to NPM or your private Registry, make sure you have an active account at NPM, your

.npmrc
file is correctly setup and the repository url in
package.json
file is set to your repoitory url, then:
> npm run release

Styleguide

For custom layouts, styleing and more information about the Styleguide please refer to React Styleguidist documentation.

Deploy the Styleguide to GitHub Pages

Make sure the repository url in

package.json
file is set to your repoitory url, then:
> npm run deploy

Scripts

  • npm start
    : Only serves the Styleguide.
  • npm run build
    : Builds your library (build can be faound in
    dist
    folder).
  • npm run styleguide:build
    : Builds the static Styleguide in case you want to deploy it.
  • npm run test
    : Runs the tests.
  • npm run test:coverage
    : Runs the test and shows the coverage.
  • npm run lint
    : Runs the linter, typescipt typecheck and stylelint.
  • npm run lint:fix
    : Runs the linter, typescipt typecheck and stylelint and fixes automatic fixable issues.
  • npm run eslint
    : Runs only the javascipt linter.
  • npm run eslint:fix
    : Runs only the javascipt linter and fixes automatic fixable issues.
  • npm run stylelint
    : Runs only the sytle linter.
  • npm run stylelint:fix
    : Runs only the sytle linter and fixes automatic fixable issues.
  • npm run check-types
    : Runs typescript type checker.
  • npm run release
    : Publishes your Library on NPM or your private Registry (depending on your config in your
    .npmrc
    file).
  • npm run deploy
    : Deploys the Styleguide to GitHub Pages.

Resources

Bundler

Code Formatter

Styleguide

Testing

Linting

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.