Introduction

At some point in our life, we may need almost everything in a private scope, and the same happens with your NPM packages as well. You have created a private NPM package for your company or for yourself and you wanted to host it somewhere, you might have already looked for some options like a paid version of npmjs and many more. But, you were not happy doing it, and somehow you have reached in this article, and I am sure you are expecting something with Docker here. Yes, we are actually going to change our Docker container instance to a private NPM registry, and once it is ready you can always host your private npm packages to that registry. If you are not sure of how to create an npm package, please read my Sounds cool? Then, let’s jump into it. I hope you will find this post useful.

Background

As I mentioned before, I am going to create a Container Instance and will be changing it to a private NPM registry. I will be using Microsoft Azure, if you don’t have a valid Azure subscription, I strongly recommend you to create one.

Setting up a Docker Private NPM Registry

Once you get the Azure subscription, you can start the setups.

Creating Azure Container Registry

Do you have a GitHub account? Do you know what we can do with a Github account? Yes, we can upload our projects/source codes there and we can do versioning, we can create branches and many more. You can consider that the Azure Container Registry is a similar service to that. An Azure Container Registry or ACR is a private Docker registry where you can easily manage all of your Docker container images in the same place. Isn’t that cool? According to Microsoft, you can use Azure Container Registry to:

• Store and manage container images across all types of Azure deployments
• Use familiar, open-source Docker command line interface (CLI) tools
• Keep container images near deployments to reduce latency and costs
• Simplify registry access management with Azure Active Directory
• Maintain Windows and Linux container images in a single Docker registry

To create the Azure Container Registry, you should have a valid Azure subscription. If you don’t have one, please get one, that will help you follow this article.

Once you logged in to the Portal. You can click on the + icon, Create a resource, and search for the Container Registry.

Search Container Registry

When you click the Container Registry, you will be asked to give the details as shown in the preceding image.

Container Registry Details

Please remember to enable the Admin user, as you will be able to use the registry name as username and admin user access key as the password to docker login to your container registry only if it is enabled. I will explain the same in the coming section.

Once you create your Container Registry, you will be given a login server as yourregistryname.azurecr.io. You can always see other information in the overview section. If you click on the Access Keys link under the settings, you can see the username and the password for your Container Registry. Remember we have enabled the Admin User property while creating the Container Registry?

Container Registry Settings

Creating a Docker Container in Local

Docker version

docker pull verdaccio/verdaccio

verdaccio/verdaccio           latest              c542d9e516e4        3 weeks ago         659MB

It may take a few minutes to pull the entire image. As I have already pulled the latest image, it will be quick for me and get the output as below.

Docker pull verdaccio

You can also tag the version you need, just in case.

docker pull verdaccio/verdaccio:3

Now it is time to run the Verdaccio, are you ready?

docker run -it --rm --name verdaccio -p 4873:4873 verdaccio/verdaccio

The last argument is our image name, if you don’t have such an image in your local, the same will be pulled from the Docker hub. As you might have noticed already we are using the port 4873, and the same will be mapped to the container instance port later when we create the container instance. Now please make sure that you are getting an output as preceding.

Verdaccio docker run

You should now be able to go into http://localhost:4873 and see that verdaccio is running successfully.

Pushing Local Container to Azure Container Registry

Now that we have an Azure Container Registry running and a local container which can act as a private NPM registry. What are we waiting for? Let’s just push this to our ACR. Before that, we need to login to our Azure Container Registry server.

docker login sibeeshpassion.azurecr.io

Once you run the above command with the correct credential, you will be able to see the output as below.

Docker login Azure container registry

Now let’s just tag our image, as this will help to manage our images easily in the Container Registry.

docker tag <image name> <login server>/<repository name>/<name>:v1

For example, I used this command as below.

docker tag verdaccio/verdaccio sibeeshpassion.azurecr.io/verdaccio/verdaccio:v1

Let’s push our image to the Container Registry now.

docker push sibeeshpassion.azurecr.io/verdaccio/verdaccio:v1

