This is Part 2 of our Mastering Webpack series. If you need a refresher on the fundamentals of Webpack and module bundling, consider revisiting Part 1 of this series.

In this post, we are going to see how webpack can be configured for web, by default when we setup webpack it will work fine in the node.js environment, but if we try to use the bundled version of JS by opening in a browser the js file won't support and it won’t work

Continuing configuration based on the previous post

## Step 1: Create Separate webpack config for web

Create a separate webpack config file called webpack.config.web.ts in the root directory, Then add the below code which is the configurations that tell how the project code should be compiled and bundled

<CodeSnippet language="ts" filename="webpack.config.web.ts">
{`import { Configuration } from "webpack";
import { resolve } from "path";

const config: Configuration = {
  mode: "none", // Sets bundling mode to 'none' (no optimizations).
  entry: {
    bundle: "./src/index.ts", // Entry point of the application.
  },
  target: "web", // Correctly sets the bundle target to web environments.
  module: {
    rules: [
      {
        exclude: /node_modules/, // Excludes node_modules from processing.
        use: {
          loader: "ts-loader", // Processes TypeScript files.
          options: {
            transpileOnly: true, // Speeds up compilation by skipping type checking.
            configFile: "tsconfig.web.json", // Using tsconfig created for web platform
          },
        },
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"], // Resolves these file extensions.
  },
  output: {
    filename: "[name].web.js", // Names output file after its entry point ('bundle.js').
    path: resolve(__dirname, "dist"), // Output directory for the bundled files.
  },
};

export default config;
`}
</ CodeSnippet>

Notes:
- The `[name].js` in the filename field tells Webpack to name the output file based on the name of the entry point. For instance, since your entry point is named `bundle`, the output file will be `bundle.web.js`.
- Most of this file resembles the configuration we created for the Node.js environment. The key differences here are,
  - The target is set to `web` instead of `node`
  - The output filename is changed to `bundle.web.js` to distinguish it from the Node.js bundle
  - The configuration is set to `tsconfig.web.json`

## Step 2: Create separate ts config for web

Create a new tsconfig file for web version named `tsconfig.web.json`  and add the following code

<CodeSnippet language="json" filename="tsconfig.web.json">
{`{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "module": "ES6"
  }
}
`}
</ CodeSnippet>
Notes:
- Here, we are extending the base `tsconfig.json` to avoid repeating configurations. We set the module to `ES6` to utilize the latest JavaScript features in the browser.
- Additionally `module` is set to `ES6` , to use the latest features of JS in the browser environment

## Step 3: Include bundle generated for web in HTML 

Add index.html file in the root directory, and add the bundle script that will be generated for the web

<CodeSnippet language="html" filename="index.html">
{`<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Typescript with webpack</title>
  </head>
  <body>
    <p> Check the console by opening inspect window!</p>
    
    
    <script src="./dist/bundle.web.js"></script> 
  </body>
</html>
`}
</ CodeSnippet>

## Step 4: Add build script for web

Add build script for the web version in `package.json` file 

<CodeSnippet language="json" filename="package.json">
{`"scripts": {
    "start": "node dist/bundle.js",
    "build": "webpack",
    "build-web": "webpack --config webpack.config.web.ts",
  },
`}
</ CodeSnippet>

Note: 
- `--config webpack.config.web.ts` - is added to mention that we need to use `webpack.config.web.ts` configuration when bundling

## Step 5: Build the bundle

Execute `npm run build-web` , to generate the bundle for web

**Note: If you're following from Part 1, you might encounter an error related to the `crypto` module. This occurs because `crypto` is a Node.js native module and isn't natively supported in the browser. We'll fix this by adding the necessary polyfills.**

<CodeSnippet language="bash" >
{`ERROR in ./src/utils.ts 1:0-28
Module not found: Error: Can't resolve 'crypto' in '/Users/nandhu/Desktop/Learnings/typescript/src'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
        - install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "crypto": false }
`}
</ CodeSnippet>

> **Why Polyfill?**
> Polyfills are used to emulate the functionality of APIs or components that are available in some environments but missing in others, typically in web browsers that do not support certain modern web standards. When developing applications that need to work both in Node.js and the browser, it's crucial to understand which Node.js native modules require polyfills to function correctly in the browser.

Install polyfill of crypto library and it’s dependent polyfill libraries(these dependent libraries are required to be installed to make crypto work)

<CodeSnippet language="bash">
{`npm install buffer vm-browserify stream-browserify --save`}
</ CodeSnippet>

Add a fallback library for crypto library, under resolve section in `webpack.config.web.ts`

<CodeSnippet language="ts" filename="webpack.config.web.ts">
{`resolve: {
    extensions: [".tsx", ".ts", ".js"],
    fallback: {
    // Polyfill for 'crypto' and it's dependent polyfill modules
      "buffer": require.resolve("buffer/"),
      "stream": require.resolve("stream-browserify"),
      "vm": require.resolve("vm-browserify"),
      "crypto": require.resolve("crypto-browserify")  
    }
  }
`}
</ CodeSnippet>

Basically what we are doing here is, we are telling webpack to use `crypto-browserify` instead of `crypto` native library, similar for other polyfill-dependent libraries

Now again execute the `npm run build-web` , bundle file will be generated successfully



## Step 6: Test the bundle generated for web

Since the HTML file includes our web version of Webpack bundle. Open the html in a browser and check the console to see the outputs from your TypeScript code.

