A starter project (or boilerplate) for rapidly publishing npm packages with React and TypeScript.
This project is intended to help streamline individual package development by bundling the dependencies required to start publishing packages into a single resource.
This project is bootstrapped with Create React App and Tailwind CSS for rapid development. Microbundle is used for code bundling prior to distribution on npm.
Clone the repo to your local environment.
git clone https://github.com/dcooney/react-npm-starter.gitInstall the project dependencies with npm or yarn.
npm installStart the local development server at http://localhost:3000
npm run startAfter cloning, you'll want to clear the GIT history otherwise your project will contain the history from this repo.
rm -rf .git
git init
git add .
git commit -m "setup project"
From the project directory, you can run the following scripts with npm or yarn.
| Script | Usage |
|---|---|
npm run start |
Starts the demo app in development mode @ http://localhost:3000. |
npm run build |
Builds a production version of the package to the dist directory with Microbundle. |
npm run build:docs |
Builds the demo app to the docs directory for deployment to [Github Pages](https://pages.github.c |
After the initial project setup is complete and the local development server is up and running, it's time to choose a name and start developing the package.
Note: All package source files are located in the src/lib directory of the project.
The first thing to do is to choose a unique name for the package.
Go to the NPM registry and run a search. Be sure there isn't an exact match to the name you intend to use or you will need to do one of the following:
- Select a different name for the component.
- Publish as a Scoped Package.
In the src/lib directory of the project is an Example component that is included with this starter. The Example component is a simple HTML button that is intended to be distributed as a package on npm.
Go ahead and rename this component or create an entirely new component. This will be the main component used for distribution, so add all the component logic and functionality to this entry point.
Testing your package locally involves importing the component directly into the demo application.
With the local development server running:
- Open the
App.tsxfile found in the root of thesrcdirectory. - Import the component as you would any other React component.
- Continue building out the package until the functionality is working as expected.
Read more about Package Testing below.
Update the project config found in package.json to reference your project specifics.
At a minimum, you must update the following fields:
| Field | Description |
|---|---|
name |
Name of the package. |
version |
Package version. |
description |
Short description of the package. |
source |
Path to the primary entry point of the package. |
types |
Path to compiled TypeScript definitions. |
author |
Package author. |
keywords |
Help people discover the package. |
repository |
GIT repository where the code lives. |
bugs |
URL to the project issue tracker. |
When you're ready to test the package for distribution, run npm run build to create a production version of the package with Microbundle to the dist directory. This will allow you to import the package into another project to begin testing the implementation.
Note: The dist directory is not committed to the GIT repo.
Publishing your public or private package is as easy as running the npm publish command, however, before you can do so you'll need to sign up for an npm account.
Here are a few links to read through before publishing your package.
- Fork this repository.
- Create your branch: git checkout -b my-new-feature.
- Commit your changes: git commit -m 'Add some feature'.
- Push to the branch: git push origin my-new-feature.
After your pull request is merged, you can safely delete your branch.
This project is licensed under the MIT License - see the LICENSE file for more information.