DEV Community: Nandhakumar

How To Add Custom Font in Flutter

Nandhakumar — Fri, 17 Feb 2023 23:36:19 +0000

Recently, I was developing a clothing store app using flutter. And I was about to use a custom font, so researched flutter docs to find a way to add custom fonts.

Here's how I did 👇

Download your fonts

As a first step download the required fonts. Flutter supports .ttc,.ttf and .otf fonts. It doesn't support .woff and .woff2 fonts for all platforms.

Add Fonts To Your Project

Create assets/fonts in the root level of the project

Add all your fonts.

In my case, I am adding all styles of EncodeSans Font to Fonts directory

Declare Fonts In Pubspec.yml



fonts:
    - family: EncodeSans
      fonts:
        - asset: assets/fonts/EncodeSans-Black.ttf
          weight: 900
        - asset: assets/fonts/EncodeSans-ExtraBold.ttf
          weight: 800
        - asset: assets/fonts/EncodeSans-Bold.ttf
          weight: 700
        - asset: assets/fonts/EncodeSans-SemiBold.ttf
          weight: 600
        - asset: assets/fonts/EncodeSans-Medium.ttf
          weight: 500
        - asset: assets/fonts/EncodeSans-Regular.ttf
          weight: 400
        - asset: assets/fonts/EncodeSans-Thin.ttf
          weight: 300
        - asset: assets/fonts/EncodeSans-Light.ttf
          weight: 200
        - asset: assets/fonts/EncodeSans-ExtraLight.ttf
          weight: 100

Create a Font Family Typography Class

Creating a common Typography class that holds font family styles would help in using font family throughout the application

Add constant/typography.dart file under lib directory



// typography.dart

import 'package:flutter/material.dart';

const String _FONT_FAMILY = 'EncodeSans';

class Typogaphy {
  static TextStyle Black =
      TextStyle(fontFamily: _FONT_FAMILY, fontWeight: FontWeight.w900);

  static TextStyle ExtraBold =
      TextStyle(fontFamily: _FONT_FAMILY, fontWeight: FontWeight.w800);

  static TextStyle Bold =
      TextStyle(fontFamily: _FONT_FAMILY, fontWeight: FontWeight.w700);

  static TextStyle SemiBold =
      TextStyle(fontFamily: _FONT_FAMILY, fontWeight: FontWeight.w600);

  static TextStyle Medium =
      TextStyle(fontFamily: _FONT_FAMILY, fontWeight: FontWeight.w500);

static TextStyle Regular =
      TextStyle(fontFamily: _FONT_FAMILY, fontWeight: FontWeight.w400);

static TextStyle Thin =
      TextStyle(fontFamily: _FONT_FAMILY, fontWeight: FontWeight.w300);

static TextStyle Light =
      TextStyle(fontFamily: _FONT_FAMILY, fontWeight: FontWeight.w200);

static TextStyle ExtraLight =
      TextStyle(fontFamily: _FONT_FAMILY, fontWeight: FontWeight.w100);
}

Using Font Family From The Typography Class

To use the font family declared in the typography class,
use copyWith method to merge typography style with text-specific style.



Text('This is a Semi Bold Typo',
                  textAlign: TextAlign.center,
                  style: Typogaphy.SemiBold.copyWith(
                    color: Colors.black,
                    fontSize: 40,
                  ))

Here's my main.dart file looks like



import 'package:clothing_store/constant/typography.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Custom Typo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title,
            style: Typogaphy.SemiBold.copyWith(color: Colors.white)),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('This is a Semi Bold Typo',
                  textAlign: TextAlign.center,
                  style: Typogaphy.SemiBold.copyWith(
                    color: Colors.black,
                    fontSize: 40,
                  ))
            ],
          ),
        ),
      ),
    );
  }
}

For simplicity, I have created a basic typography class with font families alone. Based on your application requirement, you can extend it.

Final Result

Conclusion

In this post, you have learned how to add a custom font, what fonts are supported by the flutter and how to reuse font family throughout the application.

Thanks For Reading!

Hope you have learned something new today 😊.

Originally Posted On - https://www.nandhakumar.io/post/how-to-add-custom-font-in-flutter

