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.git

Install the project dependencies with npm or yarn.

npm install

Start the local development server at http://localhost:3000

npm run start

After 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.

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:

1. Select a different name for the component.
2. 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:

1. Open the App.tsx file found in the root of the src directory.
2. Import the component as you would any other React component.
3. 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:

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.

→ Testing Wiki

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.

• Unscoped Public Package
• Scoped Public Package
• Private Package

• Package Testing

1. Fork this repository.
2. Create your branch: git checkout -b my-new-feature.
3. Commit your changes: git commit -m 'Add some feature'.
4. 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.