Forem: abhijitdotsharma

Production Essentials: Logging in NextJS 13

abhijitdotsharma — Tue, 29 Aug 2023 16:58:37 +0000

How to save logs in NextJS server components ??

Logging is a crucial part before deploying any application to production as console.log() doesn't cut work in the server, even if it did we have better tools :)

At the end of this article, you will learn how to save your application logs to either your NextJS project or to your Linux Server log file (/var/log)

Step 0 : Assuming you have a basic next project ( Nextjs 13 ) set up

npm install winston

Step 1: Create a file called `logger.js`.

It should be in the root of your project. For example

PROJECT_NAME
|_ app 
|_ public
|_ logger.js 👈

Add the following code in logger.js file

// logger.js
import winston from "winston";
const { combine, timestamp, json } = winston.format;

const logger = winston.createLogger({
  level: "info",
  format: combine(timestamp(), json()),
  transports: [
    new winston.transports.File({ 
        filename: "app.log"
    }),
  ],
});

export { logger };

What you need to focus on are three things

level : there are different log levels, and we want info and above
format : The format at which our logs will be stored
transports: This is important, we use it to transport our logs to a file.

Step 2: Create a `app.log` file in the root of your project.

PROJECT_NAME
|_ app 
|_ public
|_ logger.js
|_ app.log 👈

Moving on, we will try to use this logger that we have created on NextJS Server Components and API routes and check if our logs are saved or not.

Step 3: Use our logger in a Server Component

Create a home folder inside app folder
Create a page.jsx file inside home

PROJECT_NAME
|_ app
|   |_ home 👈
|        |_ page.jsx 👈
|
|
|_ public
|_ logger.js
|_ app.log

// app/home/page.jsx
import { logger } from "@/logger"; // our logger import

export default function HomePage() {
  logger.info("Home Page called "); // calling our logger
  return (
    <div>
      <h3>Home page</h3>
    </div>
  );
}

Now check you app.log file, If you get a log with message "Home Page Called" you have successfully configured logging.

Step 4: Use our logger in an API route

Next JS 13 lets us write our backend in api folder, let's write a basic GET endpoint that returns "hello" as a response

Create a file api/test/route.js inside app

PROJECT_NAME
|_ app
|   |_ api
|   |    |_ test 👈
|   |        |_ route.js 👈
|   |_ home
|   
|_ public
|_ logger.js
|_ app.log


import { NextRequest, NextResponse } from "next/server";
import { logger } from "@/logger"; // our logger import

export async function GET(req: NextRequest) {

  logger.info(`GET /api/gethome ${req}`);

  return NextResponse.json({
    message: "success",
    status: 200,
  });
}

Now from your browser ( Assuming you are on localhost:3000) go to /api/test
Now check the logs in app.log.
Logging for API's are particularly very powerful because we can log request and request parameters which we can check to debug issues that may arise in our production application

Logging in Linux or EC2

Now suppose you have your project running on AWS EC2 or other Linux servers, and you want to save your logs, not on your next project but on the servers log folder

You would need to do the following steps

Change the logger transport to point to your Linux log


import winston from "winston";
const { combine, timestamp, json } = winston.format;

const logger = winston.createLogger({
  level: "info",
  format: combine(timestamp(), json()),
  transports: [
    new winston.transports.File({
      filename: "/var/log/NEXT_APP/app.log", 👈
    }),
  ],
});

export { logger };

Create a directory in your server

With the same folder name as in your logger transports filename

sudo mkdir /var/log/NEXT_APP/app.log

NOTE: your logger now has the file location, but it still doesn't have the permission to write in this file. So we will have to give the log file appropriate permission

sudo chmod a+w /var/log/NEXT_APP/app.log

Logging is a very good topic to dive deep into, and if you have more time do read about log levels, log rotation and other topics.

If you think this article needs some edits, or additions feel free to comment. Thanks !

Build and publish a Component Library - React, TypeScript, Storybook

abhijitdotsharma — Sun, 26 Feb 2023 14:35:09 +0000

