Hey! I'm on a mission to make 100 React.js projects ending March 31st. Please follow my dev.to profile or my twitter for updates and feel free to reach out if you have questions. Thanks for your support!
npm? I recommend doing so because it is a great exercise and can help you know what is going on when you download popular packages.
Getting your package on npm is surprisingly easy, and I found that most of the tutorials out there overcomplicate the issue. So I'm going to do it in just a few steps here:
You also need to initialize this as an npm project by typing the following in your terminal while in the root of your project:
These details will be displayed as-is on npmjs.com so be careful!
Do this after running
npm init above. You have to do this or other people won't be able to download it and use it. It's super important.
If you are writing modern JS and want to transpile it with Babel and just use the resulting code for your package, you can. That's actually what the author recommended in this tutorial I read today. However, any modern browser worth its salt can read and interpret ES6 code.
Readability and usability are important concerns though which you should take into consideration when picking the package you want to publish.
If you needed an entire react project or used
create-react-app to create and test your component, or if you wrote a JS file and were testing it in a website- now is the time to remove the environment you placed it in.
For example- you shouldn't upload a whole React project if you're just publishing a single component. After building the project using
npm run build I deleted the entire project except the
Readme and the
package.json file. I also left my hidden
.git file so that I could commit changes and push the project when ready.
There's the old joke that the heaviest object in the universe is an node module... don't perpetuate the stereotype. Delete the files your user won't need.
Your Readme should be clear and understandable. I believe it's a requirement, but it's also a courtesy to other developers who might actually use your package. Even if your package is silly or a joke, provide some details on what it is and how to install and use it. This should be a no-brainer.
Don't have a Readme already? No problem. Open your terminal to the project directory and type the following command (on a Mac):
This will create a markdown file at the root of your folder. If you don't know how to write markdown, no sweat. You can either write normal text or you can use markdown's language to beautifully format your document. Just do a quick Google for a Markdown cheatsheet, or even use dev.to's Markdown basics list:
In the root of your project folder in the terminal, write
npm login. This will guide you through logging into your npm account. Don't have one? Create one here.
After logging in, type
npm publish. This will walk you through several questions to publish your package. When you're done you can visit the package's page and use it throughout your projects!