If everything goes well, you must see an output as preceding.

Pushing to Container Registry

Now, you can log in to your Azure portal and check the repositories of your Azure Container Registry. You should be able to see your image with the tag we have provided.

Repository in Azure Container Registry

Creating a Container Instance

Now, we have a valid Container Registry which can act as a private NPM registry and is that enough? N,o it is not, we are not finished yet. We need a place where this registry can run. Well, Azure has everything we need, we are going to create a Container Instance for this purpose. A container instance is a simplest and fastest way to run a single container. While creating the Container Instance, you will have to go through 3 steps.

1. Configure the basic settings
2. Specify container requirements
3. Container instance

Configure Basic Settings

You can configure the settings as per your needs, I have configured mine as below.

Container Instance Basic Settings

Please be noted that I have given the container image type as Private.

Specify Container Requirements

Here in this step, I am going to select the Public IP address as “Yes”, so that I can set the DNS label while configuring. And I will also set the port as 4873.

Network Settings in Azure Container Instance

Container Instance

In this step, you can verify all of your settings, and in the background, Azure will validate the settings and if it is valid, the OK button will be enabled, click OK once it is enabled. It may take some time to build your resource and once it is done you can always go to the overview of your Container Instance and run it with the port 4873. For example, I can see my container in this URL http://sibeeshpassion.westeurope.azurecontainer.io:4873/#/.

Pushing Your Own Private NPM Package to Docker Private NPM Registry

Wow!, we have a private Docker NPM registry now. Let’s just try to push our private NPM package to this registry now. I have created my own NPM package a few days back, if you want to know how, you can always read this article: Create Your Own NPM Package — Private or Public. I will open my package in the vscode.

Let’s add the user before we publish the package.

npm adduser --registry=http://sibeeshpassion.westeurope.azurecontainer.io:4873/#/

The above command will ask you for the username and password.

NPM Publish with Private Registry AddUser

Now we can run our publish command.

npm publish dist --registry=http://sibeeshpassion.westeurope.azurecontainer.io:4873/#/

You can get an output as preceding if the publishing is successful.

npm notice === Tarball Details ===
npm notice name:          org-npm-package
npm notice version:       1.1.1
npm notice package size:  7.8 kB
npm notice unpacked size: 37.9 kB
npm notice shasum:        f1d8e033bb6d2545502802510258cf9f8bcc9ab3
npm notice integrity:     sha512-3MuplP75D0gpj[...]Z5KFo0DNbzGFw==
npm notice total files:   22
npm notice
+ org-npm-package@1.1.1

What are you waiting for, just go and see your package in your Docker, I was eagerly waiting for this moment, and I am going to see my package by hitting my container here http://sibeeshpassion.westeurope.azurecontainer.io:4873/#/detail/org-npm-package.

Using Your Private Package from the Docker Private NPM Registry

Just run the below command and your private package will be pulled from your private Docker NPM registry.

npm install org-npm-package --registry=http://sibeeshpassion.westeurope.azurecontainer.io:4873

Conclusion

Congratulation, we have successfully created a Docker Private NPM Registry, go ahead and create as many private packages you wish and move those to your Private NPM registry. Thanks a lot for following/reading this article. I really appreciate your time and effort.  In this article, we have learned how to,

1. Create an Azure Container Registry
2. Create a Local Docker Container
3. Create Verdaccio image and run it in a local docker container
4. Push the local Verdaccio image to the Azure Container Registry
5. Set up the Docker Container Instance using the Azure Container Registry
6. Pushing the NPM package to the Private Docker NPM registry
7. Pulling the package from the Private registry

Your turn. What do you think?

Thanks a lot for reading. I will come back with another post on the same topic very soon. Did I miss anything that you may think which is needed? Could you find this post as useful? Kindly do not forget to share me your feedback.

Kindest Regards
Sibeesh Venu

Introduction