Introduction

At the end of this article, you will create your own custom React Component Library, and publish it to npm which will let others use it via a simple npm install.

Why?

React took over modern web development due to its component driven architecture.

Components can be the smallest atomic part of a huge application, and we tend to reuse them often. For example, a Button is used everywhere, Login page, Signup page, for CTA (Call to Action) to name a few.

These reusable components make up Pages which in turn make up an Application. Having a component library, has many advantages

Consistent styling
Speed of development
Maintainability

Today, we will learn how modern Component Libraries (like Chakra UI, Material UI) can be built and used by us for our projects.

Tools and Knowledge Required

VS Code (or any Code editor you prefer)
NPM
Git
React
TypeScript
Storybook

Let's start building 🛠️

Building a skeleton 🩻

Make an empty directory or cd into an existing one

mkdir abhi-cl-blog  -> cd abhi-cl-blog

Initialize the project

npm init

This will create a package.json, just click enter and move ahead as we will edit them later on. The image below will be similar to the package.json generated for you

Initialize git

git init

Make atomic commits when learning/building for the first time, it’ll make use go back/realize the step at which the error happened

Install React and TypeScript to get started

npm install react react-dom typescript @types/react --save-dev

--save-dev installs them as devDependency (read more)

Note: Since we will be publishing this library to npm for others to use, we will have to ensure that users when using our library have the correct version of dependencies, so we save react and react-dom as peerDependencies.

Create a .gitignore file, to exclude node_modules and other files later on

Create a commit at this stage, you can revert back to this stage if you get some errors later, instead of yelling at your pc and restarting the tutorial 🙂

Building our first component

To create our component, make the following structure

-
├── src
│   ├── components
|   │   ├── Button
|   |   │   ├── Button.tsx
|   |   │   └── index.ts
|   │   └── index.ts
│   └── index.ts
├── package.json
└── package-lock.json

We are building a library and want it to be easy for users to consume/import our components, hence we are creating index files at each level (read more here)

There are three index.ts files, double check it before moving ahead.

Initialize and configure TypeScript

npx tsc --init

This will create a tsconfig.json file in the root of our project, and it has default configurations for TypeScript, some of which we will modify.

{
  "compilerOptions": {
     "target": "es2016",
     "jsx": "react",
     "module": "ESNext",
     "moduleResolution": "node",
     "declaration": true, 
     "emitDeclarationOnly": true,
     "outDir": "dist", 
     "declarationDir": "types",
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "strict": true, 
     "skipLibCheck": true

  }
}

This will be our tsconfig.json file, copy it in your project

What each do can be viewed in my gist

And if you want to learn more about tsconfig

Build Button.tsx inside src/components/Button.

Button.tsx

import React from "react";


export interface ButtonProps{
    label: string;

}

const Button = ( {label}: ButtonProps) => {
    return <button>{label}</button>
}

export default Button;

Here we are defining an interface for the props that our Button will receive.

And then we are building a simple <Button /> component that takes label as a prop and returns a html button element with the passed label prop.

We are going to publish our Library with a single component, and confirm that it works, then we can add more components as we like later on.

We will now export our Button.

1st export: src/components/Button/index.ts

// This is importing Button and exporting it directly
// Syntactic sugar
export { default } from "./Button";

2nd export: src/components/index.ts

export { default as Button } from "./Button";

3rd export: src/index.ts

export * from './components';

If you want to compare, check out this commit to compare your files

Want to learn more about the above exports? Check this answer on StackOverflow

Adding Rollup

Rollup is a tool similar to webpack, and we will be using it to bundle our library to then publish to npm.

Note: Before we start with this process, it is important to remember that these bundling tools use a lot of packages, which get updated frequently so it’s possible that you might run into errors.
I will try to explain what each install does, so you can try to fix if you are stuck. And you can also comment here if you find something, and I’ll try to fix it.

step 1:

npm install --save-dev tslib

step 2:

npm install rollup @rollup/plugin-node-resolve 
@rollup/plugin-typescript @rollup/plugin-commonjs 
rollup-plugin-dts --save-dev

@rollup/plugin-node-resolve : Allows Rollup to resolve dependencies of the library, making it possible to import modules from external packages.
@rollup/plugin-typescript : Needs tslib as a peer dependency hence, step 1. Used to transpile TypeScript code in the library.
@rollup/plugin-commonjs : Convert CommonJS modules to ES6.
rollup-plugin-dts : Used to generate a .d.ts file that provides TypeScript type definitions for the library. This is important for TypeScript users, as it allows them to use the library with full type safety.

We will now create a configuration file in our project root.

rollup.config.mjs

import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";
import dts from "rollup-plugin-dts";

import packageJson from "./package.json" assert { type: "json" };


export default [
    {
        input: "src/index.ts",
        output: [
            {
                file: packageJson.main,
                format: "cjs",

            },
            {
                file: packageJson.module,
                format: "esm",

            },
        ],
        plugins: [
            resolve(),
            commonjs(),
            typescript({tsconfig: "./tsconfig.json"}),

        ],
    },
    {
        input: "dist/esm/types/index.d.ts",
        output: [{ file: "dist/index.d.ts", format: "esm" }],
        plugins: [dts()],
    },

];

The above code block is a Rollup configuration file, which is used to bundle a React component library created with Typescript.

First Configuration Object
input is our entry point for our library, i.e. index.ts file in the src directory which exports all of our components.

We use both ESM and commonJS modules to distribute our library so users can choose which type to consume.

The 3 plugins that we are invoking, determine the actual JavaScript code generated

Second Configuration Object
It determines how types in our library are distributed and it uses dts plugin to do it.

We will now update main and module in our package.json

//package.json
{
  "name": "abhi-cl-blog", // 👈name it what you want
  "version": "0.0.1", 
  "description": "A Component Library for Building React Applications faster",
  "scripts": {
// 👇👇This is what you will run to create a library
    "rollup-build-lib": "rollup -c"
  },
  "author": "Abhijit Sharma",
  "license": "ISC",
  "devDependencies": {
    "@rollup/plugin-commonjs": "^24.0.1",
    "@rollup/plugin-node-resolve": "^15.0.1",
    "@rollup/plugin-typescript": "^11.0.0",
    "@types/react": "^18.0.27",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "rollup": "^3.14.0",
    "rollup-plugin-dts": "^5.1.1",
    "tslib": "^2.5.0",
    "typescript": "^4.9.5"
  },
 "peerDependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
//new additions 👇👇
  "main": "dist/cjs/index.js",
  "module": "dist/esm/index.js",
  "files": [
    "dist"
  ],
  "types": "dist/index.d.ts"
}

"main" - Output path for commonJS modules.
"module" - Output path for es6 modules.
"files" - We have defined the output directory for our entire library.
"types" - We have defined the location for our library's types.
"scripts" - we will use this to run our scripts. eg: npm run rollup-build-lib

Run the rollup script:

npm run rollup-build-lib

You will notice a new folder appear, named dist

Publishing our Library to npm

Create an npm account, ignore if you already have one
In root of your project directory, run npm login
Update your package.json to include correct information of the name, version and description.

keep the version number 0.0.1 initially
Run npm publish

Congratulations🥳, you just published your component library to npm.

If you are not able to, there are multiple tutorials, and videos that explain this. This one is great yt

Testing our Library in a project

Create a new React app(using CRA, Vite...)
Open the new app
Install your library from npm

npm install <YOUR_PACKAGE_NAME>
// npm install abhi-cl-blog

Let us use our <Button/> component in App.tsx

import React from "react";
import { Button } from "YOUR_PACKAGE_NAME";
// import {Button} from "abhi-cl-blog";

function App() {
  return <Button label="Building Stuff is fun"/>;
}

export default App;

Save it and restart the app, we see our Component working as intended.

Pat yourself! You just built a working component library, which can now be used by everyone 🙌

