Little Bits is a series of short articles explaining quick solutions to common dev problems. No unnecessary descriptions or code snippets. No bullshit.
In this short article, I want to show you how you can easily set up your dev environment for building React component and then how you can deploy it to NPM so other developers can start using it.
Useful links:
Plan
- Create a project - yarn or npx
- Build a component or use the default one
- Run build
- Prepare package.json file
- Deploy to NPM
1. Create a project - yarn or npx
yarn create @neutrinojs/project my-not-really-exciting-component
or
npx @neutrinojs/create-project my-not-really-exciting-component
After that Neutrino will ask you about your project. Select Components -> React components. In the next step choose the testing library (I usually go for Jest) and linting style (Airbnb or StandardJS). Neutrino will install all the dependencies and set up the boilerplate.
2. Build a component or use the default one
Neutrino supplies us with a simple HelloWorld component. We will use it in this step, but obviously, in a real-world scenario, build something awesome.
TIP: Add readme.md file with directions for installing, configuring, and using your code.
To run the dev environment run:
yarn start
or
npm start
That will open localhost:5000 with your project.
3. Run build
If you're happy with your component run:
yarn run build
or
npm run build
Your project is optimized and ready for production.
4. Prepare package.json file
Before deploying our super component, we need to add some details to package.json. Here's a sample, minimal configuration:
{
"name": "my-not-really-exciting-component",
"version": "1.0.0",
"description": "My component, not really exicitng.",
"main": "build/HelloWorld.js",
"author": "Your Name <your_email@gmail.com>",
"repository": {
"type" : "git",
"url" : "https://github.com/yourprofile/my-not-really-exciting-component"
},
"keywords": [
"react",
"javascript",
"component"
],
"license": "MIT",
"scripts": {
"build": "neutrino build",
"start": "neutrino start",
"lint": "neutrino lint",
"test": "neutrino test"
},
"devDependencies": {
"@neutrinojs/airbnb": "^8.3.0",
"@neutrinojs/jest": "^8.3.0",
"@neutrinojs/react-components": "^8.3.0",
"neutrino": "^8.3.0",
"prop-types": "^15.7.2",
"react": "^16.9.0",
"react-dom": "^16.9.0"
}
}
5. Deploy to NPM
Create an account on npm. After that, from your terminal simply run:
npm publish
Summary
That's it, you've managed to successfully deploy your react component to the NPM registry. Now anyone else can start using it in their projects and you just need to prepare for all the dev fame coming your way 😎.
Top comments (0)