Nodejs – Otricks.com

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.

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.