<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Luiz Calaça</title>
    <description>The latest articles on DEV Community by Luiz Calaça (@luizcalaca).</description>
    <link>https://dev.to/luizcalaca</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F786473%2F70e39b73-4db4-45a8-b819-38d570de68b6.jpeg</url>
      <title>DEV Community: Luiz Calaça</title>
      <link>https://dev.to/luizcalaca</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/luizcalaca"/>
    <language>en</language>
    <item>
      <title>Custom error handling in a REST API using TypeScript, Express.js, Joi validation, and object-oriented programming</title>
      <dc:creator>Luiz Calaça</dc:creator>
      <pubDate>Sat, 27 Jul 2024 12:06:56 +0000</pubDate>
      <link>https://dev.to/luizcalaca/custom-error-handling-in-a-rest-api-using-typescript-expressjs-joi-validation-and-object-oriented-programming-3p5m</link>
      <guid>https://dev.to/luizcalaca/custom-error-handling-in-a-rest-api-using-typescript-expressjs-joi-validation-and-object-oriented-programming-3p5m</guid>
      <description>&lt;h2&gt;
  
  
  Hi, Devs!
&lt;/h2&gt;

&lt;p&gt;Building a robust and maintainable REST API requires careful consideration of error handling, validation, and structure. In this article, we'll explore how to set up a custom error handling mechanism in a REST API using TypeScript, Express.js, Joi for validation, and principles of object-oriented programming (OOP). We'll structure our project as follows:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Scructure:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;---src&lt;br&gt;
-----middlewares&lt;br&gt;
--------ErrorHanlder.ts&lt;br&gt;
-----models&lt;br&gt;
--------User.ts&lt;br&gt;
-----repository&lt;br&gt;
--------UserRepository.ts&lt;br&gt;
-----routes&lt;br&gt;
--------UserRouter.ts&lt;br&gt;
-----controllers&lt;br&gt;
--------UserController.ts&lt;br&gt;
-----services&lt;br&gt;
--------UserService.ts&lt;br&gt;
-----validations&lt;br&gt;
--------UserValidation.ts&lt;br&gt;
---app.ts&lt;br&gt;
---server.ts&lt;/p&gt;

&lt;h2&gt;
  
  
  Setting Up the Project
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;mkdir rest-api
cd rest-api
npm init -y
npm install express typescript @types/node @types/express ts-node-dev
npx tsc --init
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Middleware for Error Handling
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// src/middlewares/ErrorHandler.ts
import { Request, Response, NextFunction } from 'express';

class ErrorHandler extends Error {
  statusCode: number;
  message: string;

  constructor(statusCode: number, message: string) {
    super();
    this.statusCode = statusCode;
    this.message = message;
  }
}

const handleError = (err: ErrorHandler, req: Request, res: Response, next: NextFunction) =&amp;gt; {
  const { statusCode, message } = err;
  res.status(statusCode).json({
    status: 'error',
    statusCode,
    message,
  });
};

export { ErrorHandler, handleError };

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  User Model
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// src/models/User.ts
export interface User {
  id: number;
  name: string;
  email: string;
}

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  User Repository
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// src/repository/UserRepository.ts
import { User } from '../models/User';

class UserRepository {
  private users: User[] = [];

  findAll(): User[] {
    return this.users;
  }

  findById(id: number): User | undefined {
    return this.users.find(user =&amp;gt; user.id === id);
  }

  create(user: User): User {
    this.users.push(user);
    return user;
  }
}

export default new UserRepository();

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  User Service
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// src/services/UserService.ts
import UserRepository from '../repository/UserRepository';
import { User } from '../models/User';
import { ErrorHandler } from '../middlewares/ErrorHandler';

class UserService {
  getAllUsers(): User[] {
    return UserRepository.findAll();
  }

  getUserById(id: number): User | undefined {
    const user = UserRepository.findById(id);
    if (!user) {
      throw new ErrorHandler(404, 'User not found');
    }
    return user;
  }

  createUser(user: User): User {
    const { error } = userSchema.validate(user);
    if (error) {
      throw new ErrorHandler(400, error.details[0].message);
    }
    return UserRepository.create(user);
  }
}

export default new UserService();


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  User Validation
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// src/validations/UserValidation.ts
import Joi from 'joi';

const userSchema = Joi.object({
  id: Joi.number().required(),
  name: Joi.string().required(),
  email: Joi.string().email().required(),
});

export { userSchema };

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  User Controller
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// src/controllers/UserController.ts
import { Request, Response, NextFunction } from 'express';
import UserService from '../services/UserService';
import { ErrorHandler } from '../middlewares/ErrorHandler';

class UserController {
  getAllUsers(req: Request, res: Response, next: NextFunction) {
    try {
      const users = UserService.getAllUsers();
      res.json(users);
    } catch (error) {
      next(error);
    }
  }

  getUserById(req: Request, res: Response, next: NextFunction) {
    try {
      const user = UserService.getUserById(parseInt(req.params.id));
      res.json(user);
    } catch (error) {
      next(error);
    }
  }

  createUser(req: Request, res: Response, next: NextFunction) {
    try {
      const user = UserService.createUser(req.body);
      res.status(201).json(user);
    } catch (error) {
      next(error);
    }
  }
}

export default new UserController();


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  User Routes
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// src/routes/UserRouter.ts
import { Router } from 'express';
import UserController from '../controllers/UserController';

const router = Router();

router.get('/users', UserController.getAllUsers);
router.get('/users/:id', UserController.getUserById);
router.post('/users', UserController.createUser);

export default router;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Application Entry Point
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// src/app.ts
import express from 'express';
import UserRouter from './routes/UserRouter';
import { handleError } from './middlewares/ErrorHandler';

const app = express();

app.use(express.json());
app.use('/api', UserRouter);
app.use(handleError);

export default app;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Server Setup
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// src/server.ts
import app from './app';

const PORT = process.env.PORT || 3000;

app.listen(PORT, () =&amp;gt; {
  console.log(`Server running on port ${PORT}`);
});

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;By structuring our project using TypeScript, Express.js, Joi, and OOP principles, we achieve a clean and maintainable codebase. The custom error handling middleware provides a consistent way to manage errors across the application, while the validation logic ensures data integrity. This setup can serve as a solid foundation for more complex applications.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Contacts&lt;/strong&gt;&lt;br&gt;
Email: &lt;a href="mailto:luizcalaca@gmail.com"&gt;luizcalaca@gmail.com&lt;/a&gt;&lt;br&gt;
Instagram: &lt;a href="https://www.instagram.com/luizcalaca" rel="noopener noreferrer"&gt;https://www.instagram.com/luizcalaca&lt;/a&gt;&lt;br&gt;
Linkedin: &lt;a href="https://www.linkedin.com/in/luizcalaca/" rel="noopener noreferrer"&gt;https://www.linkedin.com/in/luizcalaca/&lt;/a&gt;&lt;br&gt;
Twitter: &lt;a href="https://twitter.com/luizcalaca" rel="noopener noreferrer"&gt;https://twitter.com/luizcalaca&lt;/a&gt;&lt;/p&gt;

</description>
      <category>typescript</category>
      <category>javascript</category>
      <category>tutorial</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Good Practices Using Node.js + Sequelize with TypeScript</title>
      <dc:creator>Luiz Calaça</dc:creator>
      <pubDate>Fri, 26 Jul 2024 19:19:18 +0000</pubDate>
      <link>https://dev.to/luizcalaca/good-practices-using-nodejs-sequelize-with-typescript-275b</link>
      <guid>https://dev.to/luizcalaca/good-practices-using-nodejs-sequelize-with-typescript-275b</guid>
      <description>&lt;p&gt;Node.js combined with Sequelize offers a powerful stack for building robust backend applications. When using TypeScript, you can leverage static typing to catch errors at compile time, enhancing code quality and maintainability. This article will guide you through some best practices for integrating Node.js, Sequelize, and TypeScript effectively.&lt;/p&gt;

