I released a npm package in public for my Static Site Generator(SSG)! I was very surprised and impressed that I could do that like other packages that I used before💮
Package managers
npm is the package manager for the Node JavaScript platform. My SSG uses JavaScript, so I decided to use it to release my package.
How did I create a package?
First of all, I opened Windows PowerShell and went to my SSG folder. Second, I typed npm login. It allowed me to enter Username, Password, Email. After I verified my email address, I could get this page:
Tag my Release
Tags can be used as specific points in history in open source projects to help users in the repository easily navigate to important parts of the code history.
I added v0.9.0. as a practice, and then created a v1.0.0 release with git tag -a v1.0.0 -m "my version 1.0.0" and checked all tags I added with the git tag command. My original release number was v0.1.0, so I changed package.json, yarg, README files to modify my version. After I added those files, commit, and push, I also pushed tags to main with the git push --follow-tags command.
Published my public package to the npm registry
Based on the npm document, the way to publish a package is using npm publish command. When I run it, I had the error below:
PS C:\Users\Mizuho\Desktop\OSD600\pajama-ssg> npm publish
npm notice
npm notice package: node-ssg@1.0.0
npm notice === Tarball Contents ===
npm notice 701B __mocks__/fs.js
...
npm notice 842B yargsConfig.js
npm notice === Tarball Details ===
npm notice name: node-ssg
npm notice version: 1.0.0
...
npm notice total files: 25
npm notice
npm ERR! code E403
npm ERR! 403 403 Forbidden - PUT https://registry.npmjs.org/node-ssg - Package name too similar to existing package nodessg; try renaming your package to '@mizuho/node-ssg' and publishing with 'npm publish --access=public' instead
I firstly thought someone used the same name of the package, but it was just the name I didn't change inside the package.json file when I did npm init.
I changed name from node-ssg to pajama-ssg, and successfully released!
User Testing
My partner Gustavo tried to install and run my program, but it failed. The error message said it was caused by prettier. Since I moved prettier inside the devDependencies instead of dependencies in my package.json file. I corrected the location and pushed to git, and I updated the npm version number with the npm version 1.0.1 command. Then I published it again.
He could run my program and I also could run his program.
However, I couldn't see any files in my directory where I installed Gustavo's package, the node_module folder was installed globally(under my C drive). Another friend, Kevan helped me and suggested to do npm install inside the directory. It created a package.json and I did npm i <packagename> again, then I finally had the files inside the directory🎉
Modified README and CONTRIBUTING file
I modified those files and their contents to match by installing the npm package. The installation and usage became simpler. When I modified the README file, I didn't pay attention enough and realized that I had to change the CONTRIBUTING file as well. Because of my small changes, my release number grew to v1.0.4. I learned that I needed to think more about the affected area😅
Conclusion
I didn't expect that I could release a npm package in public. Through this course, I'm having good opportunities to communicate with other programmers(students, people online, professors) and experiences to publish in public such as this blog, a npm package, my open source project, and PRs. I'm a shy person so all of these social aspects are new to me, but I feel I'm getting more comfortable with all of it(I hope!)🌟
Links
My npm package: pajama-ssg
All you need is npm i pajama-ssg, and run npx pajama-ssg -i <file name>.
File name is your text or markdown files that you would like to convert to html. Please store a file(s) inside the project folder.
My GitHub repo | Gustavo's npm package | Kevan's npm package
My friends' SSGs are great! Check them out👀✨
Top comments (2)
Hi @bacloud14 😃 Thank you for reading my blog! Your comment encourages me to improve my SSG!
Oh! You are the person who filed the issue! Thank you for looking at my code😆 I will check the link you mentioned and implement Regex for it!