


I used Moment and Dayjs library a lot for basic date calculations like adding, subtracting, and finding the difference between dates.

But, Later I found that JS itself has a good number of Date time methods to solve simple Date time use cases

Let's see what are those methods and how we can use them,

***Note: For more complex DateTime calculations, it is better to use the libraries. We don't want to waste time writing complex logic from scratch.***

## Manipulating Date time

### Hours

Adding & Subtracting Hours

<CodeSnippet language="ts">
{`
const currentTime = new Date()

// currentTime
// Thu May 11 2023 06:44:51 GMT+0530 (India Standard Time)

// Adding 5 Hours to the time
currentTime.setHours(currentTime.getHours() + 5) // Thu May 11 2023 11:44:51 GMT+0530 (India Standard Time)

// Subtracting 5 Hours to the time
currentTime.setHours(currentTime.getHours() - 5) // Thu May 11 2023 06:44:51 GMT+0530 (India Standard Time)
`}
</CodeSnippet>

### Minutes

Adding & Subtracting Minutes

<CodeSnippet language="ts">
{`
const currentTime = new Date()

// currentTime
// Thu May 11 2023 11:44:51 GMT+0530 (India Standard Time)

// Adding 5 Minutes to the time
currentTime.setHours(currentTime.getHours() + 5) // Thu May 11 2023 11:49:51 GMT+0530 (India Standard Time)

// Subtracting 5 Minutes to the time
currentTime.setHours(currentTime.getHours() - 5) // Thu May 11 2023 11:44:51 GMT+0530 (India Standard Time)
`}
</CodeSnippet>

### Seconds

Adding & Subtracting Seconds

<CodeSnippet language="ts">
{`
const currentTime = new Date()

// currentTime
// Thu May 11 2023 11:44:51 GMT+0530 (India Standard Time)

// Adding 5 Seconds to the time
currentTime.setSeconds(currentTime.getSeconds() + 5) // Thu May 11 2023 11:49:56 GMT+0530 (India Standard Time)

// Subtracting 5 Seconds to the time
currentTime.setSeconds(currentTime.getSeconds() - 5) // Thu May 11 2023 11:44:51 GMT+0530 (India Standard Time)
`}
</CodeSnippet>

You can also try manipulating year, milliseconds, timestamps etc.. Take it as an exercise and try it by yourself.

## Finding Difference

Finding differences between months and years are bit tricky so, let's focus on finding the difference between days, hours, seconds, and even milliseconds.

So first we need to define the base value of days, hours, seconds, and milliseconds

<CodeSnippet language="ts">
{`
const milliseconds = 1; 
const second = 1000; // 1000 milliseconds = 1 second
const minute = second * 60; // 60 seconds = 1 minute
const hour = minute * 60; // 60 minute =  1 hour
const day = hour * 24; // 24 hour = 1 day
`}
</CodeSnippet>

since we have the base value now, finding the difference will be easy

- Define two dates to find the difference,
<CodeSnippet language="ts">
{`
const dateOne = new Date(2023, 5, 1);  // June 1, 2023
const dateTwo = new Date(2023, 5, 10); // June 10, 2023
`}
</CodeSnippet>

- Find the timestamp difference between the two dates
<CodeSnippet language="ts">
{`

const timeStampDiff = Math.abs(dateOne.getTime() - dateTwo.getTime()); // 777600000
`}
</CodeSnippet>

> Why we are using `Math.abs()`?
**`Math.abs()`** is used to ensure that the result is always a positive number, regardless of the order of the dates. It usually doesn't make sense to have a negative value when finding difference
> 
    
- Now divide the difference by the base value that we defined earlier
<CodeSnippet language="ts">
{`
const difference =  timeStampDiff / day; // 9
`}
</CodeSnippet>

since we divided by the day's base value we got the day difference between the two dates

which is `9`, similarly you can divide timeStampDiff by other base values to get the appropriate result.    

## Finding Difference between months

### Months

Finding the Difference between months has two possible solutions,

**Solution 1 (Not the best solution)**

This is straight forward solution, Get the month of two dates and get subtract to get the difference
<CodeSnippet language="ts">
{`
const dateOne = new Date(2023, 5, 1);  // June 1, 2023
const dateTwo = new Date(2023, 9, 10); // Oct 10, 2023

const difference = Math.abs(dateOne.getMonth() - dateTwo.getMonth()) // 4
`}
</CodeSnippet>

Even though this solution is working fine. There is an issue with this solution. If the year of the two dates is different the result(the difference) would be incorrect.

For example, for **`dateOne = new Date(2022, 11, 1)`** (December 2022) and **`dateTwo = new Date(2023, 0, 1)`** (January 2023), the result would be **`Math.abs(0 - 11) = 11`**, which is incorrect as the difference is actually 1 month.

