Outline
Until now, when I develop with React Native, I use many open source libraries someone developed. I feel always appreciation developers, and I wanted to pay back. So I decided to develop an open source and made react-native-image-modal that is a simple open source.
If you want to know how to develop React Native open source library, see the blog post below.
In this blog post, I will share how to deploy JavaScript which you developed to NPM(Node Package Manager).
Create NPM account
To deploy your library to NPM, you need a NPM service account.
If you don’t have NPM account, click the link below to go to NPM service site, and create NPM account.
- NPM service site: https://www.npmjs.com/
npm info
Before deploying your JavaScript library, we need to check the package name is deployable. Of course, you can not deploy the same name of the libraries deployed already on NPM.
Execute the command below to check your JavaScript library is deployable.
npm info [JavaScript Package Name]
If the name is duplicated, you can see the information of the library which was deployed on NPM.
[email protected] | MIT | deps: 1 | versions: 1
deploy projects easily in the cloud. Optimised for GitLab CI
https://gitlab.com/pushrocks/npmdeploy#README
keywords: deploying, made, easy
dist
.tarball: https://registry.npmjs.org/npmdeploy/-/npmdeploy-1.0.1.tgz
.shasum: c298d768aac7ccb89a38c20a0c904341fc87c484
dependencies:
gitlab: ^1.6.0
maintainers:
- lossless <[email protected]>
dist-tags:
latest: 1.0.1
published over a year ago by lossless <[email protected]>
If the name is not duplicated, you can see the 404 error like below.
npm ERR! code E404
npm ERR! 404 'temp-npmdeploy' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it
npm ERR! 404 (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.
npm ERR! 404
npm ERR! 404 'temp-npmdeploy@latest' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.
npm init
To deploy your JavaScript library to NPM, we need to set the information that NPM needs.
Go to your JavaScript library folder, and execute the command below.
# cd ProjectName
npm init
After executing the command above, you can see the screen like below. The contents in this part are updatable after, so don’t worry about doing wrong.
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (npmdeploy)
NPM asks which you want to make the package name based on the folder name, or others. We already found the name which is deployable via npm info. Insert it in here.
version: (1.0.0)
Next, NPM asks the version. The version is basically major.minor.patch. If your library is already completed to develop, just set 1.0.0. If your library is still developing and not completed, set the version like 0.0.1 to notice your library is not stable.
description:
Next is the details about JavaScript library. Insert the description about your library.
entry point: (index.js)
Set the Entry file(Main file) of your JavaScript library.
test command:
Insert your test command for your JavaScript library. If you don’t have the test command, just insert Enter key.
git repository:
Insert Git repository URL for users to check your JavaScript source code. If you don’t have, just insert Enter key.
keywords:
Insert the keyword about your JavaScript library.(ex> jQuery, react-native, reactjs, etc)
author:
Insert the author information. Normally, Name <Email Address> format is used.
license: (ISC)
Next is about your library license. Insert the license according to your library. (ex> MIT, ISC etc)
If you want to know the keyword of the licesen, see the link below.
After inserting all, you can see package.json file is generated in your library folder.
npm login
To deploy your library to NPM, we need to login the NPM service by executing the command below.
npm login
When you executed the command above, the login process is started like below.
Username: dev-yakuza
Password:
Email: (this IS public) [email protected]
Logged in as dev-yakuza on https://registry.npmjs.org/.
Insert NPM account information created above. After signing in, execute the command below to check login well.
npm whoami
# dev-yakuza
npmignore
There are some files required for development, not for the library completed to develop. For example, test code or source code for the example it is. We need for these files to write on .npmignore file.
Below is my .npmignore file that I used when I develop react-native-image-modal library.
node_modules
Develop
DevelopWithExpo
Example
ExampleWithExpo
.github
demo
npm publish
We’re ready to deploy your library to NPM. Execute the command below to deploy your library to NPM.
npm publish
If you want to execute the some commands just before deploying, modify package.json like below.
"scripts": {
...
"prepare": "rm -rf dist && tsc"
},
I used Typescript to develop the library, so I needed to build the Typescript before deployment. as defined prepare command in scripts of package.json file like above, when you execute npm publish, before executing npm publish, this command is executed.
You just deployed your library to NPM! To use your deployed library, the command below is used just like when you use other libraries via NPM.
npm install --save [Your Package Name]
npm version
After the library is deployed to NPM, sometimes, you need to update the library. At this time, you need to update the version of the library.
To update the version, you can modify package.json file directly("version": "0.0.1"), also, you can use the command like below.
npm version patch
npm version minor
npm version major
If you use the commands according to your situation, you can update the version easily.
Completed
Done! We’ve seen how to deploy JavaScript library that you develop to NPM. After I developed and deployed the first open source, I felt that I finally join the developer’s culture.
Let’s make and deploy your open source to join the beautiful developer’s culture!
Was my blog helpful? Please leave a comment at the bottom. it will be a great help to me!
App promotion
Deku.Deku created the applications with Flutter.If you have interested, please try to download them for free.