Congratulations! You've successfully configured Webpack to bundle your TypeScript project for both web and node.js environments. Now, your application is more versatile and ready for deployment across different platforms. Experiment with adding more complex functionalities and optimizations to your Webpack configuration to further enhance your project.

Discover the essentials of module bundling, explore how Webpack optimizes your project's assets, and learn the steps to configure Webpack with TypeScript effectively.

Mastering Webpack: Setting Up Webpack with TypeScript For Web - Part 2


Before diving into the Webpack setup, let's understand what Webpack is and why we use it.

Webpack is a module bundling tool. If you're new to module bundling, it's a critical process in web development that optimizes the application's loading time and runtime efficiency by combining and optimizing multiple code files and assets from a project into a smaller number of files. 

This process not only consolidates scripts and styles but also manages dependencies to ensure they are loaded in the correct order. Modern bundlers can also perform additional optimizations such as minification, tree shaking, and lazy loading to improve loading times and application performance.

Some of the advantages of module bundling include:
- Reducing the number of HTTP requests by combining multiple files into fewer bundles.
- Automating the management of assets and dependencies, making it easier to maintain and scale large applications.
- Including tools and processes like polyfills and transpilers to ensure code works across various browsers.
- Implementing techniques such as minification, tree shaking, and lazy loading to minimize file sizes.
- Enhancing the developer experience with features like Hot Module Replacement.

Coming back to Webpack, 
it is a powerful module bundler primarily used in web development. It compiles and optimizes all your project's assets, such as JavaScript, HTML, and CSS, into fewer and more efficient files suited for production environments. Webpack also provides advanced features like code splitting, lazy loading, and module caching to enhance application performance.

Since this post focuses on setting up Webpack for a TypeScript project, it's important to understand how module bundling works with TypeScript. Here’s a simplified overview:
1. **TypeScript Compilation**: First, the TypeScript compiler (**`tsc`**) transforms TypeScript code into JavaScript. This step converts TypeScript's syntax and features into JavaScript that browsers or Node.js environments can execute.
2. **Module Bundling**: Next, the compiled JavaScript code is bundled into a single file or a few files by a module bundler. This process optimizes the code and manages dependencies to ensure they are loaded correctly.

Note that while Webpack is one of the most popular module bundlers, there are several others widely used in the development community, including:

- **Rollup**: Known for its efficiency and suitability for libraries.
- **Esbuild**: Praised for its speed, written in Go, and leveraging multithreading.
- **Vite**: A modern build tool that combines the best of Esbuild and Rollup for both development and production builds.

Each of these tools has its strengths and can be chosen based on the specific needs of a project.

Enough of the theory, now let's jump into setting up Webpack with TypeScript

## Step 1: Initialize a Node Project

<CodeSnippet language="bash">
{`npm init -y`}
</ CodeSnippet>
Note: The `-y` flag automatically populates the package.json file with default values.

## Step 2: Install Required Development Dependencies

<CodeSnippet language="bash">
{`npm i -D typescript @types/node webpack webpack-cli ts-node ts-loader @types/webpack`}
</ CodeSnippet>
Notes:
- `-D` flag is to indicate these dependencies are not needed in the production environment but are essential during development
- `typescript`  - Essential for converting TypeScript code to JavaScript.
- `@types/node` - These are TypeScript declaration files for Node.js. They provide type definitions for Node.js modules.
- `webpack` - Webpack tool required to bundle the code
- `webpack-cli` - This is the command line interface for Webpack used to execute webpack based commands
- `ts-node` - TypeScript execution engine, Allows you to run TypeScript files directly in Node.js without pre-compiling.
- `ts-loader` - This is a Webpack loader that handles the compilation of TypeScript files into JavaScript.
- `@types/webpack` - Similar to **`@types/node`**, these are TypeScript declaration files but for Webpack itself

## Step 3: Generate TypeScript Configuration File (`tsconfig.json`)

<CodeSnippet language="bash">
{`tsc --init`}
</ CodeSnippet>
This command generates a `tsconfig.json` with a set of default compiler options commonly used in most TypeScript projects. It is customizable as per your project requirements.

## Step 4: Create `webpack.config.ts` in the Root Directory

<CodeSnippet language="ts" filename="webpack.config.ts">
{`import { Configuration } from "webpack";
import { resolve } from "path";

const config: Configuration = {
  mode: "none", // Sets bundling mode to 'none' (no optimizations).
  entry: {
    bundle: "./src/index.ts", // Entry point of the application.
  },
  target: "node", // Bundles code for Node.js environment.
  module: {
    rules: [
      {
        exclude: /node_modules/, // Excludes node_modules from processing.
        use: {
          loader: "ts-loader", // Processes TypeScript files.
          options: {
            transpileOnly: true, // Speeds up compilation by skipping type checking.
          },
        },
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"], // Resolves these file extensions.
  },
  output: {
    filename: "[name].js", // Names output file after its entry point ('bundle.js').
    path: resolve(__dirname, "dist"), // Output directory for the bundled files.
  },
};
export default config;
`}
</ CodeSnippet>

## Step 5: Define the Entry Point

Create a `src` directory, and within it, create two files: `index.ts` (entry file) and `utils.ts` (to export functions used in `index.ts`).
<CodeSnippet language="ts" filename="src/utils.ts">
{`import crypto from "crypto";

// Create a function to generate a SHA-256 hash
export const generateHash = (input: string): string => {
  return crypto.createHash("sha256").update(input).digest("hex");
};
`}
</ CodeSnippet>