Wow, you are going to create your own package? Either a private one or a public one? You were looking for a documentation on how to create your own package in NPM, and you ended up landing here? No, worries, in this post I will help you with that. At the end of this article, you will get to know how can you create your own package in the NPM registry. Enough talking, let’s jump into the coding. I hope you will find this post useful.

Source Code

The source code can be found here.

Background

Sometimes creating your own packages will be essential especially when you work with some big companies/clients where they can reuse their components/packages. Doesn’t it really make sense? As a developer, it is our job to give that option to our client. In this article, I will be creating

• an Angular application
• the build and publish the angular application to the NPM registry
• another application, where we can use the NPM package which we have created

Before you start with, please make sure that you have an account in npmjs, so that you can publish your package there. You can always have a private space in NPM registry, but you must pay for that service, hence in this article, I will walk you through how we can publish your packages to publically, however the steps are going to be same for Private as well.

Creating your Angular application

The first thing we are going to do is to create an application and I will name this org-npm-package.

Installing Angular CLI

Yes, as you guessed, we are using Angular CLI. If you haven’t installed Angular CLI, I recommend you to install the same. It is a great CLI tool for Angular, I am sure you will love that. You can do that by running the below command.

npm install -g @angular/cli

Once we set up this project we will be using the Angular CLI commands and you can check Angular CLI documentation for understanding the things you can do with the CLI.

Generating a new project

Now it is time to generate our new project. We can use the below command for the same.

ng new org-npm-package

And you will be able to see all the hard work this CLI is doing for us. Now that we have created our application, let’s run our application and see if it is working or not.

ng serve --open (if you need to open the browser by the app)
ng serve (if you want to manually open the browser).
You can always use 'ng s' as well

The command will build your application and run it in the browser.

As we develop we will be using the Angular material for the design and we can install it now itself along with the animation and cdk. With the Angular 6+ versions you can also do this by following the below command.

ng add @angular/material

Generate menu module and ng-private-menu component

Now we have an application to work with and let’s create a module called Menu and a component ng-private-menu now.

ng g m modules/menu
ng g c modules/ng-private-menu

The above command will generate all the files you need to work with. I am going to edit only the HTML of the ng-private-menu component for myself and not going to add any logic. You can add anything you wish.

<div>
  <button mat-button [matMenuTriggerFor]="animals">Animal index</button>

  <mat-menu #animals="matMenu">
    <button mat-menu-item [matMenuTriggerFor]="vertebrates">Vertebrates</button>
    <button mat-menu-item [matMenuTriggerFor]="invertebrates">Invertebrates</button>
  </mat-menu>

  <mat-menu #vertebrates="matMenu">
    <button mat-menu-item [matMenuTriggerFor]="fish">Fishes</button>
    <button mat-menu-item [matMenuTriggerFor]="amphibians">Amphibians</button>
    <button mat-menu-item [matMenuTriggerFor]="reptiles">Reptiles</button>
    <button mat-menu-item>Birds</button>
    <button mat-menu-item>Mammals</button>
  </mat-menu>

  <mat-menu #invertebrates="matMenu">
    <button mat-menu-item>Insects</button>
    <button mat-menu-item>Molluscs</button>
    <button mat-menu-item>Crustaceans</button>
    <button mat-menu-item>Corals</button>
    <button mat-menu-item>Arachnids</button>
    <button mat-menu-item>Velvet worms</button>
    <button mat-menu-item>Horseshoe crabs</button>
  </mat-menu>

  <mat-menu #fish="matMenu">
    <button mat-menu-item>Baikal oilfish</button>
    <button mat-menu-item>Bala shark</button>
    <button mat-menu-item>Ballan wrasse</button>
    <button mat-menu-item>Bamboo shark</button>
    <button mat-menu-item>Banded killifish</button>
  </mat-menu>

  <mat-menu #amphibians="matMenu">
    <button mat-menu-item>Sonoran desert toad</button>
    <button mat-menu-item>Western toad</button>
    <button mat-menu-item>Arroyo toad</button>
    <button mat-menu-item>Yosemite toad</button>
  </mat-menu>

  <mat-menu #reptiles="matMenu">
    <button mat-menu-item>Banded Day Gecko</button>
    <button mat-menu-item>Banded Gila Monster</button>
    <button mat-menu-item>Black Tree Monitor</button>
    <button mat-menu-item>Blue Spiny Lizard</button>
    <button mat-menu-item disabled>Velociraptor</button>
  </mat-menu>