Follow me to get notified of all upcoming posts.

Follow and connect with me on Twitter, Instagram, Email and LinkedIn for more interesting stuff like this.

Regex #1: Understanding Regex, Regex-Based String Methods and Regex Flags

Nandhakumar — Wed, 04 Jan 2023 12:45:38 +0000

Hi There! 👋

In this post, you will learn the fundamentals of regex.

Originally Posted On - https://www.nandhakumar.io/post/regex-1-understanding-regex-methods-and-flags

Why Regex?

The most common feature every application has is user registration and login.

Nowadays, Libraries(Eg: Class Validator NPM Package) that you use for form validation has a direct method to validate input value like isEmail(), etc...

Which is very helpful, But each application has its own use case. So, these direct methods won't be helpful in that case.

For Example, Not all application has the same rules for password.

In such scenarios, you can use Regex Pattern to validate the user input values.

Note: Regex is not limited to use only for Input Validation

Most of the time I used to find the required Regex pattern from Google.

At some point, I thought why can't we try to understand regex instead of searching on Google?

Just gave try!

After understanding some basics, Regex was interesting. And I regret that I didn't learn Regex so far.

That's How I started learning Regex in depth.

Note: Examples I share in this post are based on
javascript, but the concepts can be applied to any
programming language

Defining a Regex Pattern?

When you add a pattern between /, it is considered a regex pattern

/[regex pattern]/

Note: There shouldn't be any ' or " around the /

Two Ways to test Regex Pattern

Using Regex Methods

.test() - It will return a boolean value if the pattern matches the string

// regex Pattern
const pattern = /world/ 

// string to be tested against the pattern
const text = 'Hello world' 

// returns `true` as the `world` is present in the message
console.log('[Test Method] - ', pattern.test(message))

// output
[Test Method] - true

.exec() - It will return an array with the index and additional info on the matching pattern

// regex Pattern
const pattern = /world/ 

// string to be tested against the pattern
const text = 'Hello world' 

// returns Array with index and additional info
console.log('[Exec Method] - ', pattern.exec(message))

// output
[Exec Method] - [ 'world', index: 6, input: 'Hello world', groups: undefined ]

Using String Methods

.match() - It will return an array with the index and additional info on the matching pattern (similar to .exec() method) if only one match is found. Otherwise, it will return all the string that matches the pattern as an array.

// regex Pattern
const pattern = /world/ 

// string to be tested against the pattern
const text = 'Hello world' 

// returns Array with index and additional info
console.log('[Exec Match] - ', text.match(pattern))

// output
[Exec Match] - [ 'world', index: 6, input: 'Hello world', groups: undefined ]

.replace() - It will replace the string that matches the pattern with the string that is to be replaced.

// regex Pattern
const pattern = /world/ 

// string to be tested against the pattern
const text = 'Hello world' 

// returns Array with index and additional info
console.log('[Exec Replace] - ', text.replace(pattern, 'Word'))

// output
[Exec Replace] - Hello Word

.split() - It will split the text into an array based on the matching pattern

// regex Pattern
const pattern = /world/ 

// string to be tested against the pattern
const text = 'Hello world' 

// returns Array with index and additional info
console.log('[Exec Split] - ', text.split(pattern))

// output
[Exec Split] - [ 'Hello ', '' ]

Regex Flags

There are three 3 flags in Regex

g - Global

Usually, when you try to match a pattern, it will match only the first occurrence in the string.

By adding the Global flag to the Regex pattern, it can match multiple occurrences of the pattern in the string

// regex Pattern with global flag
const pattern = /the/g

// string to be tested against the pattern
const text = 'Get the Work Done and the work will pay off.'

// Returns Array of strings matching the pattern
console.log('[Exec Global Flag] - ', text.match(pattern))

// output
[Exec Global Flag] - [ 'the', 'the' ]

i - Case Insensitive

By default, matching string with regex is case-sensitive.

By adding the Case Insensitive flag to the Regex pattern, it can match the string with Case Insensitive

// regex Pattern with global and Case Insensitive flag
const pattern = /work/gi

// string to be tested against the pattern
const text = 'Get the Work Done and the work will pay off.'

