Javascript – Otricks.com https://otricks.com It's the big 'O' in technology Wed, 29 Dec 2021 12:44:50 +0000 en-US hourly 1 https://wordpress.org/?v=6.8.1 Create front-end app for space-XYZ cargo booking system. https://otricks.com/create-front-end-app-for-space-xyz-cargo-booking-system/ Wed, 29 Dec 2021 12:44:48 +0000 https://otricks.com/?p=2378 This is multi-part post and this is 2 or 3 part. Our base design would be like space-x website with header, background image and some...

The post Create front-end app for space-XYZ cargo booking system. appeared first on Otricks.com.

]]> This is multi-part post and this is 2 or 3 part.

Our base design would be like space-x website with header, background image and some text, we will create a full functional strapi server from where all data comes eventually. For now we will create dummy text and dummy image placeholder, later we will integrate with API from strapi.

Create new empty folder and name it space-xyz then cd into it, open terminal window I will be using iTerm2 for my terminal window and run below command it will generate new angular project.

npx -p  @angular/cli@10.2.1 ng new space-xyz 
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS   [ https://sass-lang.com/documentation/syntax#scss                ]
CREATE space-xyz/README.md (1017 bytes)
CREATE space-xyz/.editorconfig (274 bytes)
CREATE space-xyz/.gitignore (631 bytes)
CREATE space-xyz/angular.json (3678 bytes)
CREATE space-xyz/package.json (1252 bytes)
CREATE space-xyz/tsconfig.json (458 bytes)
CREATE space-xyz/tslint.json (3185 bytes)
CREATE space-xyz/.browserslistrc (853 bytes)
CREATE space-xyz/karma.conf.js (1021 bytes)
CREATE space-xyz/tsconfig.app.json (287 bytes)
CREATE space-xyz/tsconfig.spec.json (333 bytes)
CREATE space-xyz/src/favicon.ico (948 bytes)
CREATE space-xyz/src/index.html (294 bytes)
CREATE space-xyz/src/main.ts (372 bytes)
CREATE space-xyz/src/polyfills.ts (2830 bytes)
CREATE space-xyz/src/styles.scss (80 bytes)
CREATE space-xyz/src/test.ts (753 bytes)
CREATE space-xyz/src/assets/.gitkeep (0 bytes)
CREATE space-xyz/src/environments/environment.prod.ts (51 bytes)
CREATE space-xyz/src/environments/environment.ts (662 bytes)
CREATE space-xyz/src/app/app-routing.module.ts (245 bytes)
CREATE space-xyz/src/app/app.module.ts (393 bytes)
CREATE space-xyz/src/app/app.component.scss (0 bytes)
CREATE space-xyz/src/app/app.component.html (25757 bytes)
CREATE space-xyz/src/app/app.component.spec.ts (1066 bytes)
CREATE space-xyz/src/app/app.component.ts (214 bytes)
CREATE space-xyz/e2e/protractor.conf.js (869 bytes)
CREATE space-xyz/e2e/tsconfig.json (294 bytes)
CREATE space-xyz/e2e/src/app.e2e-spec.ts (642 bytes)
CREATE space-xyz/e2e/src/app.po.ts (301 bytes)
✔ Packages installed successfully.
hint: Using 'master' as the name for the initial branch. This default branch name
hint: is subject to change. To configure the initial branch name to use in all
hint: of your new repositories, which will suppress this warning, call:
hint:
hint: 	git config --global init.defaultBranch <name>
hint:
hint: Names commonly chosen instead of 'master' are 'main', 'trunk' and
hint: 'development'. The just-created branch can be renamed via this command:
hint:
hint: 	git branch -m <name>
    Successfully initialized git.

Open frontend project in your favorite code editor, I will be using visual studio code (vscode) its super fast and build on node stack too.

We will generate header component user angular CLI command, It will be very simple header to hold our navigation and logo for our application.

npx ng generate component header 
? Would you like to share anonymous usage data about this project with the Angular Team at
Google under Google’s Privacy Policy at https://policies.google.com/privacy? For more
details and how to change this setting, see http://angular.io/analytics. Yes

Thank you for sharing anonymous usage data. Would you change your mind, the following
command will disable this feature entirely:

    ng analytics project off

CREATE src/app/header/header.component.scss (0 bytes)
CREATE src/app/header/header.component.html (21 bytes)
CREATE src/app/header/header.component.spec.ts (626 bytes)
CREATE src/app/header/header.component.ts (276 bytes)
UPDATE src/app/app.module.ts (475 bytes)

Insider header component “header/header.component.html”

We will use our server to provide all the data for now we will just use as place holder.

<div class="header-holder">
  <div class="logo">
    <h1>Space-XYZ</h1>
  </div>
  <div class="menu">
    <ul>
      <li>
        <a routerLink="/first-component" routerLinkActive="active">link 1</a>
      </li>
      <li>
        <a routerLink="/first-component" routerLinkActive="active">link 2</a>
      </li>
      <li>
        <a routerLink="/first-component" routerLinkActive="active">link 3</a>
      </li>
      <li>
        <a routerLink="/first-component" routerLinkActive="active">link 4</a>
      </li>
      <li>
        <a routerLink="/first-component" routerLinkActive="active">link 5</a>
      </li>
    </ul>
  </div>
</div>

Let’s create body component to hold some text and other data.

npx ng generate component body

Insider body component “body/body.component.html“

<div class="body-holder">
  <h1>Some Name comes form server</h1>
  <p>Some text comes from server</p>
  <a href="">Book it now</a>
</div>

Insider body component “body/body.component.scss“

// body/body.component.scss

.body-holder {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: 15%;

  h1 {
    font-size: 60px;
    text-transform: uppercase;
    color: #fff;
  }

  p {
    color: #fff;
    text-transform: uppercase;
  }
  a {
    text-decoration: none;
    background: green;
    border: 1px solid #037203;
    color: #fff;
    padding: 20px;
    font-size: 16px;
    text-transform: uppercase;
  }
}

Update routing “app-routing.module.ts” file with below code.

// app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { BodyComponent } from './body/body.component';

const routes: Routes = [
  {
    path: ':id',
    component: BodyComponent,
  },
  {
    path: '',
    component: BodyComponent,
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Update app component “app.component.html” file and “app.component.ts” with below code. Later we will get background image from API response, for now we are hardcoding backgroundImage path 

<!--app.component.html-->

<div
  class="body"
  [ngStyle]="{
    background:
      'url(' + backgroundImage + ') #000 no-repeat center bottom / contain'
  }"
>
  <div class="container">
    <app-header></app-header>
    <router-outlet></router-outlet>
  </div>
</div>

// app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  title = 'space-xyz';
  backgroundImage = null;

  constructor() {
    this.backgroundImage = '../../assets/f9_feature.webp';
  }
}

And last update “app.module.ts” to reflect those changes.

//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 { HeaderComponent } from './header/header.component';
import { BodyComponent } from './body/body.component';

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

Finally run angular application to view our frontend app. You will be able to see something like below screen shot.

For some reason if you miss any step you can check https://github.com/anjum121/space-xyz/tree/master/fontend link for final code.

Next step is to create Strapi system, let’s go to backend part. 🙂

The post Create front-end app for space-XYZ cargo booking system. appeared first on Otricks.com.

]]> How to use webSocket/Socket.io inside Strapi content management system. https://otricks.com/how-to-use-websocket-socket-io-inside-strapi-content-management-system/ Wed, 29 Dec 2021 12:39:28 +0000 https://otricks.com/?p=2369 What is WebSocket? WebSocket is very useful pice of technology to communicate seamlessly from server to client, unlike HTTP it use full-duplex data transmission meaning, data...