&lt;h2&gt;
  
  
  Setting Up Your Project
&lt;/h2&gt;

&lt;p&gt;First, ensure you have Node.js installed on your system. Then, initialize a new project and install the necessary dependencies:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;mkdir my-project &amp;amp;&amp;amp; cd my-project
npm init -y
npm install express sequelize typescript ts-node @types/node @types/express --save-dev
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Create a tsconfig.json file to configure TypeScript options:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Defining Models with Sequelize
&lt;/h2&gt;

&lt;p&gt;Sequelize models define the structure of your database tables. With TypeScript, you can benefit from type safety and autocompletion. Here's how to define a simple model:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// src/models/User.ts
import { Model, DataTypes } from 'sequelize';
import { Sequelize } from 'sequelize-typescript';

export class User extends Model {
  public id!: number;
  public name!: string;
}

const sequelize = new Sequelize('database', 'username', 'password', {
  host: 'localhost',
  dialect: 'postgres' // or 'mysql', 'sqlite', etc.
});

User.init({
  id: {
    type: DataTypes.INTEGER.UNSIGNED,
    autoIncrement: true,
    primaryKey: true
  },
  name: {
    type: DataTypes.STRING,
    allowNull: false
  }
}, {
  tableName: 'users',
  sequelize
});

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Creating Express Routes
&lt;/h2&gt;

&lt;p&gt;Express routes handle HTTP requests. By defining them in TypeScript, you get the benefits of static typing and better tooling support:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// src/routes/users.ts
import express, { Request, Response } from 'express';
import { User } from '../models/User';

const router = express.Router();

router.get('/', async (req: Request, res: Response) =&amp;gt; {
  const users = await User.findAll();
  res.json(users);
});

export default router;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Middleware and Error Handling
&lt;/h2&gt;

&lt;p&gt;Middleware functions can be typed to ensure they receive the correct parameters and return the expected values. Error handling middleware should also be properly typed:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// src/middleware/errorHandler.ts
import { NextFunction, Request, Response } from 'express';

export function errorHandler(err: Error, req: Request, res: Response, next: NextFunction) {
  console.error(err.stack);
  res.status(500).send('Something broke!');
}

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Don't forget to add this middleware to your Express app:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// src/app.ts
import express from 'express';
import errorHandler from './middleware/errorHandler';
import usersRouter from './routes/users';

const app = express();
app.use(express.json());
app.use('/api/users', usersRouter);
app.use(errorHandler);

const PORT = process.env.PORT || 3000;
app.listen(PORT, () =&amp;gt; console.log(`Server running on port ${PORT}`));

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Integrating &lt;strong&gt;Node.js, Sequelize, and TypeScript&lt;/strong&gt; allows you to build scalable and maintainable backend applications. By following these best practices, such as setting up your project correctly, defining models with type safety, creating typed Express routes, and implementing proper error handling, you can enhance your development workflow and produce higher-quality code. Remember to keep your dependencies up-to-date and explore &lt;a href="https://sequelize.org/" rel="noopener noreferrer"&gt;Sequelize's&lt;/a&gt; advanced features for even more efficient database operations.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Contacts&lt;/strong&gt;&lt;br&gt;
Email: &lt;a href="mailto:luizcalaca@gmail.com"&gt;luizcalaca@gmail.com&lt;/a&gt;&lt;br&gt;
Instagram: &lt;a href="https://www.instagram.com/luizcalaca" rel="noopener noreferrer"&gt;https://www.instagram.com/luizcalaca&lt;/a&gt;&lt;br&gt;
Linkedin: &lt;a href="https://www.linkedin.com/in/luizcalaca/" rel="noopener noreferrer"&gt;https://www.linkedin.com/in/luizcalaca/&lt;/a&gt;&lt;br&gt;
Twitter: &lt;a href="https://twitter.com/luizcalaca" rel="noopener noreferrer"&gt;https://twitter.com/luizcalaca&lt;/a&gt;&lt;/p&gt;

</description>
      <category>node</category>
      <category>typescript</category>
      <category>webdev</category>
      <category>programming</category>
    </item>
    <item>
      <title>Interesting middlewares in Node.js and Express.js API for security</title>
      <dc:creator>Luiz Calaça</dc:creator>
      <pubDate>Thu, 24 Nov 2022 13:34:26 +0000</pubDate>
      <link>https://dev.to/luizcalaca/interesting-middlewares-in-nodejs-and-expressjs-api-for-security-1elh</link>
      <guid>https://dev.to/luizcalaca/interesting-middlewares-in-nodejs-and-expressjs-api-for-security-1elh</guid>
      <description>&lt;h2&gt;
  
  
  &lt;strong&gt;Hi, Devs!&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Look at this piece of code into the main app.js and its &lt;strong&gt;middlewares&lt;/strong&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const express = require('express');
const app = express();
const cors = require('cors')
const helmet = require("helmet");
const morgan = require("morgan")
const rateLimit = require("express-rate-limit")

const limiter = rateLimit({
    windowMs: 60 * 1000, // 1 minute
    max: 50, // limit each IP to 50 requests per windowMs
    message: "Too many accounts created from this IP, please try again after a minute"
});

app.use(morgan("common")) //just for logs
app.use(helmet());
app.use(cors());
app.use(limiter)
app.use(express.json());
app.get("/", (res, req) =&amp;gt; {
    res.status(200).send("Security into a Node.js API")
})
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;First tip: Use TLS&lt;/strong&gt;&lt;br&gt;
It's necessary to create a security's and would be the middle between the connection and the data. One is the free TLS certificate from &lt;a href="https://letsencrypt.org/about/" rel="noopener noreferrer"&gt;Let’s Encrypt&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;☠️ &lt;strong&gt;helmet&lt;/strong&gt;&lt;br&gt;
"Helmet can help protect your app from some well-known web vulnerabilities by setting HTTP headers appropriately." [&lt;a href="https://expressjs.com/en/advanced/best-practice-security.html" rel="noopener noreferrer"&gt;Docs&lt;/a&gt;]&lt;/p&gt;

&lt;p&gt;☠️ &lt;strong&gt;cors&lt;/strong&gt;&lt;br&gt;
"CORS is a node.js package for providing a Connect/Express middleware that can be used to enable CORS with various options."&lt;br&gt;
[&lt;a href="https://expressjs.com/en/resources/middleware/cors.html" rel="noopener noreferrer"&gt;Docs&lt;/a&gt;]&lt;/p&gt;

&lt;p&gt;☠️ &lt;strong&gt;express-rate-limit&lt;/strong&gt;&lt;br&gt;
"Use to limit repeated requests to public APIs and/or endpoints such as password reset" [&lt;a href="https://www.npmjs.com/package/express-rate-limit" rel="noopener noreferrer"&gt;Docs&lt;/a&gt;]&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;That's simple and helps a lot! Code it!&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Contacts&lt;/strong&gt;&lt;br&gt;
Email: &lt;a href="mailto:luizcalaca@gmail.com"&gt;luizcalaca@gmail.com&lt;/a&gt;&lt;br&gt;
Instagram: &lt;a href="https://www.instagram.com/luizcalaca" rel="noopener noreferrer"&gt;https://www.instagram.com/luizcalaca&lt;/a&gt;&lt;br&gt;
Linkedin: &lt;a href="https://www.linkedin.com/in/luizcalaca/" rel="noopener noreferrer"&gt;https://www.linkedin.com/in/luizcalaca/&lt;/a&gt;&lt;br&gt;
Twitter: &lt;a href="https://twitter.com/luizcalaca" rel="noopener noreferrer"&gt;https://twitter.com/luizcalaca&lt;/a&gt;&lt;/p&gt;