</div>

Once you have added that HTML, you should import some modules to your menu.module.ts file.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NgPrivateMenuComponent } from '../ng-private-menu/ng-private-menu.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatMenuModule, MatButtonModule } from '@angular/material';


@NgModule({
  declarations: [
    NgPrivateMenuComponent
  ],
  imports: [
    BrowserAnimationsModule,
    CommonModule,
    MatMenuModule,
    MatButtonModule
  ],
  exports: [
    NgPrivateMenuComponent
  ]
})
export class MenuModule { }

Set up app.module.ts

Now it is time to set our App Module. Every Angular app will be having at least one NgModule class AppModuleresides in app.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MenuModule } from './modules/menu/menu.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MenuModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Run your application

Once you have done everything, you will be able to run “ng serve” and see your application working in the browser.

Angular application output

Creating the NPM package

Whenever we do something, it is always a good idea to check whether something is already there or not, to help our development easier. That’s the advantage of using NPM public registry, we can always search for public repositories or packages which will definitely help in our development process. We have such packages in this case as well, so we are going to use the package called “ng-packagr”.

According to the package documentation, the packagr is a tool which transpile your libraries to Angular package format. It is a great package which does its job very well. I would like to give a huge round of applause to the developers/collaborators of that package. Please feel free to see the documentation of that package. You can install the same by running the command below.

npm i ng-packagr

Setting up the package.json

The first thing we are going to do is, to set the package.json as per the requirement of the packagr. Please add the preceding code to your package.json file.

"$schema": "./node_modules/ng-packagr/package.schema.json",
  "name": "@sibeeshpassion/org-npm-package",
  "version": "2.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "packagr": "ng-packagr -p package.json"
  },
  "ngPackage": {
    "lib": {
      "entryFile": "public_api.ts"
    },
    "whitelistedNonPeerDependencies": [
      "@angular/animations",
      "@angular/cdk",
      "@angular/common",
      "@angular/compiler",
      "@angular/forms",
      "@angular/core",
      "@angular/http",
      "@angular/material",
      "@angular/platform-browser",
      "@angular/platform-browser-dynamic",
      "@angular/router",
      "core-js",
      "rxjs",
      "tsickle",
      "zone.js"
    ]
  }

The $schema is for making the editing easier and it will add the JSON editing support, especially if you are using the IDE VSCode.

The name is the name of your package. And it is a scoped name here. Did you notice that I have used @ before the SibeeshPassion? A scoped name should be started with @ and should be followed by a slash (/). It is a way of grouping all of your packages together in a common place. Doesn’t it make sense to have all of your company packages under your company name? It has some other benefits as well.

1. You can get unique names for your package, as you will be the only one who can add a package to that group
2. To install such packages, you need to use @your-org-name/your-package-name

You can always read more on the same topic here.

The script packagr is a custom script so that you can just run “npm run packagr” and everything else will be done in the background.

The ngPackage is the main settings for the packagr package, as it sets the entry point for our packaging. The file public_api.ts should be placed with the same directory of the package.json file. In our case, the public_api.ts contents will be as below.

export * from './src/app/modules/menu/menu.module';

We are exporting from our module menu.module.

Distributing npm packages with 'dependencies' is not recommended. Please consider adding @angular/animations to 'peerDependencies' or remove it from 'dependencies'.

BUILD ERROR
Dependency @angular/animations must be explicitly whitelisted.

Run the commands and generate the dist

As we have already configured our package.json file, now we can go and run the commands. Are you ready? The first thing we are going to run is “npm run packagr”. It will do the following things for you.