The post How to use webSocket/Socket.io inside Strapi content management system. appeared first on Otricks.com.

]]> What is WebSocket?

WebSocket is very useful pice of technology to communicate seamlessly from server to client, unlike HTTP it use full-duplex data transmission meaning, data can be transmitted in both directions on a signal carrier at the same time. To interact with webSocket we can use socket.io library which hides most of the stuff and provide clean API.

What is strapi?

It’s headless content management system, if this headless makes no sense then think like wordpress or Joomla content management systems (cms) they comes with themes which user can install and see something in action, however in headless CMS there are no theme system, user needs to create their own theme for website or they can consume data on mobile apps.

Strapi is open source nodejs based system, its based on Koa.js.com or follows same style of coding. Its comes with Rest API as well as graphql support too.

I don’t want to create chat-room example for this guide. May be We can create to booking system to send payload to Mars using space-x shuttle service, where user can book a cargo in the space-x rocket once space is allocated from space-x’s team, the user will get notification via WebSocket about cargo space.

It’s going to be very long post, hence I will create it in multiple steps. I will be pushing code to Github in every step so do checkout all the steps of the code.

I will try to implement following

  • Create Angular application for frontend system (FE).
  • Create user login (FE)
  • Create protected route (FE)
  • Create Strapi application for backend system (BE).
  • Create sample API (BE).
  • Create dummy user (BE).
  • Start communication from Angular application to Strapi application.
  • Identify user and based on user send socket messages.