</description>
      <category>node</category>
      <category>security</category>
      <category>javascript</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Pushing a docker container to Amazon Elastic Container Registry</title>
      <dc:creator>Luiz Calaça</dc:creator>
      <pubDate>Sun, 06 Nov 2022 14:39:58 +0000</pubDate>
      <link>https://dev.to/luizcalaca/pushing-a-docker-container-to-amazon-elastic-container-registry-491c</link>
      <guid>https://dev.to/luizcalaca/pushing-a-docker-container-to-amazon-elastic-container-registry-491c</guid>
      <description>&lt;h2&gt;
  
  
  &lt;strong&gt;Hi, Devs!&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;First of all, go to &lt;a href="https://aws.amazon.com/pt/console/" rel="noopener noreferrer"&gt;AWS Console&lt;/a&gt; and access on search field: Amazon ECR. Access the option view push commands.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Faoi3t5a7eqq4sedovqnm.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Faoi3t5a7eqq4sedovqnm.png" alt="AWS ECR" width="800" height="251"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Execute the login command in your local console in your machine:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;aws ecr get-login-password --region us-east-1 | docker login --username AWS --password-stdin&amp;lt;idaws&amp;gt;.dkr.ecr.us-east-1.amazonaws.com
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;After build your docker image before tag it:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;docker build -t &amp;lt;namebuild&amp;gt; .
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;docker tag &amp;lt;namebuild&amp;gt; &amp;lt;idaws&amp;gt;.dkr.ecr.us-east-1.amazonaws.com/&amp;lt;namebuild&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now you could push it:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;docker push &amp;lt;idaws&amp;gt;.dkr.ecr.us-east-1.amazonaws.com/&amp;lt;namebuild&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You'll see in the list your image, now you could just refers the image name to others AWS services like Kubernetes.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fu1ox6n1479ema42vcaau.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fu1ox6n1479ema42vcaau.png" alt="AWS" width="800" height="390"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;That'all!&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Contacts&lt;/strong&gt;&lt;br&gt;
Email: &lt;a href="mailto:luizcalaca@gmail.com"&gt;luizcalaca@gmail.com&lt;/a&gt;&lt;br&gt;
Instagram: &lt;a href="https://www.instagram.com/luizcalaca" rel="noopener noreferrer"&gt;https://www.instagram.com/luizcalaca&lt;/a&gt;&lt;br&gt;
Linkedin: &lt;a href="https://www.linkedin.com/in/luizcalaca/" rel="noopener noreferrer"&gt;https://www.linkedin.com/in/luizcalaca/&lt;/a&gt;&lt;br&gt;
Twitter: &lt;a href="https://twitter.com/luizcalaca" rel="noopener noreferrer"&gt;https://twitter.com/luizcalaca&lt;/a&gt;&lt;/p&gt;

</description>
      <category>aws</category>
      <category>docker</category>
      <category>cloud</category>
      <category>programming</category>
    </item>
    <item>
      <title>Typescript customized Function handler for exceptions with Node.js and Express.js</title>
      <dc:creator>Luiz Calaça</dc:creator>
      <pubDate>Tue, 27 Sep 2022 12:10:19 +0000</pubDate>
      <link>https://dev.to/luizcalaca/typescript-customized-function-handler-for-exceptions-with-nodejs-and-expressjs-2onl</link>
      <guid>https://dev.to/luizcalaca/typescript-customized-function-handler-for-exceptions-with-nodejs-and-expressjs-2onl</guid>
      <description>&lt;h2&gt;
  
  
  Hi, Devs!
&lt;/h2&gt;

&lt;p&gt;First of all, step one is to build the function handler for exceptions, it is necessary because when you use the &lt;strong&gt;throw&lt;/strong&gt; the application's is going to broke, so when you use the try/catch scope and into catch we could use the method below to get the exception.&lt;/p&gt;

&lt;p&gt;/middlewares/ErrorHandler.ts&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;NextFunction&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;Request&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;Response&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;express&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;ErrorHandler&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;

    &lt;span class="kr"&gt;public&lt;/span&gt; &lt;span class="kd"&gt;static&lt;/span&gt; &lt;span class="nf"&gt;handle&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;Error&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;_req&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Request&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Response&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;next&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;NextFunction&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;status&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;500&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;message&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;message&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
        &lt;span class="nf"&gt;next&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;ErrorHandler&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Let's create the app.ts:&lt;/p&gt;