// Returns Array of strings matching the pattern
console.log('[Exec Global & Case Insensitive Flag] - ', text.match(pattern))

// output
[Exec Global & Case Insensitive Flag] - [ 'Work', 'work' ]

m - Multi Line

When you try to match a pattern with a multi-line string, By default the match is found only in the first line even though we have a match in the second line

By adding the Multi Line flag to the Regex pattern, it can find the matches in multiple lines.

// regex Pattern with global and Multi-Line flag
const pattern = /^The/gm // starts with "The"

// string to be tested against the pattern
const text = `The the Work Done.
The work will pay off.`

// Returns Array of strings matching the pattern
console.log('[Exec Global & Multi Line Flag] - ', text.match(pattern))

// output
[Exec Global & New Line Flag] - [ 'The', 'The' ]

Thanks For Reading!

Hope you have learned something new today 😊.

Follow me to get notified of all upcoming posts.

Follow and connect with me on Twitter, Instagram, Email and LinkedIn for more interesting stuff like this.

Nest JS Tutorial #3 - Query & Route Params

Nandhakumar — Thu, 15 Dec 2022 05:35:08 +0000

Hi There! 👋

In this post, you will learn what is route & query param, when to use it and how to use it in Nest.JS

This post is a part Nest JS tutorial series, Do check out my other post on nest js to know more about it.

Originally Posted On - https://www.nandhakumar.io/post/nest-js-tutorial-3-route-and-query-param

Let's Get Started Now! 🚀

Prerequisite

Javascript
Typescript (Optional)
Basics Of OOPS
Postman (For API Testing)
Code Editor
Node.JS

Understanding Route and Query param

Route Param

Route Params are used to get specific data.

Example Scenario,
Let's say you want to get a user detail by ID, so ID can be will be passed as a route param like this 👇



"http://api.com/5689"

Here, 5689 is the ID of the user

Query Param

Query params are used when you want to filter, sort and paginate the data.

Example Scenario,
Let's say you want to get a list of users that matches a name. so, here name can be passed as a query param like this 👇



"http://api.com?name=tamilan"

Here, the name tamilan is passed as a query param. To get results matching the name.

You can also pass multiple query param.

In addition to filter by name, we can also add a sort query with the existing name query like this 👇



http://api.com?name=tamilan&sort=name

That's a short brief on route and query param!

Now let's see how to capture these query and route param in nest js.

Using Route and Query Param in Nest JS

To get started, Create a new nest project using nest cli. If you are not sure how to create a new project, check out this post

I have created a new nest project, with its starter code.

Here's the project structure I have now,

Requirement

We need two routes,

/user
- It should be a GET request
- It should return all the users when there is no query param
- It should return all the users that match the name, when the name query param is passed
/user/:id
- It should be a GET request
- It should return the user that matches the id passed as a route param

Let's do the implementation step by step,

Step 1:

Add some mock user data to the service file.

As we are using typescript it would be nice to add interface for the user.



// app.service.ts

import { Injectable } from '@nestjs/common';

// user interface
export interface IUser {
  id: number;
  name: string;
  age: number;
}

@Injectable()
export class AppService {
  // list of users
  private users: IUser[] = [
    {
      id: 1,
      name: 'Tamilan',
      age: 23,
    },
    {
      id: 1,
      name: 'Nandha',
      age: 24,
    },
    {
      id: 1,
      name: 'Nandha Kumar',
      age: 24,
    },
  ];
}

Step 2:

Create a method findUsersByName that returns users matching the 'name' query or all the users when there is no name query.

Add this method to the same service file



  findUsersByName(nameToBeMatched: string): IUser[] {
    return nameToBeMatched
      ? this.users.filter((user) =>
          // return users with name matching
          // 'name' query param
          user.name.toLowerCase().includes(nameToBeMatched),
        )
      : // returns all the users if the
        // 'name' query param is 'null' or ''
        this.users;
  }

Step 3:

Create another method findUserById that returns a user matching the 'id' route param

Add this method to the same service file



  findUserById(id: string): IUser {
    // return user with id matching 'id' route param
    // By Default when you get value from query or route
    // param it will be string, But in our case user id is of
    // type number. So we are making a type conversion for id
    return this.users.find((user) => user.id === Number(id));
  }