• Building Angular Package
• Building entry point ‘@sibeeshpassion/org-npm-package’
• Compiling TypeScript sources through ngc
• Bundling to FESM2015
• Bundling to FESM5
• Bundling to UMD
• Minifying UMD bundle
• Copying declaration files
• Writing package metadata

From the image below, you can understand that it is creating a folder called dist.

npm run packagr

If you just look at the dist folder you can see that all the packaging work has been done.

dist folder after packaging

Publishing your package to NPM registry

As our package is ready, we can go ahead and start publishing our package to the NPM registry.

npm publish dist

When you run the above command, if you haven’t signed up for private packages, you will get an error as below.

npm ERR! publish Failed PUT 402
npm ERR! code E402
npm ERR! You must sign up for private packages : @sibeeshpassion/org-npm-package

Let’s just publish this package publically now, so that I don’t want to pay anything. Before you do that, go to your package.json file and change the name from “name”: “@sibeeshpassion/org-npm-package” to “name”: “org-npm-package”. Run “npm run packagr” again. It will update your dist folder with the new files. The contents of the dist folder will be a little than the one we had for our organization.

dist folder after packaging publically

Let’s just run “npm publish dist” again, this time we should not see any errors. Please be noted that you should run “npm login” before you run npm publish command.

npm publish dist

Now if you look at your NPM registry you should be able to see your package.

Using the package in another solution

Wow!, we have successfully created an Angular NPM package, now we can easily use the same in our other applications. Let’s just create another application.

ng new use-org-npm-package

Once the application is been created, let’s just install the new package we have created.

npm i org-npm-package

Now, we can add our MenuModule to the new application’s app.module.ts file.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { MenuModule } from 'org-npm-package';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MenuModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

The only thing pending now is, to use the app-ng-private-menu in your app.component.html.

<app-ng-private-menu></app-ng-private-menu>

Output

Let’s just run our new application and see everything is working as expected.

my own npm package

Conclusion

Congratulation, you have created and used your own NPM package. In this article, we have learned how to,

1. Create an angular 7 application
2. Create a Private NPM package
3. Create a Public NPM package
4. Publish a package to NPM registry
5. Use the created package in another solution

We will make this package to accept the properties while using the same so that we can easily pass the menu items from the application where this package is being consumed. Isn’t that the way to make a package reusable? Please feel free to play with this GitHub repository. Please do share me your findings while you work on the same. I really appreciate that, thanks in advance.

Your turn. What do you think?

Thanks a lot for reading. I will come back with another post on the same topic very soon. Did I miss anything that you may think which is needed? Could you find this post as useful? Kindly do not forget to share me your feedback.

Kindest Regards
Sibeesh Venu

Introduction

We all are using npm as our package manager, it is easy, right? But with the version npm@5.2.0, when you install the npm, it installs a new package called npx.  Have you ever thought what it is? And why it is needed? Are there any benefits of using npx instead of npm? I know you were trying to find the answer for the above questions and at the end, you landed up on this page. I will try to answer those questions for you. And at the end of the article, I am sure that you will get the answer to your questions. I hope you will find this pose useful.

Source Code

The source code can be found here.

Background

I was trying to create a react application and as you know that we can create a react application very easy with the help of the react-app command. But when I have visited the official Github documentation of the create react app, it is been mentioned there that we can either use npx or npm. And I was just wondering what is the difference? And that question changed to this article form.

What are we going to do

We will be creating two applications and install the package mocha in both applications so that we can run some tests. If you don’t know what is mocha, visiting the official website wouldn’t be a bad idea.

1. mocha-example-npm
2. mocha-example-npx

npm-npx

Coding with mocha-example-npm application

Let’s try to create a new folder named mocha-example-npm and open it in my favorite code editor, which is vscode. Once you open the folder, you can install mocha by running this command.

npm install mocha

Let’s create a folder called test.

mkdir test

Let’s create a file called test.js.

code test/test.js

And paste the below sample test in it.

var assert = require('assert');
describe('Array', function() {
  describe('#indexOf()', function() {
    it('should return -1 when the value is not present', function() {
      assert.equal([1,2,3].indexOf(4), -1);
    });
  });
});