<CodeSnippet language="ts" filename="src/index.ts">
{`import { generateHash } from './utils';

console.log("Typescript Works!")
console.log("Node Works!")

const hash = generateHash("Webpack is Working!")
console.log('SHA-256 Hash:', hash)
`}
</ CodeSnippet>

## Step 6: Add Custom Scripts in `package.json`

<CodeSnippet language="json" filename="package.json">
{`"scripts": {
  "start": "node dist/bundle.js",
  "build": "webpack",
}
`}
</ CodeSnippet>

## Step 7: Execute `npm run build`

This will bundle the code and generate a `dist` directory containing `bundle.js`.

## Step 8: Test the Bundled Code

Execute `npm run start`. If everything is set up correctly, you should see outputs confirming that TypeScript and Node are working, along with a SHA-256 hash generated by your utility function.

<CodeSnippet language="bash">
{`❯ npm run start

> Typescript Webpack Setup@1.0.0 start
> node dist/bundle.js

Typescript Works!
Node Works!
SHA-256 Hash: a7929e1f857cca0a8c9c1345e79f3b1a1976e603c9ce4e77a808988658b36181
`}
</CodeSnippet>


However, there's a limitation with this configuration: it's not suitable for web environments. If you add an `index.html` and try to include the bundled script, it won’t work. We'll explore how to modify this setup for web compatibility in Part 2 of this series.


Mastering Webpack: Setting Up Webpack with TypeScript For Node.js - Part 1


Hi There! 👋

Sometimes you might miss validating your unit test cases before pushing your code and this might be trouble later during the project release or deployments

What if you can automate this test case validation just before you merge your code?

Yes, You can do that using Github Action.

> Note: This Automation will work only if your project is on Github. 

So, What is Github Action?

