DEV Community: sifatul

NestJs Course - part 2: Providers and Services

sifatul — Sun, 20 Nov 2022 11:16:55 +0000

Learn NestJs by creating a user management system, Part -2.
While you follow along with us it's highly recommended to go through the official documentation.

In Part 1 you learned to work with the Controller and Routing.

The goal of part 2 is to learn to work with:

interface
Providers (Service)

Providers are plain JavaScript classes that are declared as providers in a module – services, repositories, factories, helpers, and so on.

Let's start with where we left off. Type check could be managed with an interface.

You may use CLI to generate an interface

nest generate interface users

And update the response type for each route in the controller.

import { Controller, Delete, Get, Param, Patch, Post, Put } from '@nestjs/common';
import { Users } from './users.interface';

let sampleUsers = [{
  id: 1,
  name: 'user1',
  email: 'user1@email.com'
}]
@Controller('users')
export class UsersController {
  @Get()
  findAll() : Users []{
    return sampleUsers
  }
  @Get(':id')
  findOne(@Param() params) : Users{
    const id = params.id
    return sampleUsers.find(user => user.id === id)
  }
  @Post()
  createOne() : Users []{
    const paramsBody = {
      id: 2,
      name: 'user2',
      email: 'user2@email.com'

    }
    sampleUsers.push(paramsBody)
    return sampleUsers
  }
  @Put(':id')
  updateOne(@Param() params) : Users {
    const id = params.id
    const paramsBody = {
      id: id,
      name: 'updatedUser',
      email: 'email-updated@email.com'
    }
    const indexOfUser = sampleUsers.findIndex(item => item.id === id)
    sampleUsers[indexOfUser] = paramsBody
    return sampleUsers[indexOfUser]
  }
  @Patch(':id')
  updateOnePartly(@Param() params) : Users {
    const id = params.id
    const paramsBody = {
      email: 'email-update-only@email.com'
    }
    const indexOfUser = sampleUsers.findIndex(item => item.id === id)
    sampleUsers[indexOfUser].email = paramsBody.email
    return sampleUsers[indexOfUser]
  }
  @Delete(':id')
  deleteOne(@Param() params) : Users []{
    const id = params.id
    sampleUsers = sampleUsers.filter(user => user.id === id)
    return sampleUsers
  }
}

Services are a good example of a Provider. Services are responsible for data storage and retrieval and are designed to be used by the Controllers. Instead of data storing or retrieving in the controller (like you did in part 1), data management will be done inside the service and the controller will use the service at its need.
Let's transfer codes from the controller and create a service src/users/users.service.ts and use the interface.

nest generate service users

Instead of using the CLI if you manually create the service then do remember to import the service inside app.module.ts

import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { UsersController } from './users/users.controller';
import { UsersService } from './users/users.service';
@Module({
  imports: [],
  controllers: [AppController, UsersController],
  providers: [AppService, UsersService],
})
export class AppModule {}

So the service would look like the following:

In order for the services to be digested by another class (controller) @Injectable() decorator needs to be declared and the controller must inject the service in its constructor to use the service.

constructor(private usersServices: UsersService) {}

If you create the service with CLI you may notice that a .spec.ts is generated at src/users/users.service.spec.ts.
In next lesson we will see the usage of this file.

Part 2.
Source code: https://github.com/sifatul/user-management-with-nestjs/tree/part-2
Topic: Provider (Service)

Part 1.
Source code: https://github.com/sifatul/user-management-with-nestjs/tree/part-1
Topic: Routing (Controller)

I will be posting bi-weekly for javascript developers. Feel free to request topics that you would like to learn or recommend in the comment section.

NestJs Course - part 1: Controller and Routing

sifatul — Mon, 14 Nov 2022 13:09:15 +0000

Learn NestJs by creating a user management system, Part -1

While you follow along with us it's highly recommended to go through the official documentation.

The goal of this part:

Create NestJs project
Create routes or controllers

Step1: Let's start by creating a project

$ npm i -g @nestjs/cli
$ nest new user-management-with-nestjs

Now, you can run go inside the project

cd user-management-with-nestjs

and run the project