By seeing the code, you might have already found that the test will pass as the indexOf (4) is going to be -1. Now how do we check this? So to run the test we need to run mocha right? Let’s do it.

If you just type mocha in the terminal, you will get an error as below.

mocha : The term 'mocha' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path
was included, verify that the path is correct and try again.
At line:1 char:1
+ mocha
+ ~~~~~
    + CategoryInfo          : ObjectNotFound: (mocha:String) [], CommandNotFoundException
    + FullyQualifiedErrorId : CommandNotFoundException

It is saying that mocha is not a recognized command. To fix this you have below three option.

1. Install mocha globally, so that the command will be recognized globally

npm@6.1.0 C:\Program Files (x86)\nodejs\node_modules\npm
PS F:\SibeeshPassion\Articles\NPMvsNPX\npm\mocha-example-npm> npm i mocha -g
C:\Users\Sibeesh\AppData\Roaming\npm\mocha -> C:\Users\Sibeesh\AppData\Roaming\npm\node_modules\mocha\bin\mocha
C:\Users\Sibeesh\AppData\Roaming\npm\_mocha -> C:\Users\Sibeesh\AppData\Roaming\npm\node_modules\mocha\bin\_mocha
+ mocha@5.2.0
added 24 packages from 436 contributors in 3.458s
PS F:\SibeeshPassion\Articles\NPMvsNPX\npm\mocha-example-npm> npm list -g mocha
C:\Users\Sibeesh\AppData\Roaming\npm
`-- mocha@5.2.0

PS F:\SibeeshPassion\Articles\NPMvsNPX\npm\mocha-example-npm> mocha


  Array
    #indexOf()
      √ should return -1 when the value is not present


  1 passing (14ms)

PS F:\SibeeshPassion\Articles\NPMvsNPX\npm\mocha-example-npm>

2. Use the path to mocha from node_modules

./node_modules/mocha/bin/mocha

3. Configure test in your package.json file as follows.

"scripts": {
    "test": "mocha"
  }

So that you can run npm test command, and it will take the mocha files from your node_modules folder.

Coding with mocha-example-npx application

So, we have understood the problem we have using npm and we have three solutions to fix. Now, let’s try using the npx instead of npm. Let’s open the folder and run npx mocha. The result is a warning right as it is trying to find the folder test in the solution and then the tests.

npx: installed 24 in 6.203s
Warning: Could not find any test files matching pattern: test
No test files found

Let’s create a test folder, test.js file and write a test in it.

PS F:\SibeeshPassion\Articles\NPMvsNPX\npx\mocha-example-npx> mkdir test


    Directory: F:\SibeeshPassion\Articles\NPMvsNPX\npx\mocha-example-npx


Mode                LastWriteTime         Length Name
----                -------------         ------ ----
d-----       20-10-2018  06:26 PM                test


PS F:\SibeeshPassion\Articles\NPMvsNPX\npx\mocha-example-npx> code test/test.js
PS F:\SibeeshPassion\Articles\NPMvsNPX\npx\mocha-example-npx>

Let’s run the command npx mocha now, and you will get the output as below.

PS F:\SibeeshPassion\Articles\NPMvsNPX\npx\mocha-example-npx> npx mocha
npx: installed 24 in 4.142s


  Array
    #indexOf()
      √ should return -1 when the value is not present


  1 passing (12ms)

PS F:\SibeeshPassion\Articles\NPMvsNPX\npx\mocha-example-npx>

As you can see that our tests are passed. But are you seeing any node_modules folder or any packages are being added to your solution?

What is npx

Now let’s just summarize what is npx. It is an npm package runner.  We all know that we are installing the packages to our solution from the location called npm registry and use it. And the npx has been designed in a way that we can directly use the package from the npm registry without even installing it in our solution. You may be thinking why it is needed?

Let me give you an example, as I mentioned in the background section of this article, we can create a simple react application with the help of Create-React-App from FaceBook. And this is used only for creating the application, and once we create the application, and we are no longer needed this. If you use npm, you will have to install this package either globally or locally before you use this, or else you will get an error. 

Isn’t it good, if we can just use this create-react-app package from the npm registry and create the application in our local machine? And that’s where npx stands. With the help of npx, we can reduce the size of our node_modules and I strongly believe that this is a huge benefit. And we can even execute the packages and command simultaneously like below. 

npx create-react-app my-app

It is smart enough to identify whether the package you are trying to get from the npm registry is already there in your machine, either globally or locally. If the package is available in your machine, it will take it from there.

What if mocha is installed globally or locally and we run the command npx mocha?

Let’s try to install mocha globally and run the command npx mocha. Before that, let’s just make sure that we haven’t installed mocha yet.

PS F:\SibeeshPassion\Articles\NPMvsNPX\npx\mocha-example-npx> npm list mocha
mocha-example-npx@1.0.0 F:\SibeeshPassion\Articles\NPMvsNPX\npx\mocha-example-npx
`-- (empty)