&lt;p&gt;/src/app.ts&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;express&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;express&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;ErrorHandler&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./middlewares/ErrorHandler&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;NextFunction&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;Request&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;Response&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;express&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;app&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;express&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;use&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;express&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt;
&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;post&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/handler&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Request&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Request&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;next&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;NextFunction&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
&lt;span class="k"&gt;try&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;if&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;body&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;number&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="k"&gt;throw&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Negative number!&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="k"&gt;catch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="na"&gt;error&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;any&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
 &lt;span class="nf"&gt;next&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;use&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;ErrorHandler&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;handle&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// necessary to be the last middleware to get the exception.&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Let' create server.ts file to start the API:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;app&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./app&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;PORT&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;PORT&lt;/span&gt; &lt;span class="o"&gt;||&lt;/span&gt; &lt;span class="mi"&gt;3001&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;listen&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;PORT&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; 
     &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`Running server on port: &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;PORT&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If you pass a negative number for the body request you'll receive an exception and it will treat with the customized handler because the last middleware (ErrorHandler) will get it.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;That's all!&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Contacts&lt;/strong&gt;&lt;br&gt;
Email: &lt;a href="mailto:luizcalaca@gmail.com"&gt;luizcalaca@gmail.com&lt;/a&gt;&lt;br&gt;
Instagram: &lt;a href="https://www.instagram.com/luizcalaca" rel="noopener noreferrer"&gt;https://www.instagram.com/luizcalaca&lt;/a&gt;&lt;br&gt;
Linkedin: &lt;a href="https://www.linkedin.com/in/luizcalaca/" rel="noopener noreferrer"&gt;https://www.linkedin.com/in/luizcalaca/&lt;/a&gt;&lt;br&gt;
Twitter: &lt;a href="https://twitter.com/luizcalaca" rel="noopener noreferrer"&gt;https://twitter.com/luizcalaca&lt;/a&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>programming</category>
      <category>typescript</category>
    </item>
    <item>
      <title>You don't need VSCode to debug your Node.js app [Google Chrome V8 inspect and debugger breakpoint]</title>
      <dc:creator>Luiz Calaça</dc:creator>
      <pubDate>Fri, 26 Aug 2022 01:36:07 +0000</pubDate>
      <link>https://dev.to/luizcalaca/you-dont-need-vscode-to-debug-your-nodejs-app-google-chrome-v8-inspect-and-debugger-breakpoint-5dd8</link>
      <guid>https://dev.to/luizcalaca/you-dont-need-vscode-to-debug-your-nodejs-app-google-chrome-v8-inspect-and-debugger-breakpoint-5dd8</guid>
      <description>&lt;h2&gt;
  
  
  &lt;strong&gt;Hi, Devs!&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;When we look at Node.js documentation there's a interesting option do debug our code and is &lt;a href="https://nodejs.org/en/docs/guides/debugging-getting-started/" rel="noopener noreferrer"&gt;inspector&lt;/a&gt; context&lt;/p&gt;




&lt;p&gt;Let'a create a piece of code and let's use a &lt;code&gt;debugger&lt;/code&gt; word that means a &lt;em&gt;breakpoint&lt;/em&gt; for our debug process.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;//index.js&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;hello&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="nf"&gt;setTimeout&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;debugger&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;After debugger breakpoint&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="mi"&gt;8000&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="k"&gt;debugger&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Finished&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;For debugger's uses we need to configure one port into an extension of chrome web browser, copy on your web address:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;chrome&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="c1"&gt;//inspect/&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Click on configure and add the &lt;code&gt;localhost:9229&lt;/code&gt; address:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fb3vv294u4dnlpzayhvpz.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fb3vv294u4dnlpzayhvpz.png" alt="Node.js Chrome V8 Inspector Debugger" width="800" height="524"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;We are going to use the command below to start the debugger:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;node&lt;/span&gt; &lt;span class="o"&gt;--&lt;/span&gt;&lt;span class="nx"&gt;inspect&lt;/span&gt; &lt;span class="nx"&gt;index&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;js&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;After run the previous command --inspect, in the next step we need to click on &lt;code&gt;inspect&lt;/code&gt; button, below the remote target.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqmrzssdh78kkd0ura4pj.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqmrzssdh78kkd0ura4pj.png" alt="Debugger V8 Javascript" width="577" height="344"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And will be open the DevTools: &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmv4en2b2dj83zevp7p92.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmv4en2b2dj83zevp7p92.png" alt="DevTools Debugger Javascript" width="800" height="442"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And you could use the &lt;code&gt;next&lt;/code&gt; button on the right of the image above where is writing &lt;em&gt;Debugger paused&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;You could add some expression on Watch to verify some value and into Scope verify the returns.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Contacts&lt;/strong&gt;&lt;br&gt;
Email: &lt;a href="mailto:luizcalaca@gmail.com"&gt;luizcalaca@gmail.com&lt;/a&gt;&lt;br&gt;
Instagram: &lt;a href="https://www.instagram.com/luizcalaca" rel="noopener noreferrer"&gt;https://www.instagram.com/luizcalaca&lt;/a&gt;&lt;br&gt;
Linkedin: &lt;a href="https://www.linkedin.com/in/luizcalaca/" rel="noopener noreferrer"&gt;https://www.linkedin.com/in/luizcalaca/&lt;/a&gt;&lt;br&gt;
Twitter: &lt;a href="https://twitter.com/luizcalaca" rel="noopener noreferrer"&gt;https://twitter.com/luizcalaca&lt;/a&gt;&lt;/p&gt;

</description>
    </item>
    <item>
      <title>You need to know about Github CLI</title>
      <dc:creator>Luiz Calaça</dc:creator>
      <pubDate>Wed, 24 Aug 2022 22:47:00 +0000</pubDate>
      <link>https://dev.to/luizcalaca/you-need-to-know-about-github-cli-iif</link>
      <guid>https://dev.to/luizcalaca/you-need-to-know-about-github-cli-iif</guid>
      <description>&lt;h2&gt;
  
  
  &lt;em&gt;Hi, Devs!&lt;/em&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;em&gt;What is GitHub CLI: A &lt;em&gt;Command Line Interface&lt;/em&gt; to handle easily: repo clones, pull requests, merges, issues, gists and much others&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Documentation:&lt;/strong&gt; &lt;a href="https://cli.github.com/manual/" rel="noopener noreferrer"&gt;https://cli.github.com/manual/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Installation&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight tsx"&gt;&lt;code&gt;&lt;span class="c1"&gt;//Mac&lt;/span&gt;
&lt;span class="nx"&gt;brew&lt;/span&gt; &lt;span class="nx"&gt;install&lt;/span&gt; &lt;span class="nx"&gt;gh&lt;/span&gt;
&lt;span class="c1"&gt;//Linux&lt;/span&gt;
&lt;span class="nx"&gt;https&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="c1"&gt;//github.com/cli/cli/blob/trunk/docs/install_linux.md&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Are you going to clone a repo?&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight tsx"&gt;&lt;code&gt;&lt;span class="nx"&gt;gh&lt;/span&gt; &lt;span class="nx"&gt;auth&lt;/span&gt; &lt;span class="nx"&gt;login&lt;/span&gt;
&lt;span class="nx"&gt;gh&lt;/span&gt; &lt;span class="nx"&gt;repo&lt;/span&gt; &lt;span class="nx"&gt;list&lt;/span&gt;
&lt;span class="nx"&gt;gh&lt;/span&gt; &lt;span class="nx"&gt;repo&lt;/span&gt; &lt;span class="nx"&gt;clone&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;repo_name_from_list&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;em&gt;Yes, you don't need to go to the Github page, all in one CLI tool you could clone a project.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Creating, deleting and configuring a repository&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight tsx"&gt;&lt;code&gt;&lt;span class="nx"&gt;gh&lt;/span&gt; &lt;span class="nx"&gt;repo&lt;/span&gt; &lt;span class="nx"&gt;create&lt;/span&gt;

&lt;span class="nx"&gt;gh&lt;/span&gt; &lt;span class="nx"&gt;repo&lt;/span&gt; &lt;span class="nx"&gt;create&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;name_of_repo&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="o"&gt;--&lt;/span&gt;&lt;span class="k"&gt;public&lt;/span&gt;

&lt;span class="nx"&gt;gh&lt;/span&gt; &lt;span class="nx"&gt;repo&lt;/span&gt; &lt;span class="nx"&gt;create&lt;/span&gt; &lt;span class="nx"&gt;my&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nx"&gt;project&lt;/span&gt; &lt;span class="o"&gt;--&lt;/span&gt;&lt;span class="k"&gt;private&lt;/span&gt; &lt;span class="o"&gt;--&lt;/span&gt;&lt;span class="nx"&gt;source&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt; &lt;span class="o"&gt;--&lt;/span&gt;&lt;span class="nx"&gt;remote&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="nx"&gt;upstream&lt;/span&gt;

&lt;span class="nx"&gt;gh&lt;/span&gt; &lt;span class="nx"&gt;repo&lt;/span&gt; &lt;span class="nx"&gt;edit&lt;/span&gt; &lt;span class="o"&gt;--&lt;/span&gt;&lt;span class="nx"&gt;visibility&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;visibility&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;

&lt;span class="nx"&gt;gh&lt;/span&gt; &lt;span class="nx"&gt;repo&lt;/span&gt; &lt;span class="nx"&gt;sync&lt;/span&gt;

&lt;span class="nx"&gt;gh&lt;/span&gt; &lt;span class="nx"&gt;repo&lt;/span&gt; &lt;span class="nx"&gt;create&lt;/span&gt; &lt;span class="o"&gt;--&lt;/span&gt;&lt;span class="nx"&gt;disable&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nx"&gt;issues&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt; &lt;span class="o"&gt;--&lt;/span&gt;&lt;span class="k"&gt;public&lt;/span&gt;

&lt;span class="nx"&gt;gh&lt;/span&gt; &lt;span class="nx"&gt;repo&lt;/span&gt; &lt;span class="nx"&gt;list&lt;/span&gt;

&lt;span class="nx"&gt;gh&lt;/span&gt; &lt;span class="nx"&gt;repo&lt;/span&gt; &lt;span class="k"&gt;delete&lt;/span&gt; &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;name_of_repo&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;

gh repo clone &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;name_of_repo&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;

gh repo fork &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;name_of_repo&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Locally, you create your project with &lt;code&gt;git init&lt;/code&gt;, commit your files and after you should go to the &lt;code&gt;gh repo create&lt;/code&gt; and would be created remotely the repo and locally configured with the remote origin:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight tsx"&gt;&lt;code&gt;&lt;span class="nx"&gt;mkdir&lt;/span&gt; &lt;span class="nx"&gt;project&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class="nx"&gt;cd&lt;/span&gt; &lt;span class="nx"&gt;project&lt;/span&gt;

&lt;span class="nx"&gt;git&lt;/span&gt; &lt;span class="nx"&gt;init&lt;/span&gt;

&lt;span class="nx"&gt;gh&lt;/span&gt; &lt;span class="nx"&gt;repo&lt;/span&gt; &lt;span class="nx"&gt;create&lt;/span&gt; 
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Usually, when you are programming you think should be possible to save a piece of code. You can use the Gist:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Creating a gist easily&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight tsx"&gt;&lt;code&gt;&lt;span class="nx"&gt;touch&lt;/span&gt; &lt;span class="nx"&gt;index&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;js&lt;/span&gt; &lt;span class="c1"&gt;// after create content for it&lt;/span&gt;

&lt;span class="nx"&gt;gh&lt;/span&gt; &lt;span class="nx"&gt;gist&lt;/span&gt; &lt;span class="nx"&gt;create&lt;/span&gt; &lt;span class="nx"&gt;index&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;js&lt;/span&gt; &lt;span class="o"&gt;--&lt;/span&gt;&lt;span class="k"&gt;public&lt;/span&gt;

&lt;span class="nx"&gt;gh&lt;/span&gt; &lt;span class="nx"&gt;gist&lt;/span&gt; &lt;span class="nx"&gt;create&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt;

&lt;span class="nx"&gt;gh&lt;/span&gt; &lt;span class="nx"&gt;gist&lt;/span&gt; &lt;span class="nx"&gt;edit&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;gist_id&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; 

&lt;span class="nx"&gt;gh&lt;/span&gt; &lt;span class="nx"&gt;gist&lt;/span&gt; &lt;span class="nx"&gt;list&lt;/span&gt; &lt;span class="o"&gt;--&lt;/span&gt;&lt;span class="k"&gt;public&lt;/span&gt; 

&lt;span class="nx"&gt;gh&lt;/span&gt; &lt;span class="nx"&gt;gist&lt;/span&gt; &lt;span class="nx"&gt;list&lt;/span&gt; &lt;span class="o"&gt;--&lt;/span&gt;&lt;span class="nx"&gt;secret&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Handling issues&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight tsx"&gt;&lt;code&gt;&lt;span class="nx"&gt;gh&lt;/span&gt; &lt;span class="nx"&gt;issue&lt;/span&gt; &lt;span class="nx"&gt;create&lt;/span&gt;

&lt;span class="nx"&gt;gh&lt;/span&gt; &lt;span class="nx"&gt;issue&lt;/span&gt; &lt;span class="nx"&gt;list&lt;/span&gt;

&lt;span class="nx"&gt;gh&lt;/span&gt; &lt;span class="nx"&gt;issue&lt;/span&gt; &lt;span class="nx"&gt;status&lt;/span&gt;

&lt;span class="nx"&gt;git&lt;/span&gt; &lt;span class="nx"&gt;issue&lt;/span&gt; &lt;span class="nx"&gt;close&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="err"&gt;#&lt;/span&gt;&lt;span class="nx"&gt;number_issue&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;

&lt;span class="nx"&gt;gh&lt;/span&gt; &lt;span class="nx"&gt;list&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nx"&gt;A&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;&amp;lt;name_issue&amp;gt;&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Handling Pull requests&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight tsx"&gt;&lt;code&gt;&lt;span class="nx"&gt;gh&lt;/span&gt; &lt;span class="nx"&gt;pr&lt;/span&gt; &lt;span class="nx"&gt;create&lt;/span&gt; 

&lt;span class="nx"&gt;gh&lt;/span&gt; &lt;span class="nx"&gt;pr&lt;/span&gt; &lt;span class="nx"&gt;checkout&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;

&lt;span class="nx"&gt;gh&lt;/span&gt; &lt;span class="nx"&gt;pr&lt;/span&gt; &lt;span class="nx"&gt;diff&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="err"&gt;#&lt;/span&gt;&lt;span class="nx"&gt;number_of_pr&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;

&lt;span class="nx"&gt;gh&lt;/span&gt; &lt;span class="nx"&gt;review&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nx"&gt;c&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nx"&gt;b&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;nice work&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;

&lt;span class="nx"&gt;gh&lt;/span&gt; &lt;span class="nx"&gt;pr&lt;/span&gt; &lt;span class="nx"&gt;close&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="err"&gt;#&lt;/span&gt;&lt;span class="nx"&gt;number_of_pr&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nx"&gt;d&lt;/span&gt;

&lt;span class="nx"&gt;gh&lt;/span&gt; &lt;span class="nx"&gt;pr&lt;/span&gt; &lt;span class="nx"&gt;reopen&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="err"&gt;#&lt;/span&gt;&lt;span class="nx"&gt;number_of_pr&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;

&lt;span class="nx"&gt;gh&lt;/span&gt; &lt;span class="nx"&gt;pr&lt;/span&gt; &lt;span class="nx"&gt;status&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If you get started to use certainly you'll see that's so great tool.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Contacts&lt;/strong&gt;&lt;br&gt;
Email: &lt;a href="mailto:luizcalaca@gmail.com"&gt;luizcalaca@gmail.com&lt;/a&gt;&lt;br&gt;
Instagram: &lt;a href="https://www.instagram.com/luizcalaca" rel="noopener noreferrer"&gt;https://www.instagram.com/luizcalaca&lt;/a&gt;&lt;br&gt;
Linkedin: &lt;a href="https://www.linkedin.com/in/luizcalaca/" rel="noopener noreferrer"&gt;https://www.linkedin.com/in/luizcalaca/&lt;/a&gt;&lt;br&gt;
Twitter: &lt;a href="https://twitter.com/luizcalaca" rel="noopener noreferrer"&gt;https://twitter.com/luizcalaca&lt;/a&gt;&lt;/p&gt;

</description>
      <category>github</category>
      <category>tutorial</category>
      <category>webdev</category>
      <category>devops</category>
    </item>
    <item>
      <title>Typescript boilerplate test configuration with mocha, chai and sinon</title>
      <dc:creator>Luiz Calaça</dc:creator>
      <pubDate>Thu, 18 Aug 2022 01:25:23 +0000</pubDate>
      <link>https://dev.to/luizcalaca/typescript-boilerplate-test-configuration-with-mocha-chai-and-sinon-1mml</link>
      <guid>https://dev.to/luizcalaca/typescript-boilerplate-test-configuration-with-mocha-chai-and-sinon-1mml</guid>
      <description>&lt;h2&gt;
  
  
  Hi, Devs!
&lt;/h2&gt;

&lt;p&gt;Let's configure tests with &lt;a href="https://www.npmjs.com/package/mocha" rel="noopener noreferrer"&gt;mocha&lt;/a&gt;, &lt;a href="https://www.npmjs.com/package/chai" rel="noopener noreferrer"&gt;chai&lt;/a&gt; and &lt;a href="https://www.npmjs.com/package/sinon" rel="noopener noreferrer"&gt;sinon&lt;/a&gt; on Typescript in a few steps.&lt;/p&gt;




&lt;p&gt;Lets' start the project:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm init -y
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now, let's install the packages. Here we also install the types (@types) of each library because we need to use them on Typescript. Usually we need to test some elements that returns one promise, so we need do install chai-as-promised.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm i -D mocha @types/mocha chai @types/chai 
npm i -D sinon @types/sinon
npm i -D chai-as-promised @types/chai-as-promised
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;We need to use &lt;em&gt;ts-node&lt;/em&gt; library to run our tests, because using Typescript we have to transpile the code. So let's install typescript and ts-node.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm i -D typescript ts-node
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now put on your package.json the necessary script to run the tests:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;"scripts": {
  ...
  "test": "mocha --require ts-node/register tests/**/*.spec.ts --exit"
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Create one folder with the name &lt;em&gt;tests&lt;/em&gt;, into a file with &lt;em&gt;testfirst.spec.ts&lt;/em&gt; name and create a simple case:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import { describe } from "mocha";
import { expect } from 'chai';
import chaiAsPromised from 'chai-as-promised';

chai.use(chaiAsPromised);
const expect = chai.expect;

describe('Testing the configuration', () =&amp;gt; {
  it('should pass', () =&amp;gt; {

  });
});
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;After you could run:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm run test
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;That' all!&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Contacts&lt;/strong&gt;&lt;br&gt;
Email: &lt;a href="mailto:luizcalaca@gmail.com"&gt;luizcalaca@gmail.com&lt;/a&gt;&lt;br&gt;
Instagram: &lt;a href="https://www.instagram.com/luizcalaca" rel="noopener noreferrer"&gt;https://www.instagram.com/luizcalaca&lt;/a&gt;&lt;br&gt;
Linkedin: &lt;a href="https://www.linkedin.com/in/luizcalaca/" rel="noopener noreferrer"&gt;https://www.linkedin.com/in/luizcalaca/&lt;/a&gt;&lt;br&gt;
Twitter: &lt;a href="https://twitter.com/luizcalaca" rel="noopener noreferrer"&gt;https://twitter.com/luizcalaca&lt;/a&gt;&lt;/p&gt;

</description>
      <category>typescript</category>
      <category>testing</category>
      <category>tutorial</category>
      <category>javascript</category>
    </item>
    <item>
      <title>Deploy your React.js app on AWS Amplify</title>
      <dc:creator>Luiz Calaça</dc:creator>
      <pubDate>Sun, 07 Aug 2022 00:47:44 +0000</pubDate>
      <link>https://dev.to/luizcalaca/deploy-your-reactjs-app-on-aws-amplify-44e</link>
      <guid>https://dev.to/luizcalaca/deploy-your-reactjs-app-on-aws-amplify-44e</guid>
      <description>&lt;p&gt;Hi, Devs!&lt;/p&gt;

&lt;p&gt;Deploy and CI/CD is always necessary and important for software development cycle. Let's go to learn how to deploy React.js app and its using de AWS Amplify service on cloud?&lt;/p&gt;




&lt;p&gt;First you need to create an account on &lt;a&gt;AWS&lt;/a&gt; and access the AWS Amplify service. After you could use the search engine on AWS and looking for AWS Amplify. Click on &lt;em&gt;Get started&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F02uij6hr0i484qu6xpv8.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F02uij6hr0i484qu6xpv8.png" alt="AWS Amplify - Luiz Calaça"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Again, click on Get started&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbztwp57whhr3grasssvm.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbztwp57whhr3grasssvm.png" alt="AWS Amplify - Luiz Calaça"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Connect with you remote repository, I'm using here Github to versioning my React.js app.&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fm78ce3zdah7q5opgu1jp.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fm78ce3zdah7q5opgu1jp.png" alt="AWS Amplify - Luiz Calaça"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Add your repository.&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Feku4au3fpp75rtbnsk2x.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Feku4au3fpp75rtbnsk2x.png" alt="AWS Amplify - Luiz Calaça"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In that step you could click on Next ou copy the code and put it on your project. It's better click on next e carry on because automatically that file will run on your project connected.&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhygx75tl69f0p4wusf9d.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhygx75tl69f0p4wusf9d.png" alt="AWS Amplify - Luiz Calaça"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you click on Advanced Setting you could put all environment variables and use your Docker image if you desire, in that case you need to push your imagem do Docker Hub and so on inform the link in that field. And click next.&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft20ubmceblxiawt5w1dy.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft20ubmceblxiawt5w1dy.png" alt="AWS Amplify - Luiz Calaça"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Almost there and now we need to review and next to deploy.&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fj4bmranrh78klv0axa0r.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fj4bmranrh78klv0axa0r.png" alt="AWS Amplify - Luiz Calaça"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The deploy has initialized and after that steps you app will available using the url below of your branch like the image here.&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffe3yoolynbt5yaqhhodg.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffe3yoolynbt5yaqhhodg.png" alt="AWS Amplify - Luiz Calaça"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Click on your URL and see you app already deployed.&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fclicfgkev03jnlov48ws.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fclicfgkev03jnlov48ws.png" alt="AWS Amplify - Luiz Calaça"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;That' all and easy steps!&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Contacts&lt;/strong&gt;&lt;br&gt;
Email: &lt;a href="mailto:luizcalaca@gmail.com"&gt;luizcalaca@gmail.com&lt;/a&gt;&lt;br&gt;
Instagram: &lt;a href="https://www.instagram.com/luizcalaca" rel="noopener noreferrer"&gt;https://www.instagram.com/luizcalaca&lt;/a&gt;&lt;br&gt;
Linkedin: &lt;a href="https://www.linkedin.com/in/luizcalaca/" rel="noopener noreferrer"&gt;https://www.linkedin.com/in/luizcalaca/&lt;/a&gt;&lt;br&gt;
Twitter: &lt;a href="https://twitter.com/luizcalaca" rel="noopener noreferrer"&gt;https://twitter.com/luizcalaca&lt;/a&gt;&lt;/p&gt;

</description>
      <category>react</category>
      <category>aws</category>
      <category>tutorial</category>
      <category>devops</category>
    </item>
    <item>
      <title>How to create a Node.js project from zero with good practices?</title>
      <dc:creator>Luiz Calaça</dc:creator>
      <pubDate>Tue, 19 Jul 2022 22:24:58 +0000</pubDate>
      <link>https://dev.to/luizcalaca/how-to-create-a-nodejs-project-from-zero-with-good-practices-39jm</link>
      <guid>https://dev.to/luizcalaca/how-to-create-a-nodejs-project-from-zero-with-good-practices-39jm</guid>
      <description>&lt;h2&gt;
  
  
  Hi, Devs!
&lt;/h2&gt;

&lt;p&gt;How to create your Node.js project? What is important to organize to masterize? So, let's see necessary things to build your initial project, code quality, manutenability and scalability&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Spoiler:&lt;/strong&gt; &lt;em&gt;At the final there's a github boilerplate repo with all configurations&lt;/em&gt;.&lt;/p&gt;




&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fiu4zx7m5k7uaa0erljeu.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fiu4zx7m5k7uaa0erljeu.png" alt="Configurations from zero Node.js" width="800" height="800"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Let's go!&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Basic&lt;/strong&gt;&lt;br&gt;
&lt;code&gt;npm init -y&lt;/code&gt;&lt;br&gt;
Creating our package.json to manage our packages.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Git alias&lt;/strong&gt;&lt;br&gt;
That's cool thing that you can use to optmize your commits, It's always necessary add and commit? So, why don't you automatize with just one command instead of two? Git alias pretty formatting can help us too showing in a better way the git console output.&lt;br&gt;
&lt;code&gt;[alias] c = !git add --all &amp;amp;&amp;amp; git commit -m&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Look at here my &lt;a href="https://gist.github.com/luizcalaca/ea1642991eefd7e3c312b9e11a3ddb44" rel="noopener noreferrer"&gt;gist&lt;/a&gt; to handle completely alias like that.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Conventional Commits Linter&lt;/strong&gt;&lt;br&gt;
&lt;code&gt;npm install git-commit-msg-linter&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Here's the git linter to force us to use the &lt;a href="https://www.conventionalcommits.org/en/v1.0.0/" rel="noopener noreferrer"&gt;Conventional Commits pattern&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;fix
feature
docs
chore
tests
style
refactor
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Git&lt;/strong&gt;&lt;br&gt;
After you run &lt;code&gt;git init&lt;/code&gt; already add the &lt;code&gt;.gitignore&lt;/code&gt; and into there folders like:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;node_modules
dist
coverage
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Husky and lintStaged for code quality&lt;/strong&gt;&lt;br&gt;
Below is the &lt;code&gt;.lintstagedrc.json&lt;/code&gt; configuration to add into project root folder. It garantees that commit will be done just before fix all lint problems and all tests ok.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{
    "*.ts": [
        "eslint 'src/**' --fix",
        "npm run test:staged"
        "git add"
    ]
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And here &lt;code&gt;.huskyrc.json&lt;/code&gt; to garantee esling running before to commit:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{
    "hooks":{
        "pre-commit": "eslint"
    }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Javascript Standard Style and eslint&lt;/strong&gt;&lt;br&gt;
We need to know about &lt;a href="https://standardjs.com/" rel="noopener noreferrer"&gt;standard JS&lt;/a&gt;, just use eslint if has just Javascript files, but if you are using Typescript you could &lt;a href="https://github.com/standard/eslint-config-standard-with-typescript" rel="noopener noreferrer"&gt;use&lt;/a&gt; and plugin ESlint on VSCode.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Configuring scripts on you package.json&lt;/strong&gt;&lt;br&gt;
You could configure your scripts and already all prepared to use.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;  "scripts": {
    "lint": "npx eslint .",
    "test": "jest"
  },
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Library Testing&lt;/strong&gt;&lt;br&gt;
If necessary install Jest or Mocha, chain, sinon for unit tests. Frisby for test integrations and Cypress for End2End tests.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Docker&lt;/strong&gt;&lt;br&gt;
Certainly you neeed to add &lt;code&gt;docker-compose.yml&lt;/code&gt; with yours infrastructure (database and other services)&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;version: '3.1'

services:

  mongo:
    image: mongo
    restart: always
    environment:
      MONGO_INITDB_ROOT_USERNAME: root
      MONGO_INITDB_ROOT_PASSWORD: example

  mongo-express:
    image: mongo-express
    restart: always
    ports:
      - 8081:8081
    environment:
      ME_CONFIG_MONGODB_ADMINUSERNAME: root
      ME_CONFIG_MONGODB_ADMINPASSWORD: example
      ME_CONFIG_MONGODB_URL: mongodb://root:example@mongo:27017/
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Software Architecture&lt;/strong&gt;&lt;br&gt;
If you are gonna use such as DDD + Clean Architecture, you could create the folders with its hierarchy.&lt;br&gt;
&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbk2d3ub248fjcge58uil.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbk2d3ub248fjcge58uil.png" alt="DDD + Clean Arch" width="530" height="440"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Get all the article here&lt;/em&gt; &lt;br&gt;
&lt;strong&gt;Complete Boilerplate with that all configurations&lt;/strong&gt;&lt;br&gt;
Link: &lt;a href="https://github.com/luizcalaca/node-typescript-boilerplate-configuration" rel="noopener noreferrer"&gt;https://github.com/luizcalaca/node-typescript-boilerplate-configuration&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdc2ieai6mpgd7kgbxr3h.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdc2ieai6mpgd7kgbxr3h.png" alt="configuration Node.js project" width="800" height="761"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Contacts&lt;/strong&gt;&lt;br&gt;
&lt;a href="https://www.buymeacoffee.com/calaca" rel="noopener noreferrer"&gt;https://www.buymeacoffee.com/calaca&lt;/a&gt;&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Do your first AWS Lambda Serverless Node.js API</title>
      <dc:creator>Luiz Calaça</dc:creator>
      <pubDate>Sat, 02 Jul 2022 01:28:24 +0000</pubDate>
      <link>https://dev.to/luizcalaca/do-your-first-aws-lambda-serverless-nodejs-api-3k23</link>
      <guid>https://dev.to/luizcalaca/do-your-first-aws-lambda-serverless-nodejs-api-3k23</guid>
      <description>&lt;h2&gt;
  
  
  Hi, Devs!
&lt;/h2&gt;

&lt;p&gt;First we need to install&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://www.serverless.com/framework/docs/getting-started" rel="noopener noreferrer"&gt;serverless framework&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;create your account on &lt;a href="https://www.serverless.com/framework/docs/providers/aws/guide/credentials/" rel="noopener noreferrer"&gt;AWS&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;




&lt;p&gt;Let's create a folder:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;$ mkdir node-aws
```



