How I Built My First NPM Package

Hello, I am Martins Joseph and this is my first Medium post, so please bear with me.

Today, I would be sharing with you how I wrote my first NPM package , and what inspired me to write this whilst providing you with links I used to guide me through the upload process.

WHY DID I CREATE THIS NPM PACKAGE

This package was built as an in-house implementation for a problem we at StockFare had.
So, we were building our mobile application using react-native and needed to implement FlutterWave’s Rave to handle payment from our customers. As at the time of writing the initial version of this plugin, the official Rave’s plugin for react-native didn’t support RN v0.60(which was what we used during the initial development of StockFare’s mobile application) and above. We kept running into different issues and since we were low on time and couldn’t start writing fixes for the plugin, we decided to switch to a web-view version of the plugin.
We also didn’t want to waste time configuring any react-native plugin to work for iOS and Android, also we had issues with the fact that only Card, Bank and Mobile money was supported as a mode of payment at the time of writing this article meanwhile Rave’s web version supported way more payment methods which we wouldn’t have access to, without being able to link Rave’s website with our mobile application.
We found just one plugin here that offered such, although this plugin was going to solve our problem, it didn’t give our users the ability to cancel the transaction just in case it took to long to load Rave’s website into the web-view. Also, the positioning and colouring of the loader made transitioning to Rave’s website very obvious and we needed more than the “transactional ref” which was the only returned value from this plugin. We couldn’t edit and make a pull request because this was going to break people’s code if for any reason they ran “npm update”.
Our only solution was to write something that made transitioning to Rave’s website less obvious and also returned more than just the “transactional ref” and @creativejoe007/react-native-rave-webview was born.

How I Uploaded (react-native-rave-webview) To NPM

First of all (introduction!!), @creativejoe007/react-native-rave-webview is an easy to use react-native web view wrapper for Rave(payment gateway), it gives you access to all modes of payment supported by Rave, and passes the response from Rave’s server back to your mobile application(through the “onSuccess props event) so that you can take over the process from there using whatever data you need.
Now onto the process:
1. Created a public Github repo which you can find here (https://github.com/creativeJoe007/react-native-rave-webview).

2. Cloned my git repo into my local system, then I ran “npm login” on my project directory and then entered details to the fields asked by npm.

3. Then I executed “npm init” which is used to initialize npm into your project directory (a number of questions would be asked, you should be able to answer this on your own as they pertain to your package details).

4. Please before I continue, ensure to name your package in lowercase as npm stopped supporting the use of camel/upper casing.

5. Run “npm publish”, to publish to npm (this would fail if there is a package on npm with the exact same name or if npm finds this name too similar to another package).

6. An example of the error message you would see if another package’s name was similar to yours (403 Forbidden — PUT https://registry.npmjs.org/react-native-ravewebview — Package name too similar to existing packages) or (You do not have permission to publish “<your package name>”. Are you logged in as the correct user?).

7. To resolve this change the property name in your package.json. and rerun command 5. Or you can perform a name search using “npm search” to see if this name already exists.

8. If it still fails to publish, then a good option would be to add a scope using your username. Something like “@username/package-name” and then execute the “npm init — scope=username” command. This would prompt you a similar field to what you saw in command 3, but with other data apart from the name being populated.

9. If you made use of command 8, you would have to make your scope publicly available by running “(npm publish — access public)

10. You can read more from (https://zellwk.com/blog/publish-to-npm/).

Thanks for reading, and please don’t forget to like and share this article. I would ensure to publish more content as I continue my adventure of becoming a senior developer in (JavaScript, Python and Kotlin).

An entrepreneur in the day || Software Engineer at night || I solve problems for a living.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store