**Solution 2**

This is a bit tricky, But I'll explain to you step by step

- Let’s define the date first
<CodeSnippet language="ts">
{`
const dateOne = new Date(2022, 5, 1);  // June 1, 2022
const dateTwo = new Date(2023, 9, 10); // Oct 10, 2023
`}
</CodeSnippet>

  ***Note: In Js Dates, months start from 0 i.e (Jan → 0, Feb → 1)***

- Find the year difference
<CodeSnippet language="ts">
{`
const yearDifference = dateTwo.getFullYear() - dateOne.getFullYear(); // 1
`}
</CodeSnippet>

- Find the month difference
<CodeSnippet language="ts">
{`
const monthDifference = dateTwo.getMonth() - dateOne.getMonth(); // 4
`}
</CodeSnippet>

- Calculate total no. of months of the `yearDifference`
<CodeSnippet language="ts">
{`
let months = yearDifference * 12 // 12
`}
</CodeSnippet>

- Now add the `monthDifference` to `months`
<CodeSnippet language="ts">
{`
months += monthDifference; // 16
`}
</CodeSnippet>


That’s it we have found the difference. 

Also you can add `Math.abs(months)` as one other step, so you can avoid getting negative values

## Finding Difference between years

This also a bit tricky, but not like months

- Let’s First Define the dates
<CodeSnippet language="ts">
{`
const dateOne = new Date(2022, 5, 1);  // June 1, 2022
const dateTwo = new Date(2023, 9, 10); // Oct 10, 2023
`}
</CodeSnippet>


- Find the difference in year
<CodeSnippet language="ts">
{`
let difference = dateTwo.getFullYear() - dateOne.getFullYear();
`}
</CodeSnippet>


- You might think just by subtracting two year can get the expected result. But, there are few scenarios to be handled.
Example:
If you have dates like Jan 1 2023 and Dec 31 2023, here the year is same but the diff is 1 year.
and in another case, if the dates are Dec 31 2023 and Jan 1 2024, here the year is different but the actual difference is 1 day.

You get the point right?

So to handle this, you can add few conditions 
<CodeSnippet language="ts">
{`
if (dateTwo.getMonth() < dateOne.getMonth() || 
   (dateTwo.getMonth() == dateOne.getMonth() && 
    dateTwo.getDate() < dateOne.getDate())) {
    difference--;
}

difference = Math.abs(difference)
`}
</CodeSnippet>

Let’s break down the conditions

- `dateTwo.getMonth() < dateOne.getMonth()` -
  This means that in the current year of `dateTwo`, `dateTwo` has not yet reached the month of `dateOne`.
  For example, if `dateOne` is June 10, 2023 and `dateTwo` is March 15, 2024, even though `dateTwo`'s year is 2024, it hasn't yet reached the month of June,
  so we should consider the year difference as 0,<br/> not 1.
- `(date2.getMonth() == date1.getMonth() && date2.getDate() < date1.getDate())` -
  This means that even though `dateTwo` is in the same month as `dateOne`, it hasn't yet reached the day of `dateOne` in its current year.
  For example, if `dateOne` is June 10, 2023 and `dateTwo` is June 5, 2024, even though `dateTwo`'s year is 2024 and the month is June, it hasn't yet reached the 10th of June, so we should consider the year difference as 0, not 1.


In both of these conditions, we decrease `difference` by one (`difference**--**`) to accurately reflect the year difference considering the month and day, not just the year.

Finally we use `Math.abs()` as we don’t want negative values

## **Conclusion**

In this post you learned how to manipulate date and time yourself without using libraries. However the Date time libraries are always a time saver. When you have more complex use case to solve that is based on Date time, You can use these libraries.

If you are going to perform only simple calculation utilise existing Date time module in node.js.

Again this is my thought, based on your requirement you can decide whether to use libraries or not.

Stop Using Date Time Libraries like Moment, Dayjs, etc …


Hi There! 👋

If you are using Quill Editor with Next.js, Initialising Quill Editor is a bit tricky.

Sometimes in the dev environment, you might not see any issues, but when building your app there might be an issue called `document undefined` 

Which will block you from deploying your app to the production 

Before knowing the solution, Let’s understand why we are getting this error.

Quill.js Runs in the browser environment and because of that, it relies on the browser’s `document` object. (because of this you are getting document undefined when building your app)