You can now leave the tutorial if you want to continue yourself, as the next part will involve us learning how to add

CSS
Storybook

Adding CSS

If we want our components to have some styling, we have to use CSS.

Create a button.css file inside the Button directory src/components/Button/button.css

button.css

.btn{
   background-color: blueviolet;
}

Use the btn class in our Button.tsx.

import React from "react";
import "./button.css" // 👈new addition

export interface ButtonProps{
    label: string;

}

const Button = ({label}: ButtonProps) => {
    // btn class added 👇👇
    return <button className="btn">{label}</button>
}

export default Button;

This seems like it will work, but the import "./button.css" will not be understood by Rollup, hence won't be used. We have to add some more configurations to make Rollup understand how to process what we are writing.

npm install postcss rollup-plugin-postcss —save-dev

rollup-plugin-postcss is used to bundle the CSS files into the final build, And postcss itself is used to transform the CSS to make it compatible with different browsers (will be used when we work with tailwind).

Update our rollup config

rollup.config.mjs

import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";
import dts from "rollup-plugin-dts";
import packageJson from "./package.json" assert { type: "json" };

import postcss from "rollup-plugin-postcss"; //👈 new

export default [
    {
        input: "src/index.ts",
        output: [
            {
                file: packageJson.main,
                format: "cjs",

            },
            {
                file: packageJson.module,
                format: "esm",

            },
        ],
        plugins: [
            resolve(),
            commonjs(),
            typescript({tsconfig: "./tsconfig.json"}),
          // 👇 new
            postcss({
                plugins: []
              })
        ],
    },
    {
        input: "dist/esm/types/index.d.ts",
        output: [{ file: "dist/index.d.ts", format: "esm" }],
        plugins: [dts()],
        external: [/\.(css|less|scss)$/], //👈 new
    },

];

Now we can republish (or update) our package.

update the version number in package.json to 0.0.2

npm run rollup-build-lib
num publish

Test this in your demo-app again, to see that the css is now being applied.

Optimize using terser

This is an optional step, just to make our bundle size smaller.

npm install --save-dev @rollup/plugin-terser rollup-plugin-peer-deps-external

With this installed, we update our rollup config.

rollup.config.mjs

import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";
import dts from "rollup-plugin-dts";
import packageJson from "./package.json" assert { type: "json" };

import postcss from "rollup-plugin-postcss";

// 👇new imports
import terser from "@rollup/plugin-terser";
import peerDepsExternal from "rollup-plugin-peer-deps-external";

export default [
    {
      input: "src/index.ts",
      output: [
        {
          file: packageJson.main,
          format: "cjs", 
        },
        {
          file: packageJson.module,
          format: "esm",
        },
      ],
      plugins: [
        peerDepsExternal(), // 👈 new line
        resolve(),
        commonjs(),
        typescript({ tsconfig: "./tsconfig.json" }),
        postcss({
          plugins: []
        }),
        terser(), // 👈 new line
      ],
    },
    {
      input: "dist/esm/types/index.d.ts",
      output: [{ file: "dist/index.d.ts", format: "esm" }],
      plugins: [dts()],
      external: [/\.(css|less|scss)$/],
    },
  ];

Run npm run rollup-build-lib to create updated dist
Update the version number in package.json
Run npm publish to update the library

Integrating Storybook

Storybook is a powerful tool for developing and testing components in isolation. It allows to build and view your components in a sandbox environment, without having to worry about the rest of your application. This makes it much easier to iterate on your components and ensure that they are working correctly before integrating them into your larger application.

Additionally, Storybook provides a great way to document your components, making it easy for other developers to understand how to use them. Overall, Storybook is an essential tool for any developer building a component library or working with reusable Ul components.

In essence, storybook will let us test our Button without us having to create a react app.

In the root of your project run,

npx storybook init

Storybook will detect our project is in react, how? (Google)

You will notice few new folders created by storybook .storybook and src/stories.
Delete the src/stories directory as we will learn how to create our own stories.