Go into that folder and run:



```
$ cd node-aws
$ serverless
```



Now is going to appear some questions after you choosed the AWS - Node.js - HTTP API:



```
? What do you want to call this project? **aws-node-api**

✔ Project successfully created in aws-node-api folder

? What org do you want to add this service to? **[Skip]**

? Do you want to deploy now? **No**
```



---

Open your folder that was created and now we can look at:

![Handler AWS Serverless](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g89r9djgmvat3gq6bf25.png)

When we use `serverless deploy` our application is going to start the process on AWS, and we go there and see the queue on CloudFormation. You can use search tool and find all the services below.

![search tool on AWS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5v1fno9fweoh0fc4l0im.png)

**CloudFormation**
It organize a queue of services processing to deploy our service. when we run `serverless deploy` there is a folder `.serverless` with Cloudformation informations do deploy. AWS CloudFormation has a template for this Serverless application. Look at below the events created by that service.
![CloudFormation Event](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/guywiwkuxx30dg8kgg1o.png)

**AWS IAM**
User management. You can verify yours users.

**AWS Lambda**
It was created a function called aws-node-api-dev-hello because into our `handler.js` there's a function called hello and it is configured on `serverless.yml`. Look at below:
![serverless.yml and handler.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x774c4pxfdxmlhegx82v.png)