Possible Solutions,
- Make sure you use dynamic imports to only load and render Quill.js on the client side.
  <CodeSnippet language="ts">
  {`const ReactQuill = dynamic(import('react-quill'), {
  ssr: false,
  loading: () => <p>Loading ...</p>,
  })`}
  </CodeSnippet>
  - `ssr: false` to render Quill Editor only on client side
  - `loading` to show a template component or html when loading Quill Editor

- Quill.js allow you to overwrite and add modules to editor, in my case I was trying to add a list of font sizes.
And this is how you need to overwrite font size module
  <CodeSnippet language="ts">
  {`const fontSizeArr = ['8','9','10','12']
  const Size = Quill.import('attributors/style/size');
  Size.whitelist = fontSizeArr;
  Quill.register(Size, true);`}
  </CodeSnippet>
  - `fontSizeArr` list of font size to overwrite existing font sizes
  - `Quill.import` is to import module from Quill's internal modules.
  - `Size.whitelist` allows the users to select and use the new font sizes
  - `Quill.register`  takes two arguments
    - `Size` new module to be overwritten on Quill Editor
    - `true` tells Quill to overwrite the existing "Size" module with the customized version that you just configured

  You might think why i am explaining Quill Modules to fix the error Document Undefined , because most of the time you face this error when overwriting or adding module to Quill.js
  
  And to resolve this error,
  
  As I said earlier, Quill relies on the browser’s `document` object.

  In React, only after mounting the component you can use `document` or `window` object.

  So, It is always best to initialise `Quill` and its `modules` when the `component mounts`

  And this can be done by initializing Quill and its modules inside useEffect

  <CodeSnippet language="ts">
  {`useEffect(() => {
    if (typeof window !== 'undefined') {
      const Quill = require('react-quill').Quill
      const Size = Quill.import('attributors/style/size')
      Size.whitelist = fontSizeArr
      Quill.register(Size, true)
    }
  }, [])`}
  </CodeSnippet>

  By initializing `Quill` and its `module` on component mounting, you can resolve this issue.

Hope this post resolves your issue.

If you still face this issue after following all the best practice I have mentioned when using Quill.js

DM me on twitter, Let’s try to figure it out.

Resolving "Document Undefined" error when building your Next.js app with Quill Editor

Quill + Next.js Failed to collect page data … Document Undefined


Hi There! 👋

If you have updated Xcode from ****14.2**** to ****14.3,**** there is an issue in archiving & publishing your app to App Store

After researching this issue, I found a workaround in Apple’s Developer forum 

Forum Ref - [https://developer.apple.com/forums/thread/725230](https://developer.apple.com/forums/thread/725230)

And the solution is simple,

Open `[Your App Name]/ios/App/Pods/Target Support Files/Pods-[Your App]/Pods-[Your App]-frameworks.sh`

Replace  `source="$(readlink "${source}")"` with `source="$(readlink -f "${source}")"`

And people say that the issue is due to CocoaPods.

Hope this helps you to resolve the issue.

Learn how to resolve "PhaseScriptExecution failed with a nonzero exit code" error when publishing your ios app

PhaseScriptExecution failed with a nonzero exit code


Hi There! 👋

In this post you'll learn different methods to use Custom Colors in Flutter.

# Using Hexadecimal Values

Defining custom colors using hexadecimal values is a popular way to use custom colors in Flutter. 

**To define hexadecimal color,**
- Replace the `#` in the Hexcode with `0xFF`
- Pass it to Color class and you are ready to use Hex color code

**Example,**

<CodeSnippet language="dart">
  {`const Color myColor = Color(0xFF00FF00); // Using #00FF00 Hex Color`}
</CodeSnippet>

# Using Named Colors

Named colors are defined in your material theme and can be used throughout your application.

**To define named colors,**
- Create named colors using `ThemeData` constructor.
- Add `ThemeData` to `MaterialApp` constructor.
- Use the color using theme context anywhere in the application

**Example,**

<CodeSnippet language="dart">
  {`
  MaterialApp(
  theme: ThemeData(
    primaryColor: Colors.red, // Define a named color in the app's theme
    ...
    )
  ...
  )

  Container(
    color: Theme.of(context).primaryColor, // Use the named color in a widget
    ...
  )
  `}
</CodeSnippet>

# Using color schemes

You can define a color scheme for your app and use it throughout your app. A color scheme is a set of colors used to define the colors with any custom color names and it can be used throughout the application.

**To define color schemes,**
- Pass different colors to `ColorScheme` constructor with custom name such as the primary color, accent color, and background color. 
- Use the colors using the color scheme

**Example,**

<CodeSnippet language="dart">
  {`
final myColorScheme = ColorScheme(
  primary: Color(0xFF00FF00),
  secondary: Color(0xFF0000FF),
  background: Color(0xFFFFFFFF),
  ...
);
...
Container(
  color: myColorScheme.primary, // Use a color from the color scheme in a widget
  ...
)
  `}
</CodeSnippet>

# Using RGBA Colors

RGBA colors are defined by specifying the red, green, blue, and alpha values. The alpha value defines the transparency of the color. You can create an RGBA color by using the `Color.fromRGBO()` constructor.

**Example,**

<CodeSnippet language="dart">
  {`Color myColor = Color.fromRGBO(255, 0, 0, 0.5); // Red color with 50% opacity`}
</CodeSnippet>

`Alpha` can be have the value from `0 - 1.0` and `(R, G, B)` can have the value from `0 to 255`

# Conclusion

In this post, we explored the different ways to use custom colors in Flutter. We covered using hexadecimal values, named colors, color schemes, and RGBA colors. Each of these methods has its advantages, and the choice depends on the specific requirements of your application. By using custom colors, you can create an app that stands out and has a unique look and feel.


Discover different methods for using custom colors in Flutter with this comprehensive guide. Learn how to define colors using hexadecimal values, named colors, and RGBA colors. Enhance the look and feel of your app with custom colors in Flutter.

Use Custom Colors in Flutter


Hi There! 👋

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

<Img
  alt="Project Structure"
  src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0gsy6wt967hpode31zf5.png"
/>

# Declare Fonts In Pubspec.yml

<CodeSnippet language="dart">
  {`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`}
</CodeSnippet>


# 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

<CodeSnippet language="dart">
  {`// typography.dart

import 'package:flutter/material.dart';

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);
}`}
</CodeSnippet>

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

<CodeSnippet language="bash">{`
Text('This is a Semi Bold Typo',
                  textAlign: TextAlign.center,
                  style: Typogaphy.SemiBold.copyWith(
                    color: Colors.black,
                    fontSize: 40,
                  ))`}</CodeSnippet>

Here's my main.dart file looks like

<CodeSnippet language="dart">
  {`// main.dart

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,
                  ))
            ],
          ),
        ),
      ),
    );
  }
}`}
</CodeSnippet>

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

## Final Result

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vsthe8yb19nmidaj5zgk.png)

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