npm run start

You may configure the project to listen to any other port by updating in main.ts file.

await app.listen(<another-port>);

Step 2: Now you need a route to get a list of users and to create a route you need a controller.
You may use CLI to generate a controller

 nest generate controller users

or
create a users/users.controller.ts file manually but remember need to register the controller in app.module.ts

import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { UsersController } from './users/users.controller';

@Module({
  imports: [],
  controllers: [AppController, UsersController],
  providers: [AppService],
})
export class AppModule {}

Presently controller file is empty and you can add decorators.

@Controller() decorator to easily group a set of related routes
Standard HTTP methods: @Get(), @Post(), @Put(), @Patch(), @Delete(), @Options(), and @Head(). In addition, @All() defines an endpoint that handles all of them.
Route parameters declared in this way can be accessed using the @param() decorator

You can try to create a rest API CRUD to create, read, update, and delete a user.

@Get /users/
@Get /users/:id
@Post /users/
@Put /users/:id
@Delete /users/:id

As you don't have a database connection yet you can begin with an array to hold the data.

const sampleUsers = [{
  id:1,
  name:'user1',
  email:'user1@email.com'
}]

simple implementation of CRUD can be as follows in users.controller.ts and a few more additional http methods are shown.

import { Controller, Delete, Get, Param, Patch, Post, Put } from '@nestjs/common';

let sampleUsers = [{
  id: 1,
  name: 'user1',
  email: 'user1@email.com'
}]
@Controller('users')
export class UsersController {
  @Get()
  findAll() {
    return sampleUsers
  }
  @Get(':id')
  findOne(@Param() params) {
    const id = params.id
    return sampleUsers.find(user => user.id === id)
  }
  @Post()
  createOne() {
    const paramsBody = {
      id: 2,
      name: 'user2',
      email: 'user2@email.com'

    }
    sampleUsers.push(paramsBody)
    return sampleUsers
  }
  @Put(':id')
  updateOne(@Param() params) {
    const id = params.id
    const paramsBody = {
      id: id,
      name: 'updatedUser',
      email: 'email-updated@email.com'
    }
    const indexOfUser = sampleUsers.findIndex(item => item.id === id)
    sampleUsers[indexOfUser] = paramsBody
    return sampleUsers[indexOfUser]
  }
  @Patch(':id')
  updateOnePartly(@Param() params) {
    const id = params.id
    const paramsBody = {
      email: 'email-update-only@email.com'
    }
    const indexOfUser = sampleUsers.findIndex(item => item.id === id)
    sampleUsers[indexOfUser].email = paramsBody.email
    return sampleUsers[indexOfUser]
  }
  @Delete(':id')
  deleteOne(@Param() params) {
    const id = params.id
    sampleUsers = sampleUsers.filter(user => user.id === id)
    return sampleUsers
  }
}

You can get the source code in Github. Like the post for part-2.

I will be posting bi-weekly for javascript developers. Feel free to request topics that you would like to learn or recommend in the comment section.

10 string methods you must know as a js beginner

sifatul — Fri, 11 Nov 2022 15:35:50 +0000

Naming conventions are most commonly used. Good to remember these terms.

1.UPPERCASE

"hello world".toUpperCase()

2.lowercase

"hello world".toLowerCase()

3.camelCase

"hello world"
.replace(/(?:^\w|[A-Z]|\b\w)/g, (word, index) => {
 if(index === 0) return word.toLowerCase()
 return word.toUpperCase();
})
.replace(/\s+/g, "");

4.PascalCase

"hello world"
 .replace(/(?:^\w|[A-Z]|\b\w)/g, (word) => {
  return word.toUpperCase();
 })
.replace(/\s+/g, "");

Few more that are commonly used with forms.

5.is a valid url