**S3**
Data storage on AWS, and it is created a bucket after our deploy with serverless framework.
![S3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/24evbgeqq03vbirnsrmy.png)

**API Gateway**
The API Gateway service helps us to create an excellent pattern to access our API. It show us all the routes of the system and here we can add Authorization, CORS configurations and create new routes.

![API Gateway](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gt0egwhu122g8yact34d.png)

When we access the Lambda service we can see the API Gateway in a pipe clicking on **Functions -&amp;gt; choose the function that we created -&amp;gt; Function overview**:

![AWS Lambda - API Gateway](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xvtzt4wja9r6hcz353iq.png)

**CloudWatch**
Monitoring the API with a couple metrics

![AWS CloudWatch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7m33sdqt3iofq9xjn3df.png)

At the final we have the URL to access our API: https://h5c2vw466m.execute-api.us-east-1.amazonaws.com/

**You can find the URL looking for API Gateway service in search tool and click on the project name that we created.**



**Contacts**
Email: luizcalaca@gmail.com
Instagram: https://www.instagram.com/luizcalaca
Linkedin: https://www.linkedin.com/in/luizcalaca/
Twitter: https://twitter.com/luizcalaca
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

</description>
      <category>aws</category>
      <category>node</category>
      <category>serverless</category>
      <category>api</category>
    </item>
    <item>
      <title>You need to know about req and res objects to build an API in Node.js using Express.js</title>
      <dc:creator>Luiz Calaça</dc:creator>
      <pubDate>Fri, 10 Jun 2022 00:07:17 +0000</pubDate>
      <link>https://dev.to/luizcalaca/you-need-to-know-about-req-and-res-objects-to-build-an-api-in-nodejs-using-expressjs-4f3i</link>
      <guid>https://dev.to/luizcalaca/you-need-to-know-about-req-and-res-objects-to-build-an-api-in-nodejs-using-expressjs-4f3i</guid>
      <description>&lt;h2&gt;
  
  
  Hi, Devs!