Learn how to add custom fonts to your Flutter app with this step-by-step guide. Enhance the design and style of your app by incorporating unique fonts that truly represent your brand. Start creating a stunning user experience today

Add Custom Font in Flutter


Hi There! 👋

Usually, when you are working on a project you are not going to write code for all the features you are developing, sometime you might use third-party tools or services like AWS, SendGrid, Google Cloud, etc…

And these platforms will provide some secret or API keys to access the service and If you hardcode these keys on your code, there is a chance that anyone can misuse it.

So as a best practice, you should never hardcode these keys in code or push these keys to GitHub or any cloud repositories.

Instead, store these keys in the environment file and remember you shouldn't push this file to the repository.

In Node.js applications, it's common to use .env files, holding key-value pairs where each key represents a particular value.

Before we get started with the implementation. Make sure you have a Nest Js project with these dependencies

<CodeSnippet language="bash">
  {`# yarn
yarn add @nestjs/config class-validator class-transformer

# npm
npm i @nestjs/config class-validator class-transformer -s`}
</CodeSnippet>

# Store Environment Variables

Create a file `.env` at the root level of the project

<Img
  src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xyzlqiei2aa8xa6jqn4j.png"
  alt="Nest JS Project Structure"
/>

Add your secret keys to the `.env` file

<CodeSnippet language="bash">
  {`# .env
SECRET_KEY="This is a Secret Key"`}
</CodeSnippet>

Great! You have created your environment variable.

To avoid pushing the `.env` file to the repository. Add `.env` to `.gitignore` file

<Img
  src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jd7u8b9krpani8eso07o.png"
  alt=".gitignore"
/>

# Setting Up Nest Config Module

If you haven't installed the dependency that I mentioned at the begining of this tutorial. please install.

Once Installed

Import ConfigModule in `app.module.ts`

<CodeSnippet language="ts">
  {`// App.module.ts

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

@Module({
  imports: [ConfigModule.forRoot()], // Import ConfigModule
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}`}
</CodeSnippet>

The `forRoot()` method registers the `ConfigService` provider which provides a `get()`  method to read the environment variables.

Since `@nestjs/config` uses `dotenv` library under the hood, by default `forRoot()`

the method will search for `.env` in the root of the project.

If you have named your environment file with a different name like `.dev.env` then you need to pass the file name to the `forRoot()` method


<CodeSnippet language="ts">
  {`ConfigModule.forRoot({
  envFilePath: '.dev.env',
})`}
</CodeSnippet>

