Anjum Nawab – Otricks.com

Steps to open port 25 on EC2 instance – Amazon web service (AWS)

Anjum Nawab — Sun, 09 Jan 2022 08:51:51 +0000

When you create new EC2 instance (server) on AWS you own everything, including what is open to public and what is not, with one exception port 25, You can’t open this port without AWS help. They have valid reasons to block it, as some bad people use EC2 to spam.

You can open other ports using —> Network & Security —> Security Groups

Request to open

Goto top right side inside AWS account, and click on ? mark icon, it will open dropdown and click on support center.

It will take you to AWS Support Center page. click on Create case it will take you to the page with three radio button options, you need to select Server limit increase it will open search field, you will need to search with “ec2 email” and last click on EC2 email external link, as shown in below image.

You need to provide details like below.

Hello Amazonian
I will use Amazon SES to send email to reset passwords in case they request password reset. The email will always have an unsubscribe link that they can request to be removed from our list.
My web server is based in openSource technology which comes with below services to protect from spamming etc
Amavisd-new,
SpamAssassin,
ClamAV
Kindly approve my request for Amazon SES production access in the above mentioned region. Let me know if you have any questions.
Thanks

They are very fast to response, I often get in without 1 hour.

Hope you like this small post, if its helpful please share it on social media.

Create front-end app for space-XYZ cargo booking system.

Anjum Nawab — Wed, 29 Dec 2021 12:44:48 +0000

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 
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 
    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.

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

npx ng generate component body

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


  Some Name comes form server
  Some text comes from server
  Book it now

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.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.

Anjum Nawab — Wed, 29 Dec 2021 12:39:28 +0000

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 delete MySQL binlog files if you don’t have disk space left

Anjum Nawab — Thu, 23 Apr 2020 05:47:40 +0000

MySql does some really stupid stuff, often I feel like it’s no MY-SQL it SOMEONE-ELSE-SQL. Maybe it has some valid reasoning behind it, which I don’t know completely yet. One issue which often people encountered is MySql binlog files.

These binlog files are very storage-intensive, most of the time for a small application each binlog file will be around 1.2GB.

Now imagine if you have 20GB disk-space it will eat up pretty much everything to the point where not a single kb is remaining for the server, if such thing happens, we even can’t run small commands like opening a file or editing a file etcetera.

As you can see in below image where It uses 100% of disk space 🙁

Some blog suggested that we can delete those files using myql> in terminal, however if you don’t have any space left we can’t even run sql in terminal.

The right way to remove binlog files.

If you are a root user to the system you can do following things to get it deleted in proper way.

sudo -su

Run df -h to check current disk space information, it will show you something like below. check /dev/xvda1 section it consume all the space which I have it 🙁

Filesystem      Size  Used Avail Use% Mounted on
udev            236M     0  236M   0% /dev
tmpfs            49M  5.7M   44M  12% /run
/dev/xvda1       20G   20G     0 100% /
tmpfs           244M     0  244M   0% /dev/shm
tmpfs           5.0M     0  5.0M   0% /run/lock
tmpfs           244M     0  244M   0% /sys/fs/cgroup
/dev/loop0       92M   92M     0 100% /snap/core/8689
/dev/loop1       18M   18M     0 100% /snap/amazon-ssm-agent/1480
/dev/loop2       18M   18M     0 100% /snap/amazon-ssm-agent/1566
/dev/loop4       94M   94M     0 100% /snap/core/8935
tmpfs            49M     0   49M   0% /run/user/1000

To get more information about your database usage you can run du -hs /opt/bitnami/mysql/data for me, it’s 16 bg, which is way too much for small application.

16G	/opt/bitnami/mysql/data

To check all the big files (in space allocation) run below command, it will show list of culprits

du -hs /opt/bitnami/*/*/* |sort -rh | head -35

1.1G	/opt/bitnami/mysql/data/binlog.000017
1.1G	/opt/bitnami/mysql/data/binlog.000016
1.1G	/opt/bitnami/mysql/data/binlog.000015
1.1G	/opt/bitnami/mysql/data/binlog.000014
1.1G	/opt/bitnami/mysql/data/binlog.000013
1.1G	/opt/bitnami/mysql/data/binlog.000012
1.1G	/opt/bitnami/mysql/data/binlog.000011
1.1G	/opt/bitnami/mysql/data/binlog.000010
1.1G	/opt/bitnami/mysql/data/binlog.000009
1.1G	/opt/bitnami/mysql/data/binlog.000008
1.1G	/opt/bitnami/mysql/data/binlog.000007
1.1G	/opt/bitnami/mysql/data/binlog.000006
1.1G	/opt/bitnami/mysql/data/binlog.000003
1.0G	/opt/bitnami/mysql/data/binlog.000018
569M	/opt/bitnami/mysql/data/binlog.000004

At this point you even can’t open file via nano etc.txt or preform any other operation in the system as no space is left.

You can delete binlog.000001 to get some space, run rm binlog.000001 once it’s deleted you will be able to run nano command.

Now open binlog.index file using nano binlog.index and remove all the entries of binlog.0xxx from binlog.index file, once done save it and exit.