/^(ftp|http|https):\/\/[^ "]+$/.test("https://leetcode.com/");

6.get list of query strings from url

const url = "https://www.google.com/doodles/maurice-sendaks-85th-birthday?hl=en-GB"
const params = (url.split('?')?.[1]?.split('&') || [])
 .reduce((prev, current) => {
  const keyVal = current.split('=');
  const key = keyVal[0];
  const val = keyVal[1];
  prev[key] = val;
  return prev;
 }, {});

7.remove special string from a text

"hello@world".replace(/[^\w\s]/gi, '')

8.get ascii value of a character

'a'.charCodeAt(0)

9.convert json to string

const obj = {
 key:'value'
}
JSON.stringify(obj)

10.convert object string to json

JSON.parse('{"key":"value"}')

You can get all these and many more commonly used functions in a single npm package but as a beginner it's good to know how these are done.

I will be posting bi-weekly for javascript developers. Feel free to request for topics that you would like to learn or recommend in the comment section.

Simple guide to create package in Github registry

sifatul — Wed, 10 Aug 2022 01:38:00 +0000

Creating a package in the GitHub registry is very simple.

Firstly package.json needs to be updated; so that name, repository and publishConfig does not mismatch.

  "name": "@<owner>/<repo-name>",
  "publishConfig": {
    "registry": "https://npm.pkg.github.com/@<owner>"
  },
  "repository":"https://github.com/<owner>/<repo-name>.git",

Secondly, create a GITHUB_TOKEN which would be used in verification.

The package can be published by:
a) GitHub action or
b) manually in terminal

a) To publish with GitHub action
add a workflow in .github/workflows/<workflow-name>.yml

name: Node.js Package

on:
  push:
    branches: ["<branch-name>"]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 12
      - run: npm ci
      - run: npm test

  publish-gpr:
    needs: build
    runs-on: ubuntu-latest
    permissions:
      packages: write
      contents: read
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 12
          registry-url: https://npm.pkg.github.com/
      - run: npm ci
      - run: npm publish
        env:
          NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}

b) publish package manually in terminal

Firstly, create a .npmrc file at the root of the directory

@<owner>:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=<GITHUB_TOKEN>

Secondly, login to npm
npm login --scope=@<owner> --registry=https://npm.pkg.github.com

Finally, publish the package.
npm publish
sample project in GitHub

How to use a private package in another repository

create a .npmrc file at the root of the directory with github token having access to the private package

@<owner>:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=<GITHUB_TOKEN>

npm install will install the package normally

PS: for public package in github repository no additional task is required

Useful links:

Or
if you want to publish package in npm registry

Simple guide to create React CRA component, test locally and publish to npm

sifatul — Sun, 20 Dec 2020 20:47:00 +0000

In this post we will come to understand how to make a simple REACT SPA(single page application) and publish in NPM.

Project Setup

Step 1: Create a new React app with CRA

npx create-react-app app-name cd my-app npm start

Step 2: Create component

Lets create a button component as ButtonComponent.js inside src/components/ folder.

Step 3: Create babel.config.js

Create babel.config.js in the root.

module.exports = {
   presets:[
        "@babel/preset-env",
        "@babel/preset-react"
   ]
}

Step 4: Update package.json

Now, to publish the button component add the following line to scripts:

"publish:npm": "rm -rf dist && mkdir dist &&  babel                      src/components -d dist --copy-files"
This script recreates builds React application, recreates the /dist folder , and stores files in /dist directory. Lastly change private from true to false and main to dist/ButtonComponent.js.

"private": false,
"main": "dist/ButtonComponent.js",
"scripts": {
            "start": "react-scripts start",
            "build": "react-scripts build",
            "test": "react-scripts test",
            "eject": "react-scripts eject",
            "publish:npm": "rm -rf dist && mkdir dist &&  babel src/components -d dist --copy-files",
            "publish:window": "cross-env NODE_ENV=production && npx rimraf dist && mkdir dist &&  babel src/components -d dist --copy-files"
}

Sample of package.json and file directories are as follows :

Build, Test locally, and Publish

Step 6: Build the project

Transpile code from Es6 to Es5.

npm run publish:npm

For windows

npm run publish:window

Step 7: Test locally

Run npm link inside the project to create a global module of ButtonComponent.

npm link

Now, to use the module run npm link inside other project from which to test.

npm link app-name

Step 8: Publish

npm publish

Congratulations you just created your first npm package!!!

Another simple way could be to publish your package in github registry.