Let's create our story, create a file in the src/components/Button directory named Button.stories.tsx

src/components/Button/Button.stories.tsx

import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import Button from './Button';

// You can learn about this: https://storybook.js.org/docs/react/writing-stories/introduction

export default { 
    title: 'Button',
    component: Button,
} as ComponentMeta<typeof Button>;

const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />

export const Primary = Template.bind({});
Primary.args = {
    label: "Primary"
}

export const Secondary = Template.bind({})
Secondary.args = {
    label: "Secondary"
}

There are two basic levels of organization in Storybook:
The component and its child stories. Think of each story as a permutation of a component.
You can have as many stories per component as you need.

Component (Button)
Story (Primary Button)
Story (Secondary Button)
Story (Large Button)

export default defines our button that will appear in Storybook

Template and Template.bind is a really great concept, which you can have a look here

Let us run storybook

npm run storybook

If you get some errors, don't stress and try to read through the error and try to fix it as these tools get updated frequently.

If it runs well, you will see this

This is just the beginning, and you would love it if you read more about storybook through its documentation (they even have some great yt videos).

Final Thoughts

Great job on going through this article, this article exposes you to a lot of new concepts like

Playing with config files
Bundling you own library
Publishing to npm
Making atomic commits
Storybook

These are all great learning experiences, so congratulations 🥳.

Now, you are ready to build your own component library, and publish it to the world.

If you liked this article and you think this will help other's out there, feel free to share it. Comment if you feel something can be improved or added.

If you like to read more :

Rest and Spread

You can follow me on LinkedIn, Twitter🐦

JavaScript Spread and Rest Operators: An Essential Guide for Beginners

abhijitdotsharma — Thu, 29 Dec 2022 10:49:33 +0000

Two JavaScript operators with same syntax but totally different working.

Spread

Spread operator(...) is a tool in modern JavaScript that is used when working with arrays, objects, and function calls. Spread allows objects and iterables (arrays for now) to be unpacked.

Too techie? Spread helps us expand iterables into individual elements.

Spread with Arrays

Using spread with arrays, is something that you'll see almost every time. So focus!

const tools = ['hammer', 'screwdriver']
const otherTools = ['wrench', 'saw']

const allTools = [...tools, ...otherTools]
console.log(allTools)

//Output : ['hammer', 'screwdriver', 'wrench', 'saw']

In the example above, we see that we can unpack elements from array into another array.
This is super useful in cases, where we want to achieve immutability, like in React Applications.

Spread with Objects

Like arrays, spread is used to copy and update objects. This was earlier done using Object.assign(), but spread make it simple.

const ogObject = { language: 'english', darkMode: false }
const newObject = {...ogObject}

console.log(newObject)
//Output: {language: 'english', darkMode: false}

Similar to arrays, this creates a shallow copy, and the nested objects inside (if there are any) will still be passed by reference.

Spread shines when we have to add or modify properties on an existing object without mutating it.

const player = {
    id: 2,
    name: 'Abhi',
}

const updatedPlayer = { ...player, isLoggedIn: true }

console.log(updatedPlayer)
//Output: {id: 2, name: 'Abhi', isLoggedIn: true}

One Important concept to remember with spread and nested objects is, when copying object, remember to spread the nested objects as well.

const player = {
    id: 2,
    name: 'Abhi',
    team: { 
       name: 'Avengers',
       city: 'LA',
    }
}

If the player is now the leader of the team and you want to update that inside the team property, which itself is an object.
Doing this is wrong

const updatedPlayer = { ...player, team: {position: 'captain'} }

This will result in

updatedPlayer -> 
id: 2,
name: 'Abhi',  
team: { position: 'captain' }

See how the old fields are overwritten, to do it without mutating we have to

const updatedPlayer = { 
    ...player, //copy entire player Object
    team: { 
      ...player.team, //copy entire player.team Object
      position: 'captain',//and then update/add a property on top of old properties
    }
}

Spread in Function Calls

Let's define a simple function that take 3 parameters and adds them