&lt;/h2&gt;

&lt;p&gt;We can have &lt;a href="https://expressjs.com/en/5x/api.html#req" rel="noopener noreferrer"&gt;req&lt;/a&gt; and &lt;a href="https://expressjs.com/en/5x/api.html#res" rel="noopener noreferrer"&gt;res&lt;/a&gt; objects into Express.js, they are used to handle the &lt;code&gt;request and response&lt;/code&gt; using &lt;strong&gt;HTTP protocol and its verbs and status code&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F41wabd87q0llbnj9q8ew.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F41wabd87q0llbnj9q8ew.png" alt="page not found 404 status code HTTP"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Remember! We have some HTTP verbs and they can do some actions and return some &lt;em&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Status" rel="noopener noreferrer"&gt;status code&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Informational responses (100–199)&lt;/li&gt;
&lt;li&gt;Successful responses (200–299)&lt;/li&gt;
&lt;li&gt;Redirection messages (300–399)&lt;/li&gt;
&lt;li&gt;Client error responses (400–499)&lt;/li&gt;
&lt;li&gt;Server error responses (500–599)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Let's assume a bit code to show Express.js and its response (res) and request (req) object:&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;

const express = require('express');
const cors = require('cors');
const app = express();
const bodyParser = require('body-parser')

app.use(cors())
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: false }))