Step 3:

Update the base route of the controller to /user



// app.controller.ts
import { Controller, Get} from '@nestjs/common';
import { AppService, IUser } from './app.service';

@Controller('/user') // update the base route to '/user'
export class AppController {
  constructor(private readonly appService: AppService) {}

}

Step 4:

Implementing the first requirement.

Create a method getUsers with @Get() decorator.

And it should take @Query() decorator as its argument. So that whenever we add the query to the URL, those params will be captured by this argument.

In the implementation pass the query params to the service method(findUsersByName) that we have already implemented in the service

Finally, return the data



import { Controller, Get} from '@nestjs/common';
import { AppService, IUser } from './app.service';

@Controller('/user')
export class AppController {
  constructor(private readonly appService: AppService) {}

  @Get()
  getUsers(@Query() params: any): IUser[] {
    return this.appService.findUsersByName(params.name);
  }
}

Pro Tip

If you want a specific property from the query, you can specify the property name in the @Query() decorator
like this 👇



 @Get()
  getUsers(@Query('name') name: string): IUser[] {
    return this.appService.findUsersByName(name);
  }

Step 4:

Implementing the second requirement.

Create a method getUserById with @Get(':id') decorator.

Note:
Here we have defined ':id' route param in the @Get()
decorator.

And it should take @Param() decorator as its argument. So that the route param will be captured by this argument.

In the implementation pass the query params to the service method(findUserById) that we have already implemented in the service

Finally, return the data



// app.controller.ts
import { Controller, Get, Param, Query } from '@nestjs/common';
import { AppService, IUser } from './app.service';

@Controller('/user')
export class AppController {
  constructor(private readonly appService: AppService) {}

  @Get()
  getUsers(@Query() params: any): IUser[] {
    return this.appService.findUsersByName(params.name);
  }

  @Get(':id')
  getUserById(@Param() params: any): IUser {
    return this.appService.findUserById(params.id);
  }
}

Pro Tip

Similar to the @Query() decorator you can specify the property id in the @Param() decorator
like this 👇



 @Get()
  getUsers(@Param('id') id: string): IUser {
    return this.appService.findUsersByName(id);
  }

That's it!

As per the requirement, you have implemented the API.

Testing

Let's test the implementation now!

Start the server by executing



npm start:dev

Open the server URL http://localhost:3000 in Postman or any API Testing Tool

Test Case 1:

Getting all Users, without query params

And we got all the users.

✅ Test Case Passed!

Test Case 2:

Getting all Users, with name query param

And we got all the users matching the name passed in the query param.

✅ Test Case Passed!

Test Case 3:

Getting User by id, with id route param

And we got the user with the id we passed in the route

✅ Test Case Passed!

Try implementing different scenarios with multiple Query and Route params.

Congratulation! 👏

You have successfully implemented APIs with Query and Route param in Nest.JS.

Get the completed source code from here.

Thanks For Reading!

Hope you have learned something new today 😊.

Follow me to get notified of all upcoming posts on this series.

Follow and connect with me on Twitter, Instagram, Email and LinkedIn for more interesting stuff like this.

Nest JS Tutorial #2: HTTP Request & Data Validation

Nandhakumar — Fri, 02 Dec 2022 04:49:03 +0000

Hi There! 👋

In this post, you will learn how to validate request data in Nest JS

If you don't know what is Nest JS, If you don't know what is Nest JS, Check out my previous post

Originally Posted On - https://www.nandhakumar.io/post/nest-js-tutorial-2-http-request-data-validation

Prerequisite

Javascript
Typescript (Optional)
Basics Of OOPS
Postman (For API Testing)
Code Editor
Node.JS

What is an HTTP Request?

HTTP Request is sent from the client machine(web browser or any other client application) to access or get information from the server.

These Requests are sent with the help of URLs like this 👇

https://yourapp.com/api/v1/users

Three parts of HTTP Request

Methods - Defines the type of the request

Headers - Will have the information about the request and sender(client), you can add custom parameters as well. Usually, Authorization Cookies will be attached to Headers.

Body - Will have the requested data. For example, which registering as a new user, you have to pass user information as request data to store it in the server

