An Easy Guide to Publishing npm packages

saurabh satapathy — Fri, 01 Jul 2022 09:14:45 +0000

Anyone who has worked in JavaScript frameworks knows what a npm package is? And how important it is? So, what's your thought on publishing your own package? Ya, I know it is cool to install your own package using npm i your_component_name 🤩🤩. All these things are very meaningful to a beginner. It will definitely bring a smile on your face 😇.

Here, We are going to see some easy steps through which you can publish your npm package. For this first you have to build a component that you want to publish. After successfully creating a component just follow the below steps.

Keep all required files of your component in a single folder let assume it is named as component. (⚠️All required files of your component must be inside the component folder)

Now create a index.js file inside this. Refer below image 👇

Now, just import and export your component in index.js file like this 👇

import your_component_name from './component/your_component_name'
export default your_component_name;

(Or, just open this folder with vs code, create a new file named index.js, write these two lines and save it.)
⚠️Replace your_component_name with your component name.

If you don't have an npm account just goto npm on your browser and sign up. click here to sign up with npm
Open cmd with in the same folder. Easy way just write cmd at place of your folders path and click enter. Refer below 👇

Login to npm by this command npm add user
(It will ask your usename, password and email just give and log your self in)
Now run this command npm init
It will ask package name, version, description, entry point, test command, git repository (if your component is in your git then give the repository link), keywords (these keywords are helpful for showing your package name in npm search), author (give like this your_name < your email id > ) and license ("MIT" or "ISC" which you like), then write yes and click enter.
After the above you can see your package.json created over there.
If you have used any third party library then just install them here by which all of these will listed as dependency in your package.json which will help user to get everything installed by a single npm install.
Now, create a readme.md describing your component which will be shown in npm.
Go back to cmd and run npm publish
Now, you can see your package listed in npm.

🎉🎉🎉🎉🎉
Congratulations, you have successfully published your npm package.

Link to my npm packages

Thank you

Ways to reach me:

Developing & Publishing a Web Extension (Beginner's Guide)

saurabh satapathy — Thu, 30 Jun 2022 14:33:54 +0000

Web Extension - Is not this term fascinating? Ya, I know the term chrome extension has dominated and we all are more fascinated to that. We all know about chrome web store and chrome extensions. But there is one more Browser Mozilla Firefox which is also widely popular but some of us are not aware about ADD-ONS. We can do the same thing here in ADD-ONS what you are doing there in chrome extensions. Building a chrome extension and a mozilla add-on is quite similar. So here we are going to see what is a web extension and simultaneously we will build a simple extension and see the publishing procedure for both chrome web store and mozilla add-ons.

What’s Web Extension?

From a technical perspective, a Web Extension is just some CSS, HTML, and JavaScript that enables the user to add functionality into the Web Browser through some API. The extension components include content scripts, background scripts, an options page, Logic files, and various UI elements. An extension’s component relies on its functionality and may or may not require every option.
The difference between a Web Extension and an application is that they are often easier to build & deploy as they are centered around a singular function.

Creating Your First Extension

Here you are going to build and publish a extension which will generate a new quote each time.

Creating manifest.json

Every extension contains a JSON-formatted manifest file, named manifest.json. Browser uses this file to acquire certain pieces of information about the extension you are going to develop. It is very important.

{
    "name": "Your_Extension_name",
    "version": "0.0.1",
    "manifest_version": 3,
    "action": {
        "default_popup": "popup.html",
        "default_icon": "logo.png"
    },
    "icons": {
        "128": "logo.png"
    },
    "permissions": ["activeTab"]
}

Creating popup.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>your_package_name</title>
  </head>
  <body>
    <p id="quoteElement">Loading...</p>
    <script src="script.js"></script>
  </body>
</html>

Creating script.js

fetch("http://api.quotable.io/random")
  .then((data) => data.json())
  .then((quoteData) => {
    const quoteText = quoteData.content;
    const quoteElement = document.getElementById("quoteElement");

    quoteElement.innerHTML = quoteText;
  });

Here we are using an api for generating a new quote each time.

Creating styles.css

body {
    width: 300px;
    height: 300px;
    background-image: linear-gradient(to right, #434343 0%, black 100%);
    display:flex;
    justify-content: center;
}

p {
    display: inner-flex;
    margin: auto 10px;
    font-size: 22px;
    color: #ffffff;
    border-width: 3px;
        border-style: solid;
        border-image:
            linear-gradient(to bottom,
                red,
                rgba(0, 0, 0, 0)) 1 100%;

    padding: 10px;
}

Testing

Now, go to Manage Extensions in Chrome Browser.
Turn Developer Mode on.
Click on Load Unpacked (situated at top left).
Select your extension's manifest.json file.
Now, you can see your extension listed here.

Publishing on Chrome Web Store

For publishing the extension in Chrome Web Store, one needs to have a developer account. There is a one-time sign up fee of $5 to publish your extensions. With this account, you can publish as much as 20 extensions in Chrome Store. After successful sign up, the next step is to log in to your developer’s account and go to your developer’s dashboard.
There you will come across the “Add New Button” button which will redirect you to a page to upload a ZIP file. Don’t forget to create a Zip file beforehand of your folder directory comprising of JSON and JavaScript files.
Upload your Zip package, and give a relevant description of your extension. Please make sure that you clearly explain the singular function of your extension. Moreover, you can also give Screenshots and a YouTube tutorial video to guide your users, on how to interact with your plugin.
You can also edit the icons of your extension and configure your extension at any point of time. To see how everything you configured will look on Chrome Web store, preview the changes. If everything goes smoothly, hit “Publish.”

Publishing as Mozilla ADD-ON

First, zip your extension, keeping manifest.json as root.
Open your Firefox Browser and search mozilla add-ons or click on this link
Then sign up create a new account or log yourself in if you already have an account. Now, got to Developer Hub (link situated at the top right)
Click on Submit a New Add-on. On the next screen, click on this site and continue.
Noe click on select file and choose your zip file. After upload a series of automated validation tests will be run on your file.
On the next screen, click yes if you want to share source code otherwise click no then continue.
Then describe your Add-On.
After successful submission wait for some hours. Your Add-On will be listed after review (You will also get notified by mail for the same).

Congratulations, You have successfully developed and published your first extension.

This will look like this

Link to download qoto. Download it and stay motivated.