> **Pro Tip**
> If you want to use ConfigService in other modules you have to import ConfigModule again, To avoid importing in multiple modules and to globalise ConfigModule  you can set isGlobal to true

<CodeSnippet language="ts">
  {`ConfigModule.forRoot({
  envFilePath: '.dev.env',
  isGlobal: true
})`}
</CodeSnippet>

# Reading Environment Variables Using ConfigService

To read environment variable value, we need to inject `ConfigService` which is already registered by `ConfigModule` that we imported in the `app.module.ts`

In my project, I want to read environment variable in the` app.service.ts` file, So injecting `ConfigService`  in it. You can inject where ever you need.

<CodeSnippet language="ts">
  {`// app.service.ts

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

@Injectable()
export class AppService {
  constructor(private readonly configService: ConfigService) {}

  getSecretKey(): string {
    return this.configService.get('SECRET_KEY'); // read environment variable
  }
}`}
</CodeSnippet>

Use `get()` and pass the variable name that you want to read.

# Validating Environment Variables

`ConfigModule` provides an additional option to validate the environment variables by passing custom validation functions.

**Why validation is required?**

If you are working on a team and any developer miss any variable in the `.env` file, that might break the application.

Make sure you have installed the required dependencies `class-validator` and `class-transformer`

Create a file `environment.validation.ts`

Add a class `EnvironmentVariables` with all the variables that you have in the` .env` file

<CodeSnippet language="ts">
  {`// environment.validation.ts

import { IsString } from 'class-validator';

class EnvironmentVariables {
  @IsString({ message: 'Invalid SECRET_KEY' })
  SECRET_KEY: string;
}`}
</CodeSnippet>

Now create the validation function

<CodeSnippet language="ts">
  {`// environment.validation.ts

export const validate = (config: Record<string, unknown>) => {
  
  // 'plainToClass' to converts plain object into Class
  const validatedConfig = plainToClass(EnvironmentVariables, config, {
    enableImplicitConversion: true,
  });
 
  // 'validateSync' method validate the class and returns errors
  const errors = validateSync(validatedConfig, {
    skipMissingProperties: false,
  });

  if (errors.length > 0) {
    throw new Error(errors.toString());
  }
  return validatedConfig;
};`}
</CodeSnippet>

Import the validate functions in `app.module.ts` and pass it to `ConfigModule`

<CodeSnippet language="ts">
  {`// app.module.ts

import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { ConfigModule } from '@nestjs/config';
import { validate } from './environment.validation';
@Module({
  imports: [
    ConfigModule.forRoot({
      validate,
    }),
  ], // Import ConfigModule
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}`}
</CodeSnippet>

# Time For Testing

I am running my server at `http://localhost:3000`

Use any API testing tool like(`postman`) to test the API.

<Img
  src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lypdies4yvrh4y34g7z4.png"
  alt="API Testing"
/>

And you can see when I hit my API, I am getting the secret key stored in the `.env` file as the response.



Learn what is HTTP Request and how to validate the request data in Nest.JS

Nest Js #4: How to Store, Read and Validate Environment Variable Using @nestjs/config


Hi There! 👋

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


# 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

<CodeSnippet language="bash">
  {`/[regex pattern]/`}
</CodeSnippet>


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

<CodeSnippet language="ts">
  {`// 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)) 
  }`}
</CodeSnippet>

<CodeSnippet language="bash">
  {`// output
[Test Method] - true `}
</CodeSnippet>

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

<CodeSnippet language="ts">
  {`// 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))
`}
</CodeSnippet>

<CodeSnippet language="bash">
  {`// output
[Exec Method] - [ 'world', index: 6, input: 'Hello world', groups: undefined ] `}
</CodeSnippet>

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

<CodeSnippet language="ts">
  {`// 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)) 
`}
</CodeSnippet>

<CodeSnippet language="bash">
  {`// output
[Exec Match] - [ 'world', index: 6, input: 'Hello world', groups: undefined ] `}
</CodeSnippet>

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

<CodeSnippet language="ts">
  {`// 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'))
`}
</CodeSnippet>

<CodeSnippet language="bash">
  {`// output
[Exec Replace] - Hello Word`}
</CodeSnippet>

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

<CodeSnippet language="ts">
  {`// 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))
`}
</CodeSnippet>

<CodeSnippet language="bash">
  {`// output
[Exec Split] - [ 'Hello ', '' ]`}
</CodeSnippet>


# 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

<CodeSnippet language="ts">
  {`// 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))
`}
</CodeSnippet>

<CodeSnippet language="bash">
  {`// output
[Exec Global Flag] - [ 'the', 'the' ]`}
</CodeSnippet>

`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

<CodeSnippet language="ts">
  {`// 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))