HTTP Request Methods

Methods	Purpose
GET	To get Data
POST	To create or add data
PATCH	To update data partially
PUT	To update the entire data
DELETE	To delete data

That's a short brief on HTTP Requests.

To know more about HTTP Request, Click Here!

Why Request Data Validation?

When the HTTP Request reaches the server, Getting the Body data directly without validating is not good. Some of you may get malicious data. So, you have to validate your Body data always.

Understanding Nest.JS Validation

Let's first understand how validation works behind the scene in Nest.JS

In Nest.JS, We have something called a validation pipe. Every time when a request body is passed through this pipe and validated. If there are any invalid data, it will throw an error.

Before moving further you need to understand what is DTO(Data Transfer Object)

DTO is a class where you will define the rules for validation. If you are not sure about this no worries, you'll understand this when implementing.

Two Parts Of Validation Pipe

Class Transformer

Class Transformer helps to transform your request body into a class instance of DTO and then the instance will be passed to class validation

Class Validator

Class Validator will validate the request body based on the rules defined in the DTO and throws an error if there are any invalid data

Now let's start the implementation for the example scenario given below 👇

Scenario: Need to add a new user and the user should have email, age, name, and country( Country is optional).

As per the scenario, it's clear that we need to add data to the server

So, it is an HTTP POST Method and we need to pass user data in the request body.

Hope you would have already created a Nest.JS Project, If not follow my previous tutorial to create one.

Let's do the implementation step by step,

Step 1:

Install class validator and class transformer.

npm i class-validator class-transformer -s

Step 2:

Generate User Controller.

nest g controller user

note: to execute nest commands you should have installed
nest cli globally

Step 3:

Generate User Module

nest g module user/user --flat

Note: As we have already created a user folder in Step 2,
To avoid creating additional folders --flag is used

Step 4:

Add User Controller to User Module

// user.module.ts
import { Module } from '@nestjs/common';
import { UserController } from './user.controller';
@Module({
  imports: [],
  providers: [],
  controllers: [UserController], // add user controller
})
export class UserModule {}

Step 5:

Add User Module to App Module

// app.module.ts
import { Module } from '@nestjs/common';
import { UserModule } from './user/user.module';

@Module({
  imports: [UserModule], // add user module
  controllers: [],
  providers: [],
})
export class AppModule {}

Step 6:

Create a dto folder under the user folder and create a file called user.dto.ts

Step 7:

Create UserDTO Class
Add the user properties to UserDTO as per the scenario

// user.dto.ts

export class UserDTO {

  email: string;

  age: string;

  name: number;

  country: number;
}

Step 8:

Nest.JS uses Typescript decorators extensively.

Note: Decorators are a simple function that helps to modify
the targeted value
Decorators are defined like @[decoratorname]()

Coming back to the UserDTO,

Class-Validator has a list of validation functions which can be used in the form of a decorator

Now, Let's try to add those validation decorators to the class properties

import { IsEmail, IsNumber, IsOptional, IsString } from 'class-validator';

export class UserDTO {
  @IsEmail()
  email: string;

  @IsNumber()
  age: string;

  @IsString()
  name: number;

  // add @IsOptional to make the country property optional
  @IsOptional() 
  @IsString()
  country: number;
}

Step 9:

create a controller to add a user
Add UserDTO as the type of the request body

import { Body, Controller, Post } from '@nestjs/common';

import { UserDTO } from './dto/user.dto';

@Controller('user')
export class UserController {
  @Post()
  async addUser(@Body() user: UserDTO) {
    return user;
  }
}

Note:
I have added @post Decorator to the function addUser as we > are dealing with Post HTTP Request
Also, the @body Decorator to get the request body

That's it we have added validation to the addUser request body

Testing

Let's test the implementation now!

Start the server by executing

npm start:dev

Open the server URL http://localhost:3000 in Postman or any API Testing Tool

Test Case 1:

Passing all the user properties with an invalid email

And the validation works!

Test Case 2:

Since the country property has been set to optional, Now let's try to send the request without the country property

Now we got success response, even without the country.

Try testing with different scenarios by passing invalid data.

Congratulation! 👏

