floky-widget v1.0.0

React NPM Starter Project

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.

Installation

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

Reset GIT History

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"

Available Scripts

From the project directory, you can run the following scripts with npm or yarn.

Getting Started

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.

Package Naming

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.

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

Local Testing

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.

Package.json

Update the project config found in package.json to reference your project specifics.

At a minimum, you must update the following fields:

Compiling

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.

Publish Package to NPM

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

Helpful Links

• Package Testing

Contributing

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.

License

This project is licensed under the MIT License - see the LICENSE file for more information.