`}
</CodeSnippet>

<CodeSnippet language="bash">
  {`// output
[Exec Global & Case Insensitive Flag] - [ 'Work', 'work' ]`}
</CodeSnippet>

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


<CodeSnippet language="ts">
  {`// 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))
`}
</CodeSnippet>

<CodeSnippet language="bash">
  {`// output
[Exec Global & New Line Flag] - [ 'The', 'The' ]`}
</CodeSnippet>

Learn the fundamentals of regex, regex methods and its flags

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


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](https://nestjs.com/)

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

Let's Get Started Now! 🚀

# Prerequisite

- [Javascript](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
- [Typescript](https://www.typescriptlang.org/)
- Basics Of OOPS
- [Postman](https://www.postman.com/) (For API Testing)
- [Code Editor](https://code.visualstudio.com/)
- [Node.JS](https://nodejs.org/en/)


# 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 👇

<CodeSnippet language="bash">
  {`http://api.com/5689`}
</CodeSnippet>

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 👇

<CodeSnippet language="bash">
  {`"http://api.com?name=tamilan"`}
</CodeSnippet>

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 👇

<CodeSnippet language="bash">
  {`"http://api.com?name=tamilan&sort=name"`}
</CodeSnippet>

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](https://www.nandhakumar.io/post/nest-js-tutorial-1-create-your-first-api)**

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

Here's the project structure I have now,

<Img
  src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/exw7umiwr6o7xfawgw3o.png"
  alt="Nest JS Starter Project Structure"
/>

## Requirements

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

# Implementation

## Step 1:

Add some mock user data to the service file.

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

<CodeSnippet language="ts">
{`// 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,
    },
  ];
}`}
</CodeSnippet>

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

<CodeSnippet language="ts">
  {`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;
  }`}
</CodeSnippet>

## Step 3:

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

Add this method to the same service file.

<CodeSnippet language="ts">
  {`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));
}`}
</CodeSnippet>

## Step 4:

Update the base route of the controller to `/user`

<CodeSnippet language="ts">
  {` // 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) {}

}`}
</CodeSnippet>

## Step 5:

Implementing the first part of the 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

<CodeSnippet language="ts">
  {` // app.controller.ts
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);
  }
}`}
</CodeSnippet>

**Pro Tip**

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

<CodeSnippet language="ts">
  {`
@Get()
  getUsers(@Query('name') name: string): IUser[] {
    return this.appService.findUsersByName(name);
  }
`}
</CodeSnippet>

## Step 6:

Implementing the second part of the 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.

<CodeSnippet language="ts">
  {`// 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);
  }
}`}
</CodeSnippet>

**Pro Tip**

Similar to the `@Query()` decorator you can specify the property `id` in the `@Param()` decorator like this 👇
<CodeSnippet language="ts">
  {`
@Get()
  getUsers(@Param('id') id: string): IUser {
    return this.appService.findUsersByName(id);
  }
`}
</CodeSnippet>

That's it!

As per the requirement, you have implemented the API.

***

# Testing

Let's test the implementation now!

Start the server by executing,

<CodeSnippet language="bash">
  {`npm run start:dev`}
</CodeSnippet>

Open the server URL `http://localhost:3000` in [Postman](https://postman.com/) or any API Testing Tool.

## Test Case 1:

Getting all Users, without query params.

<Img
  src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fhqdj2ojjdvaoba9xhr4.png"
  alt="Nest JS Query and Route Param, Test Case - 1"
/>

And we got all the users.

✅ Test Case Passed!

## Test Case 2:

Getting all Users, with `name` query param

<Img
  src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cqxetgp9tcqvst7gr15w.png"
  alt="Nest JS Query and Route Param, Test Case - 2"
/>

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.

<Img
  src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ghhc4ajem3yedxdjj8vw.png"
  alt="Nest JS Query and Route Param, Test Case - 3"
/>

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](https://github.com/nandhakumar-rs/nest-js-tutorial-series).


Learn what is HTTP Request and how to use Route and Query Params in Nest.JS

Nest JS Tutorial #3 : Query & Route Params


Hi There! 👋

In this post, you will learn what is HTTP Request and how to validate the request data in [Nest.JS](https://nestjs.com/)

If you don't know what is Nest JS, Check out [my previous post](https://www.nandhakumar.io/post/nest-js-tutorial-1-create-your-first-api)

Let's Get Started Now! 🚀

# Prerequisite

- [Javascript](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
- [Typescript](https://www.typescriptlang.org/) (Optional)
- Basics Of OOPS
- [Postman](https://www.postman.com/) (For API Testing)
- [Code Editor](https://code.visualstudio.com/)
- [Node.JS](https://nodejs.org/en/)

# 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 👇

<CodeSnippet language="bash">{`https://yourapp.com/api/v1/users`}</CodeSnippet>

## Three parts of HTTP Request

**Methods** - It defines the type of the request

**Headers** - It 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** - It Will have the request data. For example, when registering a new user, you have to pass user information as request data to store it in the server

## HTTP Request Methods

<Img
  src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n22mtpxpj9hwt9x1i5tm.png"
  alt="HTTP Request Methods"
/>

That's a short brief on HTTP Requests.

**To know more about HTTP Request, [Click Here!](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods)**

## Why Request Data Validation?

As you know the body part of the HTTP Request may have some data.

When the HTTP Request reaches the server, Getting the Body data directly without validating is not good. Sometimes you may get malicious data. So, it is required that you always validate your Request Body data.

# Understanding Nest.JS Validation

In Nest.JS, We have something called a validation pipe. Whenever 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 validation rules. If you are not sure about this no worries, you'll understand this when implementing.

## Two Parts Of Validation Pipe

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

**Class Validator** -- It 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 an optional property).**

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 have already created a Nest.JS Project, If not follow my previous [tutorial](https://www.nandhakumar.io/post/nest-js-tutorial-1-create-your-first-api) to create one.

Now, Let's do the implementation step by step,

# Step 1:

Install class validator and class transformer on your project

<CodeSnippet language="bash">
  {`npm i class-validator class-transformer -s`}
</CodeSnippet>

# Step 2:

Generate User Controller.

<CodeSnippet language="bash">{`nest g controller user`}</CodeSnippet>

> Note: to execute nest commands you should have installed
> nest cli globally

# Step 3:

Generate User Module

<CodeSnippet language="bash">{`nest g module user/user --flat`}</CodeSnippet>

> 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

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

# Step 5:

Add User Module to App Module

<CodeSnippet language="ts">
{`// 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 {}`}

</CodeSnippet>

# Step 6:

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

<Img
  src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5bz9as4lek43gk0m2zoa.png"
  alt="Project Structure - USER DTO"
/>

# Step 7:

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

<CodeSnippet language="ts">
  {`// user.dto.ts
export class UserDTO {
  email: string;
  age: string;
  name: number;
  country: number;
}`}
</CodeSnippet>

# Step 8:

Nest.JS uses [Typescript](https://www.typescriptlang.org/) decorators extensively.

> Note: [Decorators](https://www.typescriptlang.org/docs/handbook/decorators.html) 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 the validation decorators to the class properties

<CodeSnippet language="ts">
{`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;
}`}
</CodeSnippet>

# Step 9:

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

<CodeSnippet language="ts">
{`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;
  }
}
}`}
</CodeSnippet>
> **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
# Step 9:

Add Validation Pipe middleware globally in `main.ts`. By adding this globally, it helps DTO to validate the data all over the application.

<CodeSnippet language="ts">
{`// main.ts
import { ValidationPipe } from '@nestjs/common'
import { NestFactory } from '@nestjs/core'
import { AppModule } from './app.module'
const CookieSession = require('cookie-session')

async function bootstrap() {
  const app = await NestFactory.create(AppModule)

  app.useGlobalPipes(
    // By adding this validation pipe globally, nest js helps us to validate body params, query param etc..
    new ValidationPipe({
      whitelist: true, // When Whitelist is set to true, You will not be allowed to send additional props apart from DTO Property
    }),
  )

  // Add Cookie Session Middleware to store user id in cookies on the response and the request.
  app.use(
    CookieSession({
      keys: ['SecretKey'],
    }),
  )
  app.listen(3000)
}
bootstrap()
`}

</CodeSnippet>

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

# Testing

Let's test the implementation now.

Start the server by executing

<CodeSnippet language="ts">
  {`
npm start:dev
}`}
</CodeSnippet>

Open the server URL `http://localhost:3000` in [Postman](https://www.postman.com/) or any API Testing Tool.

## Test Case 1

Passing all the user properties with an invalid email

<Img
  src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ark6dxnw3c3x4ajx5g3.png"
  alt="Nest JS Request Body Validation - Test Case 1"
/>

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

<Img
  src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wptt1ahr6qkkpnxl9pfe.png"
  alt="Nest JS Request Body Validation - Test Case 2"
/>

Now we got success response, even without the country property.

Try testing with different scenarios by passing invalid data and the validation should work as expected

Congratulation! 👏

You have successfully validated the request body in Nest.JS


Nest JS Tutorial #2: HTTP Request & Data Validation


Hi There! 👋

It's been a couple of months working with [Nest.JS](https://nestjs.com/) 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.

Let's Get Started Now! 🚀

# Prerequisite

- [Javascript](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
- [Typescript](https://www.typescriptlang.org/) (Optional)
- Basics Of OOPS
- [Postman](https://www.postman.com/) (For API Testing)
- [Code Editor](https://code.visualstudio.com/)
- [Node.JS](https://nodejs.org/en/)

# 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](https://expressjs.com/) and [Fastify](https://www.fastify.io/) 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)](https://docs.nestjs.com/first-steps)

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](https://docs.nestjs.com/cli/overview)

<CodeSnippet language="bash">{`npm i -g @nestjs/cli`}</CodeSnippet>

Now generate a new Nest.JS project

<CodeSnippet language="bash">{`nest new [your project name]`}</CodeSnippet>

It will ask for,

- Which package manager ([npm](https://www.npmjs.com/), [yarn](https://yarnpkg.com/), [pnpm](https://pnpm.io/)) to use? (I choose yarn, you can choose as you wish)

Now open the project on your code editor

# Understanding Nest.JS Project Structure

<Img
  alt="Nest JS Project Structure"
  src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7d11o7dru54dgkw3z4f1.png"
/>

- `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](https://en.wikipedia.org/wiki/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 👇

<CodeSnippet language="ts">
  {`// Example API
"https://google.com/api/users" // returns a list of users`}
</CodeSnippet>

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 👇

<CodeSnippet language="bash">{`yarn start:dev`}</CodeSnippet>

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

Now your server should have been started on

<CodeSnippet language="bash">{`http://localhost:3000`}</CodeSnippet>

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

<Img
  alt="API Testing With Postman"
  src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mh6bqxytzlncjyju8u79.png"
/>

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 👇

<CodeSnippet language="ts">
  {`
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();
}
}
`}

</CodeSnippet>

### 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 👇

<CodeSnippet language="ts">
  {`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'];
}
}
`}

</CodeSnippet>

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

<Img
  alt="Testing Get Users API Developed in Nest JS"
  src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4zi9b0oytvztskqjgtnf.png"
/>

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

Congratulation! 👏

You have created your first API in Nest.JS 🙌


Nest JS Tutorial #1: Create Your First API


Hi There! 👋

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](https://www.docker.com/)

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)

<CodeSnippet language="bash">{`npm create vite@latest`}</CodeSnippet>

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

<Img
  alt="desktop"
  src="https://cdn.hashnode.com/res/hashnode/image/upload/v1668678866236/JzJ25nfLJ.png"
/>

Now switch to the project directory

<CodeSnippet language="bash">{`cd [your project name]`}</CodeSnippet>

# 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`

<CodeSnippet language="javascript">
  {`export default defineConfig({
  plugins: [react()],
});`}
</CodeSnippet>
to

<CodeSnippet language="javascript">
  {`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
  },
  });`}
</CodeSnippet>

# Step 3: Create a Dockerfile

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

<Img
  alt="desktop"
  src="https://cdn.hashnode.com/res/hashnode/image/upload/v1668679231923/p-97mBMMq.png"
/>

# Step 4: Add Commands to Dockerfile

Copy these commands to your Dockerfile

<CodeSnippet language="bash">
{`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"]`}

</CodeSnippet>

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`

<CodeSnippet language="bash">{`docker build -t [any name] .`}</CodeSnippet>

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

<CodeSnippet language="bash">{`docker images`}</CodeSnippet>

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`

<CodeSnippet language="bash">
  {`docker run -d --rm -p 5173:5173 --name [name of the container] [your docker image name]`}
</CodeSnippet>

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

<CodeSnippet language="bash">{`docker ps`}</CodeSnippet>

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`

<Img
  alt="desktop"
  src="https://cdn.hashnode.com/res/hashnode/image/upload/v1668682778580/owixBZ78D.png"
/>


Learn how to dockerize your vite react app in the development environment

Step By Step Guide To Dockerize React App Created Using Vite


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 👇

I won't lie, doing this daily seems hectic and I really would not recommend it to everyone. But it's super addictive to me, it's become a daily routine, and I can't see myself not doing it.

<CodeSnippet language="javascript">
{
`const name = "Sam";
console.log(name[name.length - 1]) // "m"

const names = ["Ram", "Sam"];
console.log(names[names.length - 1]) // "Sam"
`
}

</CodeSnippet>

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 👇

<CodeSnippet language="javascript">
{
`const name = "Sam";
console.log(name.at(-1)) // "m"

const names = ["Ram", "Sam"];
console.log(names.at(-1)) // "Sam"
`
}

</CodeSnippet>

Simple right?

Thanks for reading this article.

Cheers ✌️


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