[Github Action](https://github.com/features/actions) is a platform that allows you to automate your build, test, and deployments. 

Now, Let’s see how we can setup github action to automate test case validation

## Step 1: New Repository

Create a new repository on Github

## Step 2: Setup a Node.js Project

Download the starter project from this [repository](https://github.com/nandhakumar-rs/node-app-with-mocha-test) or if you have an existing project you can use it.

For this tutorial, I am going to use the node.js project. But the workflow can be used for other type of projects as well, the only thing you that you have to do is updating shell scripts in the working based on your project 

## Step 3: Git Workflow Setup

Create a `.github` directory and create a `workflows` directory inside it.
Note the naming is important otherwise, the workflow will not be triggered

## Step 4: Create a YAML File

Create a [YAML](https://yaml.org/) file inside the workflows directory. We will be writing instructions that have to be executed.

## Step 5: Write Instructions To Automate Unit Test Cases

Add the following script to the YAML file,

<CodeSnippet showLineNumbers language='yaml'>
{`name: Unit Test Cases Execution
on: pull_request
jobs:
    unit-test:
      runs-on: ubuntu-latest
      steps:
        - name: Clone Repository
          uses: actions/checkout@v3
        - name: Setup Node.js
          uses: actions/setup-node@v3
          with:
              node-version: 19.9.0
        - name: Install Dependencies
          run: npm ci
        - name: Execute Test Cases
          run: npm run test`}
</CodeSnippet>

- `Line 1` - Name of the workflow
- `Line 2` - On which event the workflow should be triggered like push, pull_request.
- `Line 4` - Name of the job
- `Line 5` - On which runner(platform window, linux etc) we want to execute the test cases, in our case we are using ubuntu. Check out other [runners](https://github.com/actions/runner)
- `Line 6 - 16` - Steps to be executed when running the job
- `Line 7 - 8` - It is the First Step, and here we are cloning the repository into the runner. To clone the repository we are using existing github action called `actions/checkout@v3` .
- `Line 9 - 12` - To Install node into the runner, by default the runner will come with node pre installed, At the time of writing this blog the default node version the runner use is V18.16.1. Since I want a specific version we are reinstalling the node with specific version V19.9.0
- `Line 13 - 14` - To Install the required dependencies.
- `Line 15 - 16` - Execution of the test cases.

Now push the changes and when you rise a PR, your workflow will be started automatically and it will execute the unit test cases.

In this post you will learn how to automate validating your unit test cases using github action.

Automate Unit Test Case Validation With Github Action


Hi There! 👋

Next.js 13 is a game changer, it comes with some new features, and one of them that I love the most is you can decide which component to be rendered on the client side and which component to be rendered on the server side.

Now, let’s see how we can integrate Chakra UI into it.

> Note,  You should have [Node.js 16.8](https://nodejs.org/) or later
> 

## Create a new Next.js 13 Project

Open the terminal and execute

<CodeSnippet language="bash">
{`npx create-next-app@latest`}
</CodeSnippet>

You will be prompted for list of questions before generating the project, 

<CodeSnippet language="bash">
{`What is your project named? // Name of your project
Would you like to use TypeScript with this project? No / Yes 
Would you like to use ESLint with this project? No / Yes
Would you like to use Tailwind CSS with this project? No / Yes
Would you like to use src/ directory with this project? No / Yes
Use App Router (recommended)? No / Yes
Would you like to customize the default import alias? No / Yes`}
</CodeSnippet>

Notes on above prompts,

- By default it asks whether we need to setup tailwind css, since we are going to integrate chakra UI, You say No to it.
- If you wish to have a `src/`  you can go ahead with that
- For `AppRouter` it is required for page routing, so it a `Yes`
- `import alias` is again a personal preference, what it does is when you import components your can reference by alias

If you choose to have alias, it ask for custom alias name if the name is not provided it will use default alias `@/`
 
So whenever you import component you can import like this
    
    <CodeSnippet language="jsx">
    {`import component from "@/shared/component";`}
    </CodeSnippet>
    

After answering the prompts, your project will be generated.

Now it’s time for chakra UI

## Install Chakra UI and it’s dependencies

<CodeSnippet language="bash">
{`npm i @chakra-ui/react @chakra-ui/next-js @emotion/react @emotion/styled framer-motion`}
</CodeSnippet>


Notes on the above dependencies,

- `@chakra-ui/react @chakra-ui/next-js` are the chakra ui core libraries required to use things like component, styles, etc.
- `@emotion/react` is a library for building highly customizable and themeable design systems in React.
- `@emotion/styled` is another part of Emotion. It allows you to create styled React components.
- `framer-motion` is a production-ready motion library for React. It's used to create animations and interactions.

Once installing all the dependency we have to configure Next.js to use components and utilities of chakra UI

## Step 1:  Remove Existing CSS files

Remove existing css files and it’s imports statements from the components

## Step 2:  Create ChakraUI Provider

Create a new directory called `provider` under `/src` directory and create a file called 

`chakra-ui.provider.tsx` 

Add the following code snippet to the provider file

<CodeSnippet language="bash">
{`'use client';

import { CacheProvider } from '@chakra-ui/next-js'
import { ChakraProvider } from '@chakra-ui/react'

const ChakraUiProvider = ({ children }: { children: React.ReactNode }) => {
  return (
    <CacheProvider>
      <ChakraProvider>{children}</ChakraProvider>
    </CacheProvider>
  )
}

export default ChakraUiProvider`}
</CodeSnippet>


Notes on `chakra-ui.provider.tsx`,

- Providers are simply an another component which will act as a wrapper around children component, because of that the file is of type `.tsx`.
- In Next.js 13, we have a new feature where you can decide which component should render on server side and client side. <br/> <br/>Check the docs for more info https://nextjs.org/docs/app/building-your-application/rendering.<br/> <br/> Since **Chakra UI only works in client-side components,** the provider has to be a client sider rendering component. To render a component in client side, you need to add `use client` directive at the top of the file.
- `CacheProvider`  ensures that all styles created by Emotion (the CSS-in-JS library used by Chakra UI) are properly included in the when rendering the component. This is necessary due to the way Next.js streams HTML from server to client, which can interfere with how CSS-in-JS libraries like Emotion inject styles into the page. The CacheProvider works around this limitation to ensure styles are properly delivered to the client.
## Step 3:  Adding Custom Theme

Chakra UI is more flexible in allowing to customize existing theme and component’s of chakra UI

Let’s try to add custom colors and google fonts

- Create a `theme` directory under `/src` directory
- Create three files,
    - `index.ts` will export all the theme properties
    - `colors.ts` will have the app colour pallet
    - `fonts.ts` will have the google font

### Adding Colors

In `colors.ts` , I am adding some custom colors. you can add based on your requirement

<CodeSnippet language="bash">
{`/** App Color Pallet */
export const colors = {
  primary: {
    900: "#00234B",
    800: "#4A90E2",
    700: "#89CFF0",
    600: "#F3FBFF",
    500: "#F7F9FA",
  },
  success: {
    900: "#2E7D32",
    800: "#A5D6A7",
  },
  warning: {
    900: "#FF9800",
  },
  accent: {
    900: "#FAD938",
  },
  text: {
    900: "#292929",
    800: "#333333",
    700: "#585858",
    600: "#666666",
    500: "#F0F0F0",
    400: "#F8F8F8",
    300: "#F7F7F7",
  },
  white: {
    900: "#FFFFFF",
  },
};`}
</CodeSnippet>

### Adding Fonts

In `font.ts` , I am using `Montserrat` font. you can change it based on your requirement

<CodeSnippet language="bash">
{`import { Montserrat } from "next/font/google";
const montserrat = Montserrat({ subsets: ["latin"] });

/** App Fonts */
export const fonts = {
  body: montserrat.style.fontFamily,
  heading: montserrat.style.fontFamily,
};`}
</CodeSnippet>

Note, You can use multiple fonts and point the font to `heading` and `body(paragraphs)`

### Exporting Theme

Finally we have to export fonts and colors. To do that, open `index.ts`  add the following code

<CodeSnippet language="bash">
{`import {  extendTheme } from "@chakra-ui/react";
import { fonts } from "./fonts";
import { colors } from "./colors";

export const theme = extendTheme({
  colors, 
  fonts,
  components: {
  /** Customize Chakra UI Components */
  },
});`}
</CodeSnippet>


Notes on the above code,

- `extendTheme` helps us to extend themes with Chakra UI’s existing theme.
- `components`  under `extendTheme` allows us to write customize styles of chakra UI component globally.

## Step 4:  Adding theme to provider

Add the theme to Chakra UI Provider, So that the custom theme will now be available throughout the application

<CodeSnippet language="bash">
{`'use client'

import { CacheProvider } from '@chakra-ui/next-js'
import { ChakraProvider } from '@chakra-ui/react'
import { theme } from '../theme' // Customized theme

const ChakraUiProvider = ({ children }: { children: React.ReactNode }) => {
  return (
    <CacheProvider>
      <ChakraProvider theme={theme}>{children}</ChakraProvider>
    </CacheProvider>
  )
}

export default ChakraUiProvider`}
</CodeSnippet>

I have created a [repo](https://github.com/nandhakumar-rs/next-js-13-chakra-ui-starter) with all the configuration we did so far, you can use it for your project and you have any other suggestion to improve this repo, feel free to reach me. I’ll be keeping this repo up to date

## **Conclusion**

And that's it! You have successfully set up Next.js 13 with Chakra UI. We've walked through creating a new Next.js 13 project, installing Chakra UI and its dependencies, and configuring Chakra UI to work with our Next.js project. We even customized our application's theme with custom colors and Google Fonts.

Keep coding, and stay curious!

Learn how to setup Chakra UI in a Next.js 13 Application

How to setup Next.js 13 + Chakra UI


Hi There! 👋

In react, it is required to pass the key to the react list items. If you don’t pass it, react might throw a warning in the console.

**What Are Keys in React?**

Keys are just strings that are passed as an attribute for each element when rendering a list. They help React identify which elements have changed and which have not.
We'll follow the second method in this tutorial, as it gives us more control over the template, and the possibilities for customization are endless.


And these keys are expected to be unique.

Here’s an example, rendering a list of users, and when rendering each element in the list user id is used as a unique key.


<CodeSnippet language="jsx">
{`const users = [{id: 1, name: "Jin"}, {id: 2, name: "Jhon"}];

return (
  <ul>
    {users.map(user =>
      <li key={user.id}>{user.name}</li>
    )}
  </ul>
);`}
</CodeSnippet>


**Why Are Keys Required?**

Keys have an important role in improving React's performance by helping to identify which items in the list have changed, are added, or are removed when the component re-renders. 

This process is known as "reconciliation", where React compares the new version of the DOM with the saved previous version, updating the DOM to match the new state of the component as efficiently as possible.

Without keys, React wouldn't be able to effectively differentiate between the different elements in the list. This would result in inefficient updates and potential issues with the component's state.


**Why array index shouldn’t be used as key?**

While it might be tempting to use the index of each item in the array as its key, this approach can potentially lead to issues with the component's state, because the index can change based on the order of items.

This is generally considered an anti-pattern unless the list is static and will not change in the future.

For example, the following code snippet might cause issues:

<CodeSnippet language="jsx">
{`const users = ["Jin", "Jhon", "Charlie"];

return (
  <ul>
    {users.map((user, index) =>
      <li key={index}>{user}</li>
    )}
  </ul>
);`}
</CodeSnippet>

In this case, **`key={index}`** assigns the index of each item in the array as its key. If the order of items in the **`users`** array changes, this will cause unnecessary re-renders, as React will assume that each item is a new element due to the change in the key.

Instead, it's typically better to use a string that uniquely identifies the list item among its siblings, like user id we used in the previous example

**Conclusion**

Keys are a small detail of React, but they have a significant impact on the performance and reliability of your applications. By understanding and using keys correctly, you can ensure that your lists are rendered efficiently and accurately, leading to a smoother user experience and more manageable codebase.

Next time you're rendering a list in React, don't forget to assign a unique key to each element. Your app's performance might just depend on it!


Learn why you need to pass key in to items in react list, and understand how it plays an important role in performance

Understanding the Role of Keys in React List Rendering


Hi There! 👋

Many cloud-based services, including Google Cloud Platform, use JSON-format service account keys to authenticate applications. These keys are required when accessing the cloud services for validation purposes.  In such cases, storing these keys as an environment variable can be a viable solution as we don’t want to expose it. 

In this blog post, I will guide you through the process of converting your Google service account keys into a string, setting it as an environment variable, and using it in your application.


## Step 1: Converting Google Service Account Keys to a String
We will be using `handlebars` for templating and `@sendgrid/mail` to send emails. You can install these packages using the following command:
<CodeSnippet language="bash">
{`npm install handlebars @sendgrid/mail`}
</CodeSnippet>

## Step 2: Setting Up Handlebars Templates
Google service account keys are typically provided as a JSON file. This file needs to be converted to a Base64 string, which can be done with different command-line utilities depending on your operating system.

**For Unix-like Systems (Linux, MacOS):**

Use the `cat` command in combination with `base64`:
<CodeSnippet language="bash">
{`cat service_account.json | base64`}
</CodeSnippet>

This will print out a long string of characters - your Base64-encoded service account keys.

**For Windows Systems:**

Use the `certutil` command to achieve the same result:
<CodeSnippet language="bash">
{`certutil -encode service_account.json service_account.base64 && findstr /v /c:- 
service_account.base64 > service_account_no_line_breaks.base64`}
</CodeSnippet>

## Step 2: Setting the Environment Variable
Once you've got this Base64 string, you need to set it as an environment variable in your Node.js environment.

**For Local Testing:**

You can set environment variables directly in the terminal before you start your Node.js server:
<CodeSnippet language="bash">
{`export GOOGLE_KEYS="your-base64-string"`}
</CodeSnippet>

**For Server Deployment:**

If you're deploying to a server or a serverless environment, the way you set environment variables will depend on your provider. Be sure to consult their documentation for more detailed instructions.

**Alternatives**

If you are storing environment variables in a file like `.env` instead of storing it directly into server or local system environment, using `dotenv` library you can access the environment variables. 

Make sure to mention that the `.env` file should be added to `.gitignore` to prevent it from being uploaded to public repositories, for security reasons.

## Step 3: Using the Environment Variable in Your Code
With the environment variable set, you can access it in your code. By decoding the Base64 string back into its original format and parsing it as JSON, you will have access to your Google Service Account keys:

<CodeSnippet language="js">
{`const GoogleServiceAccountKeys = JSON.parse(
  Buffer.from(process.env.GOOGLE_KEYS as string, "base64").toString()
);`}
</CodeSnippet>

**Let's dive deeper into how this piece of code works,**

Using Node.js and its built-in Buffer object to decode a base64 string stored in an environment variable and then parsing the resulting string as JSON. Here's what each part of the code is doing:

- `process.env.GOOGLE_KEYS as string`:
  `process.env` is an object that holds the environment variables in Node.js. `GOOGLE_KEYS` is assumed to be one of these environment variables, and it's being treated as a string `(as string)`. This environment variable is expected to hold a base64-encoded string representing the Google Service Account keys.
- `Buffer.from(process.env.GOOGLE_KEYS as string, "base64")`:
  This is creating a new `Buffer` object from the `GOOGLE_KEYS` string, treating that string as base64-encoded data. `Buffer` is a global object in Node.js used to work with a sequence of binary data. The `from` method creates a new Buffer containing a copy of the provided data. In this case, it's creating a Buffer from the base64 string, effectively decoding the string from base64 back into its original form.
- `.toString()`:
  This is converting the buffer back into a string. By default, `toString()` converts the buffer using the 'utf8' encoding, which is the most commonly used string encoding in JavaScript. As a result, you get the original JSON-formatted string that was encoded in the `GOOGLE_KEYS` variable.
- `JSON.parse(...)`:
  This is parsing the JSON-formatted string back into a JavaScript object. `JSON.parse()` is a standard JavaScript function that parses a string as JSON.
- `const GoogleServiceAccountKeys = ...`:
  The resulting JavaScript object is being stored in a constant variable named `GoogleServiceAccountKeys`. which you can then use to authenticate your application with Google services.

## Conclusion

Storing sensitive data like service account keys as environment variables provides security benefits and flexibility. Following this approach for your Google Service Account keys can make your application more secure and easier to deploy in various environments.

Learn how to store and use google service account keys as enviroment variables in Node.js.

Storing and Using Google Service Account Keys as Environment Variables


Hi There! 👋

Recently, In one of my projects, I was using SendGrid(a popular email delivery service to send emails). And a requirement arose for using a custom email template.

There are two primary ways you can design custom templates,
  - **Design the template within the SendGrid platform itself**
    This is a straightforward method that allows you to create templates using SendGrid's built-in editor. The advantage is that it requires no additional tooling or setup, and it's integrated directly with SendGrid. The downside is that it may be less flexible and offer fewer customization options than coding the template yourself.
  - **Design the template using HTML and CSS**
    This method allows you to have full control over the template design. You can leverage your HTML and CSS skills to create highly customized templates. The downside is that it requires more setup, as you have to integrate the HTML/CSS template with SendGrid manually.

We'll follow the second method in this tutorial, as it gives us more control over the template, and the possibilities for customization are endless.

In this blog, we will explore how to use the Handlebars template engine to create dynamic email templates, and how to send these emails using `SendGrid` in a `Node.js` application.

Before getting started, create a new node.js project or if you have any js-based backend project you can use that


## Step 1: Installing Dependencies
We will be using `handlebars` for templating and `@sendgrid/mail` to send emails. You can install these packages using the following command:
<CodeSnippet language="bash">
{`npm install handlebars @sendgrid/mail`}
</CodeSnippet>

## Step 2: Setting Up Handlebars Templates
**Handlebars** is a popular templating engine that allows you to build semantic templates effectively with no frustration. **Handlebars** templates look like regular HTML, with embedded handlebars expressions that allows to pass dynamic value to the HTML from Javascript.

Let's create a simple **Handlebars** template for a welcome email:

Create a file called `templates/mail-template.hbs`

<CodeSnippet language="html">
{`<h1>Welcome, {{username}}!</h1>
<p>We're glad to have you with us.</p>`}
</CodeSnippet>


In this template, `{{username}}` is a placeholder that will be replaced with actual data when we compile the template.


## Step 3: Configuring SendGrid

To send emails with SendGrid, you need to get an API key from your SendGrid dashboard. Once you have the API key, you can configure `SendGrid` in your Node.js application like this:


Create a file a file called `email.js` and setup `SendGrid`

<CodeSnippet language="js">
{`const sgMail = require('@sendgrid/mail');

sgMail.setApiKey(process.env.SEND_GRID_API_KEY);`}
</CodeSnippet>

> Note: I’ll be adding my `SEND_GRID_API_KEY` in the environment file. It is a best practice to avoid hardcoding your secret keys or API keys directly in your code. You can use packages like `dotenv` to easily manage environment variables in `Node.js`.

## Step 4: Compiling the Template and Sending the Email

Now that we have our Handlebars template and `SendGrid` set up, we can compile the template, fill it with data, and send it as an email. Here's how you can do it,

Within the same `email.js` file

<CodeSnippet language="js">
{`const Handlebars = require('handlebars');
const fs = require('fs');
const path = require('path');

// Load and compile the template
const templatePath = path.resolve('./templates', 'mail-template.hbs');
const html = fs.readFileSync(templatePath, 'utf8'); // reading with utf8 encoding
const template = Handlebars.compile(html);

// Create the email data
const emailData = {
    username: 'John Doe',
};

// Create the email
const msg = {
    to: 'test@example.com', // Change to your recipient
    from: 'test@example.com', // Change to your sender
    subject: 'Welcome Email',
    html: template(emailData),
};

// Send the email
sgMail
    .send(msg)
    .then(() => {
        console.log('Email sent');
    })
    .catch((error) => {
        console.error(error);
    });`}
</CodeSnippet>


So what are doing here is,

- We are reading the Handlebars template from a file,
- Compiling it into a function called `template`
- Calling this `template` function with the email data(the username which we added as a placeholder previously in the HTML) to create the HTML content of the email.

Finally, We send the email by calling SendGrid's `send` method with basic email information’s like from, to, subject and in the place of body, we are using our HTML that has be generated from the `template` function .


## Conclusion

Email communication is a crucial part of most web applications, and the ability to send custom, dynamic emails can significantly enhance user experience. By leveraging the power of Handlebars, a flexible and efficient templating engine. Coupling this with SendGrid's reliable mail delivery service makes the process of creating and sending these emails seamless and straightforward.

This setup is not only limited to welcome emails. You can extend it for various other use cases like sending password reset emails, notifications, newsletters, and more. The power of Handlebars templates allows you to be creative with how you communicate with your users.



Learn how to use the Handlebars template engine to create dynamic email templates, and how to send these emails using SendGrid in a Node.js application

Using Handlebars Templates with SendGrid in Node.js


Hi There! 👋

I have personally used `redux` and `redux-toolkit` in many projects. These libraries excel at what they are designed for, but the issue often lies in the `boilerplate code`.

Indeed, we need to write a substantial amount of boilerplate code to set things up, and the learning curve can be steep if you are just getting started with state management libraries.

Recently, I discovered a library called `Zustand` that has been the talk among many developers. I decided to give it a try in one of my side projects.

To be honest, it significantly reduced my development time, especially in setting up and using state.

**So, What is `Zustand`?**

It is a light weight `State Management Library` that can be used with any frontend JS technologies like React, Angular, Vue, etc.

> Note: Some features like hooks can be only used in react.  Basically, the implementation varies depending on the front-end technology you employ.

**Why Should You Consider Using It?**

Well, It is

- Small
- Fast
- Easy to Learn & Use
- Less Boilerplate Code (Compared to redux and redux toolkit)

Now, let's see how we can implement Zustand in React.


For this demonstration, we are going to build a simple app where you can add an item to a list and delete any item from the list.


## Step 1: 
Create a new React project, or you can also use your existing project.

## Step 2: 
Install Zustand

<CodeSnippet language="bash">
{`npm i zustand`}
</CodeSnippet>

## Step 3: 
Building the UI
We are going to have an input field and a list of items with a delete option.
Add the below code in `App.tsx`

<CodeSnippet language="ts">
{`import { useState } from "react";
import "./styles.css";

export default function App() {
  const [item, setItem] = useState<string>(""); // To Store the input value

  return (
    <div className="App">
      <input value={item} onChange={(event) => setItem(event.target.value)} />
      <button className="add-btn" onClick={()=> {}}>Add Item</button>
    </div>
  );
}`}
</CodeSnippet>


## Step 4: 
Creating Store with Zustand
Create a file called `store.ts`

<CodeSnippet language="ts">
{`import { create } from "zustand";

export interface IStore {
  items: string[];
  addItem: any;
  deleteItem: any;
}

export const useStore = create<IStore>((set) => ({
  items: [],
  deleteItem: (index: number) =>
    set((state: IStore) => {
      const existingItems = [...state.items];
      existingItems.splice(index, 1);

      return {
        ...state,
        items: existingItems
      };
    }),

  addItem: (value: string) =>
    set((state: IStore) => ({
      ...state,
      items: [...state.items, value]
    }))
}));`}
</CodeSnippet>

What I am doing here?

- Creating the structure of the store using an interface and naming it as `IStore`
- `Zustand` provides a `create` method which will generate the state to store values
- `items` will contain the list of inputs added from the UI. Initially, we set it with an empty array `[]`
- We define two methods, `addItem` to add an item and `deleteItem` to delete an item. Note that these methods should return the updated state value (similar to what we do in Redux)

Now the store can be used as a hook.
> Note I am following hooks naming convention, so naming it as `use[StoreName]`


## Step 5: 
Using the Store
Call the store hook in the component

<CodeSnippet language="ts">
{`import { useState } from "react";
import "./styles.css";
import { store } from "./store";

export default function App() {
  const [item, setItem] = useState<string>("");

  const { items, addItem, deleteItem } = store();

  return (
    <div className="App">
      <input value={item} onChange={(event) => setItem(event.target.value)} />
      <button className="add-btn" onClick={()=> addItem(item)}>Add Item</button>

      <div>
        {items.map((item: string, index: number) => (
          <p key={index}>{item} - 
            <span className="delete-btn" onClick={()=> deleteItem(index) }>
              delete
            </span>
          </p> 
        ))}
      </div>
    </div>
  );
}`}
</CodeSnippet>

Here,

- First, we are `destructuring` methods and `values` from the store
- Then, we are mapping the `addItem` method to the 'Add Item' button
- We loop through the list of stored items
- With each item, we add a 'delete' option and map the `deleteItem` method to it.

That's it, we have successfully set up state management, and it is ready to use.

See how simple it is? It certainly saves a lot of time. At least for me, it did.

## Final Result

<Img
  src="/gif/intro-to-zustand.gif"
  alt="final-output"
/>

# Conclusion

In this post, you have learned what Zustand is and how you can implement it with React. In conclusion, Zustand is another state management library, like Redux and Redux Toolkit. We can't say that this is the best library for state management. Each library has its own purpose, so choose based on your use case.

Learn how to use Zustand, that helps to manage your frontend app state writting less code.

Introduction to Zustand: A Lightweight State Management Library



You might often face a scenario where you need to center an element relative to its parent element.

So, how is it done?

Most solutions I've encountered on the internet employ `Flex` properties or make use of `absolute` positioning. There may be other solutions as well, but these are the ones I've primarily seen.

Aligning a child element with `Flex` is simple:

<CodeSnippet language="css">
{`
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
     /*  child styles */
}
`}
</CodeSnippet>

Aligning a child element using `absolute` positioning is also straightforward, although many developers don't understand how it works.

In this post, I'll dissect the properties of absolute positioning to help you understand how it operates.

Let’s assume we have a parent element `(a div)`:
<CodeSnippet language="html">
{`
<div class="parent"></div>
`}
</CodeSnippet>

We then add an image to the parent element, which becomes the child:
<CodeSnippet language="html">
{`
<div class="parent">
  <img class="child" src="" />
</div>
`}
</CodeSnippet>

We add height and width properties to make the parent bigger, along with a few other styles. We also make the child smaller so that it's easier to see how this works:
<CodeSnippet language="css">
{`
.parent {
  height: 300px;
  width: 300px;
  border: 1px solid black;
}

.child {
  height: 100px;
  width: 100px;
}
`}
</CodeSnippet>

Now the result looks like this, based on the code we've written so far:
<Img
  src="/images/visuals/css-absoulte-centering-element-1.png"
  alt="first-output"
/>


To move the `child element (image)` to the center of the parent, we must:
- Inform the child element of its parent.
    - This step is crucial because if we simply make the child element absolute, it will consider the body element (the entire window) as its parent by default. We don't want that; we need to align the child in relation to its parent (div element).
    - To let the child element know its parent, add `position: relative` property to the parent.
- Then, make the child absolute:
<CodeSnippet language="css">
{`
.parent {
  height: 300px;
  width: 300px;
  border: 1px solid black;
  position: relative;
}

.child {
  height: 100px;
  width: 100px;
  position: absolute;
}
`}
</CodeSnippet>
- To center the child element, add `50%` from the `top` and `left` of the parent:
<CodeSnippet language="css">
{`
.parent {
  height: 300px;
  width: 300px;
  border: 1px solid black;
  position: relative;
}

.child {
  height: 100px;
  width: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
}
`}
</CodeSnippet>
Let's examine the output:
<Img
  src="/images/visuals/css-absoulte-centering-element-2.png"
  alt="second-output"
/>

Even after applying the top and left values, the image doesn't center to the parent as expected.

However, it actually is `centered`.

If you observe the output, the `top left corner of the image` is placed in the center of the parent. To correct this, we need to move the child `-50%` in `X` and `Y` directions:

<CodeSnippet language="css">
{`
.parent {
  height: 300px;
  width: 300px;
  border: 1px solid black;
  position: relative;
}

.child {
  height: 100px;
  width: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) /* translate(x, y) */
}
`}
</CodeSnippet>

Note that the `top` and `left` CSS properties will move the child in relation to the parent’s `top` and `left`.

However, `translate` moves the element up and to the left by 50% of its own height and width.

Now the center of the image will be moved and placed in the center of the parent element.

Here's the final output:
<Img
  src="/images/visuals/css-absoulte-centering-element-3.png"
  alt="final-output"
/>

## Summary

When it comes to centering an element within its parent, CSS provides multiple options, such as using `flex` properties or `absolute` positioning. This post specifically delved into the workings of `absolute` positioning.

To center a child element using `absolute` positioning:

1. Establish the parent-child relationship between the elements. This is crucial because an element with absolute positioning will consider the entire window (body element) as its parent by default. By setting the parent's position as `relative`, we can ensure that the child element aligns itself relative to the parent, not the whole window.
2. Make the child element `absolute`, which means it's positioned relative to the nearest positioned ancestor— in this case, the parent with `relative` positioning.
3. Apply `top: 50%;` and `left: 50%;` to the child, which moves the child element's top left corner to the center of the parent.
4. Lastly, use `translate(-50%, -50%)` to move the child element up and to the left by 50% of its own height and width. This adjustment aligns the child element's center with the parent's center, achieving the desired centering effect.

Remember, while `top` and `left` move the child with respect to the parent's top left corner, `translate` adjusts the position based on the child's own dimensions.

By following these steps, you can successfully center a child element within a parent element using CSS absolute positioning and the `translate` function.




You'll learn how css translate works behind the scene when centering element with absolute positioning

CSS Absolute Positioning: How Translate Works When Centering The Element




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