Run below to remove all fu(king binlog files at once, if you want you can remove mysqld.log files to as it might not be any use.

rm binlog.00*

After this if you run df -h you will get your space back. check /dev/xvda1 section 🙂

Filesystem      Size  Used Avail Use% Mounted on
udev            236M     0  236M   0% /dev
tmpfs            49M  5.7M   44M  12% /run
/dev/xvda1       20G  4.4G   15G  23% /
tmpfs           244M     0  244M   0% /dev/shm
tmpfs           5.0M     0  5.0M   0% /run/lock
tmpfs           244M     0  244M   0% /sys/fs/cgroup
/dev/loop0       92M   92M     0 100% /snap/core/8689
/dev/loop1       18M   18M     0 100% /snap/amazon-ssm-agent/1480
/dev/loop2       18M   18M     0 100% /snap/amazon-ssm-agent/1566
/dev/loop4       94M   94M     0 100% /snap/core/8935
tmpfs            49M     0   49M   0% /run/user/1000

Hope this will be helpful to someone.

I go beyond boundaries that trap me. Attachments and limitations in thinking are removed and I see people as actors playing roles sometimes negative and sometimes positive and scenes as passing phases, sometimes negative and sometimes positive. This experience translates into power in the consciousness as well as in words and actions.

You may check other informative article https://otricks.com/responsiveness-in-reactive-programming/

The post How to delete MySQL binlog files if you don’t have disk space left appeared first on Otricks.com.

How to implement SSL Pinning in Ionic 5?

Anjum Nawab — Thu, 26 Mar 2020 20:08:04 +0000

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.

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?

Anjum Nawab — Fri, 20 Mar 2020 19:30:46 +0000

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.

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.

Hackathon 3.0 in Dubai UAE 2020

Anjum Nawab — Fri, 20 Mar 2020 06:26:55 +0000

Last month across the UAE hackathon was conducted by the Telecommunications Regulatory Authority (TRA). it was an initiative to push digital transformation at the federal level.

Hackathon theme was based on:

Happiness & Wellbeing
Expo 2020
Smart Sustainable Cities
Environment & Climate Change
World-Class Healthcare
Invest in Space
Sustainability & Integrated Infrastructure
World-Class Education
Digital Transformation
Security & Safety

We decided to participate in hackathon3.0 in Dubai UAE which was on 24 – 26 February 2020. We form a quick team within our office and register. we named our team as iHifz (which means conserve in Arabic).

After initial brainstorm sessions, we pick two main ideas that revolve around wellbeing and smart sustainable cities. Hackathon.ae provides very good information regarding data points aka APIs.

I Had participated in other hackathons in the past, which was conducted by IATA and other big names in the tech industry, I am very impressed by the hackthon.ae team who manage such a big event with ease.

For Dubai, they have selected Zayad University, as the venue was near to our office building it was a bit convenient for the guys to travel.

For opening keynote, we were little bord as all the speakers were talking in Arabic. however, after lunch when other teams were pitching their ideas we were blown away, so many college teams had great ideas and were showing their concept to the jury.

We had great fun building our prototype and showing it to the final selection committee.

The post Hackathon 3.0 in Dubai UAE 2020 appeared first on Otricks.com.

Best & free google chrome plugin with HD wallpaper, world time, quotes with many more..

Anjum Nawab — Sat, 14 Mar 2020 14:18:43 +0000

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.

How to secure your Ubuntu server from brute-force attacks?.

Anjum Nawab — Tue, 10 Mar 2020 11:52:55 +0000

Nowadays more and more people and organizations are going on the cloud for their applications, and its very common practice to have a server on the cloud. As more people are using cloud solutions so do more attackers are after them.

According to Ubuntu data, there are around at least 20 million users are using Ubuntu and that’s a very big number. It would be a gold mine for attackers who keep trying to get access to your server using a brute-force attack, for those who don’t know what the hack is brute-force attack?. its an attempt to crack username and password, using trial and error approach with the hope to get it correct for multiple time, if you keep your password or username very generic or easy to guess they might get into your system.

It’s a very old attack method, however, it’s still very effective and popular within the hacker community. You can read more about brute-force attack here.https://en.wikipedia.org/wiki/Brute-force_attack

It’s always a better idea to secure your system/service/server from such wicked people. Let’s get it done.

I will be using my Ubuntu 18.04.4 LTS (GNU/Linux 4.15.0-88-generic x86_64) machine.

Update your system first running below commands in the terminal, my assumption is you are already logged in with Root access using SSH.

apt-get update
apt-get upgrade

After a system update add Fail2ban, which is an invasion blocking software framework that protects servers from brute-force attacks, it’s written in the Python.

Fail2Ban scans log files like /var/log/auth.log and bans IP addresses conducting too many failed login attempts. It does this by updating system firewall rules to reject new connections from those IP addresses, for a configurable amount of time.

Fail2Ban comes out-of-the-box ready to read many standard log files, such as those for sshd and Apache, and is easily configured to read any log file of your choosing, for any error you wish.

Though Fail2Ban is able to reduce the rate of incorrect authentication attempts, it cannot eliminate the risk presented by weak authentication. Set up services to use only two factor, or public/private authentication mechanisms if you really want to protect services.

apt-get install fail2ban

Copy the configuration file and do changes

sudo cp /etc/fail2ban/jail.conf /etc/fail2ban/jail.local

sudo nano /etc/fail2ban/jail.local

Change the ban time from 600 (10 minutes) to 604800 (7 days) is guess this would be more than enough to have peaceful nights 🙂

Nest step is to install logwatch is the tool the aggregate all system logs and make meaningful decisions.

apt-get install logwatch

Logwatch can be configurated to trigger a daily email of your logs.

nano /etc/cron.daily/00logwatch

Add below line at the bottom of the cron job file and replace the example email with your own address.

/usr/sbin/logwatch --output mail --mailto mail@example.com --detail high

The post How to secure your Ubuntu server from brute-force attacks?. appeared first on Otricks.com.

Manage Multiple version of Node in a single machine

Anjum Nawab — Fri, 06 Mar 2020 13:32:07 +0000

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.