PS F:\SibeeshPassion\Articles\NPMvsNPX\npx\mocha-example-npx> npm list -g mocha
C:\Users\Sibeesh\AppData\Roaming\npm
`-- (empty)

PS F:\SibeeshPassion\Articles\NPMvsNPX\npx\mocha-example-npx>

Now let’s just install mocha globally

PS F:\SibeeshPassion\Articles\NPMvsNPX\npx\mocha-example-npx> npm i mocha -g
C:\Users\Sibeesh\AppData\Roaming\npm\mocha -> C:\Users\Sibeesh\AppData\Roaming\npm\node_modules\mocha\bin\mocha
C:\Users\Sibeesh\AppData\Roaming\npm\_mocha -> C:\Users\Sibeesh\AppData\Roaming\npm\node_modules\mocha\bin\_mocha
+ mocha@5.2.0
added 24 packages from 436 contributors in 3.033s

Try to run npx mocha again

PS F:\SibeeshPassion\Articles\NPMvsNPX\npx\mocha-example-npx> npx mocha


  Array
    #indexOf()
      √ should return -1 when the value is not present


  1 passing (12ms)

PS F:\SibeeshPassion\Articles\NPMvsNPX\npx\mocha-example-npx>

Did you see any difference, now mocha is been loaded from your global registry.

Conclusion

Thanks a lot for reading. I will come back with another post on the same topic very soon. Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Kindest Regards
Sibeesh Venu

Introduction

In this post, we are going to see how we can use a MongoDB on our Node JS application with the help of the package Mongoose. We will also be covering some facts about MongoDB so that as a reader, you will understand why we had chosen MongoDB as our backend. We will be going through some steps to install the required packages using a node package manager terminal, so please be with me. At the end of this article, I guarantee that you will be proficient on how to connect a MongoDB in our Node JS application. I hope you will like this article.

Why MongoDB?

Here, I am going to list down the reasons why I had chosen MongoDB.

1. MongoDB is a NoSQL database when I say NoSQL, it means that it doesn’t have any structure to be followed.
2. There are no relationships, we can perform the relation using separate packages like Mongoose
3. Everything is JSON, even the data and collections are stored as JSON
4. Since the data is stored as JSON, no more conversions are needed. We can directly use it in our application.

Source Code

You can always clone or download the source code here

Background

Node JS has become a trend now, thus some most used databases. One of the recommended database for a Node application is MongoDB. As we discussed a MongoDB doesn’t have any structure inbuilt, here we are going to use a package called Mongoose, with that we can create some structure for our Database. Let’s just skip the talking and start developing.

Setting up Node application

To get started with the Node JS, create a folder and name as per your wish, this is going to be our project directory. Here I am going to use one of my favorite editor, Visual Studio Code. Now please point to your project container, and run the command below.

npm init

NPM Init

This will create a file named “Package.json” in your directory. We will be adding all of our dependencies in this file very soon. The command may ask you some default questions which you need to answer. If you need to create the package.json file with default values in it, you may consider running the below command.

npm init --yes

Let’s review our package.json file.

{
  "name": "node-mongodb-mongoose",
  "version": "1.0.0",
  "description": "A Node application with MongoDB and Mongoose",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "Node",
    "Mongoose",
    "MongoDB"
  ],
  "author": "Sibeesh Venu",
  "license": "ISC"
}

Getting the required packages

Now that we have the application ready, let’s get the required packages ready.

npm install --save mongoose

This will create a new folder npm_modules on your project directory where you can see the package Mongoose in it.

npm install --save express

The above command will add the package express to our application.

Creating the Node App

Now we can create our server.js file where we are going to write most of our application code.

var express = require("express")
var app = express()
app.listen("3010",()=>{
    console.log("I just started listening!.")
})

Now run the command node server.jsand make sure that you are getting a console as ” I just started listening!.”.

If you are getting an error as preceding, please make sure that you are running the application on an unused port.

PS F:\Visual Studio\Node.JS\Node-MongoDB-Mongoose> node server.js
events.js:136
throw er; // Unhandled ‘error’ event
^

Error: listen EADDRINUSE :::3000
at Object._errnoException (util.js:1031:13)
at _exceptionWithHostPort (util.js:1052:20)
at Server.setupListenHandle [as _listen2] (net.js:1367:14)
at listenInCluster (net.js:1408:12)
at Server.listen (net.js:1496:7)
at Function.listen (F:\Visual Studio\Node.JS\Node-MongoDB-Mongoose\node_modules\express\lib\application.js:618:24)
at Object.<anonymous> (F:\Visual Studio\Node.JS\Node-MongoDB-Mongoose\server.js:3:5)
at Module._compile (module.js:641:30)
at Object.Module._extensions..js (module.js:652:10)
at Module.load (module.js:560:32)”

Setting up database

Now that we have our application ready, let’s go and create our database. I am going to use mLab for creating the database. If you have not installed MongoDB on your machine, I strongly recommend creating a database in mLab. I had created a database there and have got my connection string as preceding.

mongodb://<dbuser>:<dbpassword>@ds038319.mlab.com:38319/mylearning

We will be updating the connection string with actual DB user and password later. Please make sure that you are creating a user for your DB and remember the password.

Creating a Mongoose model

Let’s create a Mongoose model and set up our connection string now, which is going to be our collection. No worries, it is just a JavaScript model.

var conString = "mongodb://admin:admin@ds038319.mlab.com:38319/mylearning"

/**
 * Models 
 */
var User = mongoose.model("User", {
    firstName: String,
    lastName: String
})

Please be noted that, when you move the codes to production, make sure that your password and user fields on the connection string are separated from this file and encrypted

Now let’s connect our database.

mongoose.connect(conString, { useMongoClient: true }, () => {
    console.log("DB is connected")
})

Setup the data

We have our model ready, what else is needed now? Yes, you are right, we need data.

var dummyUser = {
    firstName: "Sibeesh",
    lastName: "Venu"
}

Inserting the data into MongoDB

We have got everything ready, we can insert the model now. Let’s do the saving logic now.

mongoose.connect(conString, { useMongoClient: true }, () => {
    console.log("DB is connected")
    saveData()
})

function saveData() {
    var user = new User(dummyUser);
    user.save();
}

Verify the data

Once you run your application, go to your database and check for the entries there. I am sure there will be a new collection “User” and our inserted data. As I am using mLab database, here is how my data saved.

MongoDB Data Insertion

If you have noticed, you can see there are an another property names “_id” in our database collection. This is a unique id generated by MongoDB for us, so no need to think about it.

Todo

As the purpose of this article is to show how we can insert a data to MongoDB, I called the save method right after the database is connected. In our real life, this is not a recommended way. You must create an Ajax post request and handle the same. I am leaving that task to you. Please try to do that and let me know. I would love to hear back from you.

Conclusion

Thanks a lot for reading. Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Kindest Regards
Sibeesh Venu