Lets start building our frontend system first, I will call our fictional cargo booking company. space-XYZ .

Please click her to checkout frontend system.

The post How to use webSocket/Socket.io inside Strapi content management system. appeared first on Otricks.com.

]]> How to implement SSL Pinning in Ionic 5? https://otricks.com/how-to-implement-ssl-pinning-in-ionic-5-or-html5-app/ Thu, 26 Mar 2020 20:08:04 +0000 https://otricks.com/?p=2135 When we develop ionic or HTML5 hybrid application often we ignore some of the goofy security stuff, however, when a client wants to do security...

The post How to implement SSL Pinning in Ionic 5? appeared first on Otricks.com.

]]> When we develop ionic or HTML5 hybrid application often we ignore some of the goofy security stuff, however, when a client wants to do security testing checkup, we need to implement many things which we really don’t care at the time of development, one of such thing is SSL Pinning

The pinning is an optional mechanism that can be used to improve the security of a service or site that relies on SSL Certificates. Pinning allows you to specify a cryptographic identity that should be accepted by users visiting your website

It’s a two-part process, first, we need to get a certificate from our API server where we host our backend services. second, we will need to implement SSL Pinning in the ionic app. Without further ado, let’s start the first part:

Step 1: Get the SSL Certificate from API Server.

Let’s pretend that our API server is otricks.com we can get an SSL certificate for the same, I will show you a very easy way to get it via Firefox browser.

Go to otricks.com or your API endpoint with https

When you click on PEM(cert), it will download otricks-com.pem file which you can convert it to filename.cer file extension. You need to have OpenSSL tool install in your machine, I have it already in my Macbook Pro. You can google it and install it.

Open a terminal window and run below command which will convert .pem a file to .cer file, change “nameOfPemFile.pem ” with your file and adjust the path accordingly. Once you run below command it will convert your pem file to cer file which we need for our next step.

openssl x509 -inform PEM -in /Users/anjum/Downloads/nameOfPemFile.pem -outform DER -out /Users/anjum/Downloads/certificate.cer

Step 2: Create a new Ionic 5 project.

Let’s create a new empty project with the Ionic CLI tool

ionic start sslpinning tabs

Open the project and edit the angular.json file add certificates block something like below. check app => architect => build => assets section. This way Angular will copy our certificates inside www folder of ionic when we build project