You have successfully validated the request body in Nest.JS

Thanks For Reading!

Hope you have learned something new today 😊.

Follow me to get notified of all upcoming posts on this series.

Follow and connect with me on Twitter, Instagram, Email and LinkedIn for more interesting stuff like this.

Nest JS Tutorial #1: Create Your First API

Nandhakumar — Thu, 24 Nov 2022 11:25:06 +0000

Originally Posted On - https://www.nandhakumar.io/post/nest-js-series-create-your-first-api

Hi There! 👋

It's been a couple of months working with Nest.JS and I love the way the framework build to develop scalable server-side applications

I am still trying to learn more about Nest.JS, So thought of sharing my learning in the form of tutorial series from Beginner to Advanced.

Follow me to get notified of all upcoming posts on this series.

Let's Get Started Now! 🚀

Prerequisite

Javascript
Typescript (Optional)
Basics Of OOPS
Postman (For API Testing)
Code Editor
Node.JS

What is Nest.JS?

Nest.JS is a framework to build highly scalable Node.JS server-side applications. It comes with the full support of typescript(It also allows us to build the app with pure JS as well).

It combines OOP(Object Oriented Programming) and Functional Programming to write clean and reusable code.

If you have ever built a server-side application, you would have heard about Express.JS and Fastify libraries.

Under the hood, Nest.JS uses Express.JS as its default HTTP Server. If you prefer to use Fastify, you can switch easily (More about this on official docs)

That's a short brief on Nest.JS

Generating Nest.JS Project

Before generating the project, make sure you have installed the latest version of Node.JS on your system

I am using Node.JS Version v18.12.1

To generate a Nest.JS Project first, you need to install Nest Cli



npm i -g @nestjs/cli

Now generate a new Nest.JS project



npm i -g @nestjs/cli

It will ask for,

Project name (Give as you wish)
Which package manager (npm, yarn, pnpm) to use? (I choose yarn, you can choose as you wish)

Now open the project on your code editor

Understanding Nest.JS Project Structure

node_modules - Contains all the libraries that are required for your project.
src - Contains your application source code, Under this directory Nest.JS has generated a starter code. Let's explore what they are,
- app.controller.spec.ts - Contains unit test cases for each controller implementation
- app.controller.ts - Contains the implementation of the API
- app.service.ts - Contains business logic which will be used in the controller
- app.module.ts - Contains Imports, Exports and DI(Dependency Injection). More on this later...
- main.ts - Contains implementation to bootstrap the application. This is the starting point of your application
test - Contains E2E test case implementations
.eslintrc.js - Contains lint configuration that helps to identify incorrect syntax, typescript standards and more ...
.gitignore - Contains files & directories to ignore when pushing the code to GitHub
.prettierrc - Contains prettier config to format your code
nest-cli.json - Basic Nest.JS Configuration
package.json - Contains dependency, scripts, project version and more required for your project
README.md - Contains documentation of your project
tsconfig.json - Contains typescript configurations

Basic Understanding Of API(You can skip this section if you know what is an API)

If you are a complete beginner in API development.

In simple terms,
Let's say you have a raw cloth material and you want it to be stitched.

So you will go to a tailor and give your cloth to stitch. You will also give some instructions on how the design should be.

Considering the above example, In the computer world frontend application(Apps with user interfaces) will request certain data with some parameters(raw cloth material and instruction to design the cloth) to the server(tailor) in return server will send you the requested data as a response(stitched cloth).

These requests are sent using an API URL.

An API(Application programming interface) will look like this 👇



// Example API
"https://google.com/api/users" // returns a list of users

If you are still confused. Don't worry, going forward you will figure it out.

Creating Your First API

Let's start the server first

Open your terminal

Navigate to your project directory

And Run



yarn start:dev

Replace yarn with npm or pnpm if you have configured those package managers initially

Now your server should have been started on



http://localhost:3000

To test the starter code generated by Nest.JS

Open Postman(tool to test the API)

