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!
Link to the npm package: Link
Link to the repo: github
Can you really call yourself a Javascript developer if you've never published a nonsense package to 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:
Step 1 - Create a Javascript project
This can be any project. I used a create-react-app project, then after writing the code for my new JSX component, which was just a javascript file with a React functional component in it, you just need to make sure to export it.
Step 2 - Initialize your package.json file
You also need to initialize this as an npm project by typing the following in your terminal while in the root of your project:
npm init
These details will be displayed as-is on npmjs.com so be careful!
Step 2b - Change your package.json file's "public" property from false to true.
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.
Step 3 - Decide exactly how you want to serve your package
(a) Babel and ES6
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.
(b)Delete unnecessary files
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.
Step 4 - Write a Readme
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):
touch README.md
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:
Step 5 - Publish the package
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!
Top comments (0)