{
    "glob": "**/*",
    "input": "src/certificates",
    "output": "certificates"
},
{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "defaultProject": "app",
  "newProjectRoot": "projects",
  "projects": {
    "app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "www",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "assets"
              },
              {
                "glob": "**/*",
                "input": "src/certificates",
                "output": "certificates"
              },
              {
                "glob": "**/*.svg",
                "input": "node_modules/ionicons/dist/ionicons/svg",
                "output": "./svg"
              }
            ],
            "styles": [
              {
                "input": "src/theme/variables.scss"
              },
              {
                "input": "src/global.scss"
              }
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            },
            "ci": {
              "progress": false
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "app:build:production"
            },
            "ci": {
              "progress": false
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "app:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "styles": [],
            "scripts": [],
            "assets": [
              {
                "glob": "favicon.ico",
                "input": "src/",
                "output": "/"
              },
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "/assets"
              }
            ]
          },
          "configurations": {
            "ci": {
              "progress": false,
              "watch": false
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": ["**/node_modules/**"]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "app:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "app:serve:production"
            },
            "ci": {
              "devServerTarget": "app:serve:ci"
            }
          }
        },
        "ionic-cordova-build": {
          "builder": "@ionic/angular-toolkit:cordova-build",
          "options": {
            "browserTarget": "app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "app:build:production"
            }
          }
        },
        "ionic-cordova-serve": {
          "builder": "@ionic/angular-toolkit:cordova-serve",
          "options": {
            "cordovaBuildTarget": "app:ionic-cordova-build",
            "devServerTarget": "app:serve"
          },
          "configurations": {
            "production": {
              "cordovaBuildTarget": "app:ionic-cordova-build:production",
              "devServerTarget": "app:serve:production"
            }
          }
        }
      }
    }
  },
  "cli": {
    "defaultCollection": "@ionic/angular-toolkit"
  },
  "schematics": {
    "@ionic/angular-toolkit:component": {
      "styleext": "scss"
    },
    "@ionic/angular-toolkit:page": {
      "styleext": "scss"
    }
  }
}

Let’s make certificates folder inside src folder and copy your .cer file inside it. please check the screenshot below for the folder structure.

Now open the terminal and run ionic cordova platform add android to add an android platform. It will generate all related files and folders for android. Open the file config.xml and add below code inside the platform block.

<platform name="android">
     <!-- other tags will be here  -->
    <resource-file src="src/certificates/certificate.cer" target="src/certificates/certificate.cer" />
</platform>

Next, we need to include the Cordova plugin for SSL Pinning, for that we will use https://github.com/silkimen/cordova-plugin-advanced-http plugin which is great. Run below commands in the terminal to install the plugin in the project and we will also need ionic native too.

ionic cordova plugin add cordova-plugin-advanced-http

npm install @ionic-native/http

Once done open app.component.ts file and add code inside initializeApp() function check below file 

import { Component } from '@angular/core';

import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

 
import { HTTP } from '@ionic-native/http/ngx'; //<=== Import this 

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent {
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private httpSSL: HTTP //<=== define this too
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();

      this.platform.ready() 
      .then(() => {
          
          
        this.httpSSL.setServerTrustMode("pinned") //<=== Add this function 
          .then(() => {
              console.log("Congratulaions, you have set up SSL Pinning.")
          })
          .catch(() => {
              console.error("Opss, SSL pinning failed.")
          });
          
          
      })

    });
  }
}

Now create new service folder to keep all our http service at one place something like below and create api.service.ts file

api.service.ts

import { Injectable } from '@angular/core';
import { HTTP } from '@ionic-native/http/ngx';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
    
    readonly  apiEndPoint = 'https://otricks.com/api/user';
    readonly  fakeEndPoint = 'http://www.google.com/api/xyz'
    
    // This will get work with SSL Pinning becuase API endpoint is same as our certificate 
    getDataFromActualAPi(){
        return this.http.get(`apiEndPoint`,{}, {});
    }
    
    
    // This call will be fail as the domain is not correct according to our certificate.
    getDataFromFakeApi(){
        return this.http.get(`fakeEndPoint`,{}, {});
    }

}

When you call this API service in the component getDataFromActualAPi() will return your correct response, however, if you try to call getDataFromFakeApi() the function will fail as the provided certificate is not from this domain.

The system will throw below error message, you can check in the debugger console.

{status: -2, error: "TLS connection could not be established: javax.net…n: Trust anchor for certification path not found."}
error: "TLS connection could not be established: javax.net.ssl.SSLHandshakeException: java.security.cert.CertPathValidatorException: Trust anchor for certification path not found."
status: -2
}

Hope this will help someone 🙂 if you like this article you may want to check how to protect your server

The post How to implement SSL Pinning in Ionic 5? appeared first on Otricks.com.

]]> Ideal setup for working with nodejs typescript in VS code? https://otricks.com/what-is-the-ideal-setup-for-working-with-nodejs-typescript-in-vs-code/ Fri, 20 Mar 2020 19:30:46 +0000 https://otricks.com/?p=2105 I was a very big fan of nodemon for a long time. for those who don’t have any idea about nodemon, it’s file watcher that’s...

The post Ideal setup for working with nodejs typescript in VS code? appeared first on Otricks.com.

]]> I was a very big fan of nodemon for a long time. for those who don’t have any idea about nodemon, it’s file watcher that’s looking for any change in any file and refreshes the project to see those changes. In nodejs ecosystem, its uses for debugging purpose which was very helpful. however on the other side its eat up all the system resource.

Now I have switched from nodemon to new amazing ts-node-dev as stated in npm site

It restarts target node process when any of required files changes (as standard node-dev) but shares Typescript compilation process between restarts. This significantly increases speed of restarting comparing to node-dev -r ts-node/register ..., nodemon -x ts-node ... variations because there is no need to instantiate ts-node compilation each time.

I will show my vs code setup for typescript which auto recompile and uses ts-node-dev package for any file change event.

Setup vs code for typescript

Create a new project in your computer

mkdir dummyProject
cd dummyProject

I will be using npm as my package manager, let’s create a new package with default settings with below command 

npm init -y

It will generate a new file as a package.json 

{
  "name": "dummyProject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Add typescript, ts-node-dev and create new src folder with index.ts file inside.

npm install typescript ts-node-dev --save-dev

Open package.json file and add below script inside the scripts block.

"dev": "ts-node-dev --respawn --transpileOnly src/index.ts"
"dev:debug": "ts-node-dev --inspect=4321 --respawn --transpileOnly src/index.ts"
{
  "name": "dummyProject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "ts-node-dev --respawn --transpileOnly src/index.ts",
    "dev:debug": "ts-node-dev --inspect=4321 --respawn --transpileOnly src/index.ts"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Visual studio code debugging

Inside visual studio code, we can add a breakpoint in the typescript code which can stop at certain points. Inside your root directory of the current project.

mkdir .vscode
cd .vscode
touch launch.json

Paste the following into your launch.json which we have created the previous step.

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "Attach to dev:debug",
      "protocol": "inspector",
      "port": 4321,
      "restart": true,
      "cwd": "${workspaceRoot}"
    }
  ]
}

Now do npm run dev:debug first in vs code terminal. once its’ started then click on the debug button from the left menu in VS code. it will open debugger panel something below.

sample vs code with debugger step

Check out other tips such as How to secure ubuntu server

The post Ideal setup for working with nodejs typescript in VS code? appeared first on Otricks.com.

]]> Best & free google chrome plugin with HD wallpaper, world time, quotes with many more.. https://otricks.com/replace-your-boring-chrome-tab-screen-with-an-amazing-tab-it-has-lots-of-features-functionality-install-it-get-amazed/ Sat, 14 Mar 2020 14:18:43 +0000 https://otricks.com/?p=2075 When we start a new page/ new tab, we want something amazing from the chrome tab. A great HD wallpaper with clocks/ Timers world time...

The post Best & free google chrome plugin with HD wallpaper, world time, quotes with many more.. appeared first on Otricks.com.

]]> When we start a new page/ new tab, we want something amazing from the chrome tab. A great HD wallpaper with clocks/ Timers world time with different timezones, custom images with dynamically generated patterns.

We have covered all the great features including, world’s best photo from great photographers, best quotes to get motivated and inspire every day, add new abstract patterns to show your creativity and imagination, view the current time and set world clock with a different timezone that could be useful if you are working on multiple locations and want to see a quick time.

New Amazing Tab will be free forever for people like you and me

Features list

  • Get amazed with a fresh image every day from world-class photographers.
  • Create wallpaper patterns, to show your creative side. save created pattern into a photo album.
  • Change wallpaper image or set your own image as a wallpaper image.
  • Set Image change on every new tab open or every hour.
  • Search images from millions of images and set as wallpaper.
  • Get images from already crafted categories to suit your choice.
  • Set multiple clocks to have different timezones time with your custom names.
  • Set master clock with different styles, such as Rotary clock, Classical clock, Digital clock, and 3D clock.
  • Get motivated every day with the best quotes, you can change or add to favorite your quote.
  • Set Salat times (Muslim prayer) based on your current location or set the different locations of your choice.

Please download it from the chrome store and provide your feedback.

https://chrome.google.com/webstore/detail/new-amazing-tab/ekbpbniminfcdefejlmipbdcnoblhamb?h1=en

The post Best & free google chrome plugin with HD wallpaper, world time, quotes with many more.. appeared first on Otricks.com.

]]> Manage Multiple version of Node in a single machine https://otricks.com/manage-multiple-version-of-node-in-a-single-machine/ Fri, 06 Mar 2020 13:32:07 +0000 https://otricks.com/?p=2049 When we start using node.js as our primary framework for writing multiple applications, Over the time it will be really pain in the neck, to...

The post Manage Multiple version of Node in a single machine appeared first on Otricks.com.

]]> When we start using node.js as our primary framework for writing multiple applications, Over the time it will be really pain in the neck, to manage older projects or projects with different node versions.

While working on angularjs to angualr 9 or ionic to ionic 5, I have a variety of node versions in different projects. Node community has also faced similar problems, to rescue there is a package to manage different versions of the node in a single computer, without uninstalling or re-installing your required version.

You can install https://github.com/nvm-sh/nvm in your computer to manage node

Once install its very easy to change your desire node version. To download, compile, and install the latest release of the node, do this:

nvm install node # "node" is an alias for the latest version

The post Manage Multiple version of Node in a single machine appeared first on Otricks.com.

]]>