Choose GET Method and Add the API URL(http://localhost:3000) then hit Send

You will see the response as "Hello World!"

Great!

You have executed your first API.

Now let's try to customise this API in a way to get a list of user names

Step 1

Open app.controller.ts

Add /user route to @Controller() decorator
Change the function name under @Get() decorator to getUsers
Change return type from string to string[]
Change the App Service method name to getUsers

Code Snippet 👇



import { Controller, Get } from '@nestjs/common';
import { AppService } from './app.service';

@Controller('/users') // Add '/user' route
export class AppController {
  constructor(private readonly appService: AppService) {}

  // Change the function name to getUsers
  @Get()
  getUsers(): string[] { // Change return type to string[](stirng Array) 
     // Change the service method name to getUsers
     return this.appService.getUsers(); 
  }
}

Step 2

Open app.service.ts

Change the function name getHello() inside AppService Class to getUsers()
Change return type from string to string[]
Change the return value from 'Hello World!' to ['userOne','userTwo']

Code Snippet 👇



import { Injectable } from '@nestjs/common';

@Injectable()
export class AppService {
  // Change function name to getUsers
  getUsers(): string[] { // Change return type to string[](stirng Array) 
    return ['userOne', 'userTwo'];
  }
}

That's it your user API is ready now.

Let's test it in Postman

Open Postman
Choose GET Method and Add the API URL(http://localhost:3000/users) then hit Send

If you got a response as a list of user names.

Congratulation! 👏

You have created your first API in Nest.JS

Thanks For Reading!

Hope you have learned something new today 😊.

Follow me to get notified of all upcoming posts on this series.

Follow and connect with me on Twitter, Instagram, Email and LinkedIn for more interesting stuff like this.

Step By Step Guide To Dockerize React App Created Using Vite

Nandhakumar — Fri, 18 Nov 2022 11:04:21 +0000

Originally Posted On - https://www.nandhakumar.io/post/step-by-step-guide-to-dockerize-vite-react-app-in-dev-environment

Hey Folks!

In this post, you'll learn how to dockerize your react app created using the Vite tool for the development environment

Prerequisites

Basic knowledge of React
Basic understanding of what is docker (I'll give a brief on it as well)
Docker on your local system

What is Docker?

Docker is a tool that helps to create a common environment(called as Container in the docker world) for development, testing and production.

Let's say you are developing a react app on your local environment(development)

Now, once you are done with the development you need to hand over the source code to the testing team and if the testing team doesn't have the same environment as your local environment there might be some issues which would be a blocker for testing.

Similar scenario for production as well.

So How can we ship the environment to all the places where ever you run the application?

And here comes Docker, It will create a virtual environment for your app to run and you can create and use the environment where ever you need to run your app.

Awesome right?

That's a short brief on Docker.

If you want to know more about it check out the Official Docker Site

Now Let's see how to Dockerize your React app.

Step 1: Create React App Using Vite (Skip this step if you already have a react app)



npm create vite@latest

You'll be asked for

App Name
Which Framework to use like React, Angular, or Vue? Choose React
Then, Typescript or Javascript. Choose as you wish

Now switch to the project directory



cd [your project name]

Step 2: Update `vite.config` File

This step is required to map the port between Docker container and your React app

Now replace this code snippet in vite.config



export default defineConfig({
  plugins: [react()],
})



export default defineConfig({
  plugins: [react()],
  server: {
    watch: {
      usePolling: true,
    },
    host: true, // needed for the Docker Container port mapping to work
    strictPort: true,
    port: 5173, // you can replace this port with any port
  }

Step 3: Create a Dockerfile

Create a file called Dockerfile in the root of your project directory like this 👇

Step 4: Add Commands to Dockerfile

Copy these commands to your Dockerfile



FROM node

WORKDIR /app

COPY package.json .
RUN npm i

COPY . .

## EXPOSE [Port you mentioned in the vite.config file]

EXPOSE 5173

CMD ["npm", "run", "dev"]

If you don't know what are these commands, read the explanation 👇

FROM node - Will create a node environment in the container
WORKDIR /app - Will create a directory app and switch to that directory
COPY package.json . - Copies package.json file to /app directory
RUN npm i - Runs npm install to create node_modules for your app
COPY . . - Copies the source code to /app directory
EXPOSE 5173 - Exposes the port to access the app from outside the container i.e from the browser
CMD ["npm", "run", "dev"] - Executes npm run dev to start the server

Step 5: Build the Dockerfile

In the terminal navigate to your project directory, then execute

!! Remove the [ ] when executing



docker build -t [any name] .

Flag used in the command

-t - To tag the container (This will be your container name)

After the build completion, a docker image will be created.

Docker Image is a template to run the container.

To check your Docker Image, execute



docker images

It will show the list of images available on your system

Check whether the name of the image you have given when running the docker build command is available in the list.

Step 6: Run the Docker Container

Execute this command in the terminal 👇

!! Remove the [ ] when executing



docker run -d --rm -p 5173:5173 --name [name of the container] [your docker image name]

Flag used in the command

-d - To run the container in the background (Detach Mode )
--rm - To delete the container, when you stop the container
-p - Port Mapping between container and outside world.
5173:5173 - [Port access from Browser]: [Port exposed from the container]

To check whether your docker container is running or not, execute



docker ps

It will show the list of containers running on your system

Check whether the name of the container you have given when running the docker run command is available in the list.

Step 7: Open the App in the Browser

Open the Browser and access http://localhost:[Port you mentioned in the docker run command] as per the configuration we did so far it should be http://localhost:5173

Thanks For Reading!

Hope you have learned something new today 😊.

Follow and connect with me on Twitter, Instagram, Email and LinkedIn for more interesting stuff like this.

My Personal Blog nandhakumar.io

Cheers ✌️

How to get last element of an array or string using JS ES13 Feature

Nandhakumar — Mon, 05 Sep 2022 19:52:58 +0000

Javascript ES13 has released in June 2022 and it has pretty cool new features one of them is at() method that can be used with strings and arrays.

So, before ES13 if you want to find the last element of an array or string.

You need to subtract 1 from the length of the array and string and the calculated value will be passed within [] to get the last element like this 👇

But now, after ES13 you can use at() method with negative indexes to get the elements in reverse order of a string or array like this 👇

Simple right?

Thanks for reading this article.

If you find this post helpful

Follow me on Twitter and Instagram to show your support

Cheers ✌️

DEV Community: Nandhakumar

How To Add Custom Font in Flutter

Download your fonts

Add Fonts To Your Project

Declare Fonts In Pubspec.yml

Create a Font Family Typography Class

Using Font Family From The Typography Class

Final Result

Conclusion

Thanks For Reading!

Regex #1: Understanding Regex, Regex-Based String Methods and Regex Flags

Why Regex?

Defining a Regex Pattern?

Two Ways to test Regex Pattern

Using Regex Methods

Using String Methods

Regex Flags

Thanks For Reading!

Nest JS Tutorial #3 - Query & Route Params

Prerequisite

Understanding Route and Query param

Route Param

Query Param

Using Route and Query Param in Nest JS

Requirement

Step 1:

Step 2:

Step 3:

Step 3:

Step 4:

Step 4:

Testing

Thanks For Reading!

Nest JS Tutorial #2: HTTP Request & Data Validation

Prerequisite

What is an HTTP Request?

Three parts of HTTP Request

HTTP Request Methods

Why Request Data Validation?

Understanding Nest.JS Validation

Two Parts Of Validation Pipe

Step 1:

Step 2:

Step 3:

Step 4:

Step 5:

Step 6:

Step 7:

Step 8:

Step 9:

Testing

Thanks For Reading!

Nest JS Tutorial #1: Create Your First API

Prerequisite

What is Nest.JS?

Generating Nest.JS Project

Understanding Nest.JS Project Structure

Basic Understanding Of API(You can skip this section if you know what is an API)

Creating Your First API

Step 1

Step 2

Thanks For Reading!

Step By Step Guide To Dockerize React App Created Using Vite

Prerequisites

What is Docker?

Step 1: Create React App Using Vite (Skip this step if you already have a react app)

Step 2: Update vite.config File

Step 3: Create a Dockerfile

Step 4: Add Commands to Dockerfile

Step 5: Build the Dockerfile

Step 6: Run the Docker Container

Step 7: Open the App in the Browser

Thanks For Reading!

How to get last element of an array or string using JS ES13 Feature

Step 2: Update `vite.config` File