function addThree(a, b, c){
    return a + b + c ;
}

To pass the values individually to the function call, you can do this:

addThree(2, 4, 6)
//output
//10👌

Suppose you have an array that has the values that you want to pass. You can do something like this:

const nums = [2, 4, 5 ]
addThree(nums[0], nums[1], num[2])

But this is not very efficient. Instead, you can use the spread operator to spread the elements of the nums array as individual arguments to the addThree function:

addThree(...nums)

This allows us to pass the values individually, shortening our code and increasing its readability

Note: The spread operator creates a shallow copy of an array or object, meaning that any top-level properties will be cloned, but any nested objects or arrays will still be passed by reference. This is important to keep in mind when using the spread operator to make copies of objects that contain nested objects or arrays.

Rest

The rest operator (...) is used to represent an indefinite number of arguments as an array. It is usually used in function definitions to allow the function to accept any number of arguments.

function sum(...nums) {
  let result = 0;
  for (const num of nums) {
    result += num;
  }
  return result;
}

console.log(sum(1, 2, 3, 4));
// Output: 10

This was done earlier using the arguments variable, but it cannot be used with newer arrow functions and additionally arguments is not a true array so map and filter doesnt apply on it.

Rest to destructure Arrays and Objects

Destructuring Arrays with Rest
Here's an example of using the rest operator to destructure an array:

const numbers = [1, 2, 3, 4, 5];
const [first, second, ...others] = numbers;

console.log(first);
// Output: 1
console.log(second);
// Output: 2
console.log(others);
// Output: [3, 4, 5]

Destructuring Objects with Rest
You can also use the rest operator to destructure objects. Here's an example:

const person = {
  name: 'John',
  age: 30,
  occupation: 'developer',
  location: 'New York'
};

const { name, age, ...otherInfo } = person;

console.log(name);
// Output: 'John'
console.log(age);
// Output: 30
console.log(otherInfo);
// Output: { occupation: 'developer', location: 'New York' }

In the example above, the rest operator is used to assign the remaining properties of the person object to the otherInfo variable.

tl;dr:

While the rest operator collects an indefinite number of arguments into an array, the spread operator extracts elements from an array (or properties from an object) and expands them into individual elements or properties.

Be sure not to confuse function parameters and function arguments:

function foo (...bar) {} // rest
foo(...baz) // spread

There's also rest in destructuring, which should not be confused with literal spreading:

const { a, b, ...others } = { a:1, b:2, c:3, d:4, e:5 } // rest
const aToE = { a, b, ...others } // spread

Destructuring is used to create varibles from array items or object properties.
Spread syntax is used to unpack iterables such as arrays, objects, and function calls.

Overall, the spread and rest operators are useful tools for working with arrays, objects, and function arguments in JavaScript. They can help you write more concise and readable code. Visit MDN if you ever want to learn more

follow me on twitter , LinkedIn

Forem: abhijitdotsharma

Production Essentials: Logging in NextJS 13

How to save logs in NextJS server components ??

Step 0 : Assuming you have a basic next project ( Nextjs 13 ) set up

Step 1: Create a file called logger.js.

Step 2: Create a app.log file in the root of your project.

Step 3: Use our logger in a Server Component

Step 4: Use our logger in an API route

Logging in Linux or EC2

Change the logger transport to point to your Linux log

Create a directory in your server

Build and publish a Component Library - React, TypeScript, Storybook

Introduction

Why?

Tools and Knowledge Required

Building a skeleton 🩻

Building our first component

Adding Rollup

Publishing our Library to npm

Testing our Library in a project

Adding CSS

Optimize using terser

Integrating Storybook

Final Thoughts

JavaScript Spread and Rest Operators: An Essential Guide for Beginners

Spread

Spread with Arrays

Spread with Objects

Spread in Function Calls

Rest

Rest to destructure Arrays and Objects

tl;dr:

Step 1: Create a file called `logger.js`.

Step 2: Create a `app.log` file in the root of your project.