app.post('/example', handleCreate); //save with req.body data
app.get('/example/search/', handleSearch); //find the data
app.get('/example/:id', handleFindById); //find by an id

app.listen(3000, () =&amp;gt; {
  console.log('Running on 3000');
});


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;&lt;strong&gt;Let's see the examples:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;code&gt;req.body&lt;/code&gt;&lt;br&gt;
It's populated when you use body-parsing middleware such as body-parser. And response here is just send the result from the database.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;endpoint:&lt;/strong&gt; app.post('/example', handleCreate);&lt;br&gt;
&lt;strong&gt;http verb:&lt;/strong&gt; &lt;a href="https://developer.mozilla.org/pt-BR/docs/Web/HTTP/Methods/POST" rel="noopener noreferrer"&gt;POST&lt;/a&gt;&lt;br&gt;
&lt;strong&gt;URL example:&lt;/strong&gt; &lt;a href="http://localhost:3000/example" rel="noopener noreferrer"&gt;http://localhost:3000/example&lt;/a&gt;&lt;br&gt;
Status: &lt;a href="https://developer.mozilla.org/pt-BR/docs/Web/HTTP/Status/201" rel="noopener noreferrer"&gt;201&lt;/a&gt;&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;

async function handleCreate(req, res) {
  console.log(req.body)
  const {name, age} = req.body
  const result = await database.create(name, age)
  res.status(201).send(result);
}


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;




&lt;p&gt;&lt;code&gt;req.params&lt;/code&gt;&lt;br&gt;
if you have the route /example/:id, then the “id” property is available as req.params.name ou using destructuring like below. And here the response is sending the status and the data in JSON format.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;endpoint:&lt;/strong&gt; app.get('/example/:id', handleFindById);&lt;br&gt;
&lt;strong&gt;http verb:&lt;/strong&gt; &lt;a href="https://developer.mozilla.org/pt-BR/docs/Web/HTTP/Methods/GET" rel="noopener noreferrer"&gt;GET&lt;/a&gt;&lt;br&gt;
&lt;strong&gt;URL example:&lt;/strong&gt; &lt;a href="http://localhost:3000/example/1" rel="noopener noreferrer"&gt;http://localhost:3000/example/1&lt;/a&gt;&lt;br&gt;
Status: &lt;a href="https://developer.mozilla.org/pt-BR/docs/Web/HTTP/Status/200" rel="noopener noreferrer"&gt;200&lt;/a&gt;&lt;br&gt;
Response: &lt;a href="https://expressjs.com/en/5x/api.html#res.status" rel="noopener noreferrer"&gt;res.status&lt;/a&gt;(200).json(result)&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;

async function handleFindById(req, res) {
  const { id } = req.params //or req.params.id
  const result = await database.findById(id)
  res.status(200).json(result);
}


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;




&lt;p&gt;&lt;code&gt;req.query&lt;/code&gt;&lt;br&gt;
This property is an object containing a property for each query string parameter in the route, as well using when we have more than one parameter to share on url, because we can get the value of &lt;em&gt;?name=Calaca&amp;amp;age=32&amp;amp;live=Brazil&amp;amp;leve=senior&lt;/em&gt;. And the response  here is sending status 200 and result from database.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;endpoint:&lt;/strong&gt; app.get('/example/search', handleSearch);&lt;br&gt;
&lt;strong&gt;http verb:&lt;/strong&gt; &lt;a href="https://developer.mozilla.org/pt-BR/docs/Web/HTTP/Methods/GET" rel="noopener noreferrer"&gt;GET&lt;/a&gt;&lt;br&gt;
&lt;strong&gt;URL example:&lt;/strong&gt; &lt;a href="http://localhost:3000/example/search?name=Calaca" rel="noopener noreferrer"&gt;http://localhost:3000/example/search?name=Calaca&lt;/a&gt;&lt;br&gt;
Status response: &lt;a href="https://developer.mozilla.org/pt-BR/docs/Web/HTTP/Status/200" rel="noopener noreferrer"&gt;200&lt;/a&gt;&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;

async function handleSearch(req, res) {
  const {name} = req.query
  const result = await database.findByName(name)
  res.status(200).send(result);
}


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;&lt;code&gt;req.headers&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Simple and effective.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Contacts&lt;/strong&gt;&lt;br&gt;
Email: &lt;a href="mailto:luizcalaca@gmail.com"&gt;luizcalaca@gmail.com&lt;/a&gt;&lt;br&gt;
Instagram: &lt;a href="https://www.instagram.com/luizcalaca" rel="noopener noreferrer"&gt;https://www.instagram.com/luizcalaca&lt;/a&gt;&lt;br&gt;
Linkedin: &lt;a href="https://www.linkedin.com/in/luizcalaca/" rel="noopener noreferrer"&gt;https://www.linkedin.com/in/luizcalaca/&lt;/a&gt;&lt;br&gt;
Twitter: &lt;a href="https://twitter.com/luizcalaca" rel="noopener noreferrer"&gt;https://twitter.com/luizcalaca&lt;/a&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>node</category>
      <category>beginners</category>
      <category>programming</category>
    </item>
  </channel>
</rss>
