Code Monkey home page Code Monkey logo

lerna-starter's Introduction

Lerna Starter Kit

All Contributors styled with prettier

This starter kit leverages Lerna and Storybook to set you up with a simple UI Development environment to develop, test and publish your npm packages.

The main focus of the starter kit is to enable you to have multiple React components published as separate packages under a single repo (we get this ability from Lerna and the ability to run them all in one place which we get from Storybook. By running them all in one place we can rapidly develop new React components, test them and deploy all from the same cmd line!

It could probably be adapted for Vue & React Native components also.

All commands in this project use yarn but feel free to use npm if you would prefer.

Getting Started

  1. Clone the project: git clone [email protected]:kicktail/lerna-starter.git
  2. Update the package.json with your details
  3. Setup project: yarn install
  4. Run yarn start

Demo / Example Package

Running yarn start will spin up Storybook and navigating to http://localhost:9001/ you will be able to see the example package showcased in Storybook. This is only a simple example package included to get you up and running with a demo. If you want to skip this part just delete this package and skip to Creating a Package or have a look at the scripts available.

Publishing

Versioning By default this project mimics lerna and operates on Fixed/Locked mode.

If you want to increment package versions independently of each other, open lerna.json and update the versions to be "independent", this will run Lerna in independent mode.

Scripts

A look at the scripts that are available:

  • To bootstrap your packages and start your UI development environment run:
yarn start
  • To easily install all the dependencies in your individual packages at once run:
yarn bootstrap
  • Run all your packages tests and generate coverage report:
yarn test
  • To export your storybook as a static app:
yarn export-static-storybook
  • It will be placed in .out/ To test locally after export:
cd .out
python -m SimpleHTTPServer
  • Create a new release of the packages that have been updated. Prompts for a new version and updates all the packages on git and npm:
yarn publish

This project is powered by Lerna so all Lerna commands are also available. If you do wish to use these.

Creating A Package

To get started with your first package:

  1. Create a new directory for your package:

A basic package structure will look like:

package-name/
 ├──src/
 |   ├──index.js                    * Entry point for you package
 |   ├──index.spec.js               * Test file for entry point
 |   └──styles/                     * Styled components directory
 |       └──styledComponent.js
 │
 ├──index.story.js                  * Storybook story for entry point
 ├──.gitignore                      * .gitignore specific to this package
 ├──README.md                       * README specific to this package
 └──package.json                    * Info for this independent package
  1. Run yarn start which will bootstrap your package and run Storybook.

  2. Start building out your Component/Package and use the Story to view it as you develop.

  3. Write Tests and Publish!

Contributing

The main purpose of this repository is to continue to evolve Lerna starter kit. Lerna starter kit is to enable you to have multiple React components published as separate packages under a single repo. Have a look at our Contributing Guide

Author

Gary Meehan https://github.com/garmeeh


Change Log

v0.0.1

Initial Commit

v0.0.2

Add Contributing Guide

Contributors

Thanks goes to these wonderful people (emoji key):


Gary Meehan

💻 📖 💡 🤔 🚇 👀 ⚠️

This project follows the all-contributors specification. Contributions of any kind welcome!

lerna-starter's People

Contributors

garmeeh avatar rsaavy avatar viktorolund avatar

Watchers

ishida avatar James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.