DEV Community: Famosa Adegbite

[Boost]

Famosa Adegbite — Sun, 10 Aug 2025 21:47:50 +0000

Famosa Adegbite

Aug 7 '25

Error Handler

#node #express #webdev #programming

Comments

2 min read

Error Handler

Famosa Adegbite — Thu, 07 Aug 2025 13:22:41 +0000

What is `asyncHandler.js`?

In a professional Express.js project, asyncHandler.js (or catchAsync.js) is a utility function used to wrap your async route handlers (like signup, login, etc.) so that you don't need to write try...catch blocks in every controller.

Problem It Solves:

Normally in an async controller:

export const signup = async (req, res, next) => {
  try {
    // your logic
  } catch (error) {
    next(error); // manually send error to global error handler
  }
};

That repetition gets messy. asyncHandler makes it cleaner.
The asyncHandler Utility:
You can create a file called utils/asyncHandler.js and write this:

const asyncHandler = (fn) => (req, res, next) => {
  Promise.resolve(fn(req, res, next)).catch(next);
};

export default asyncHandler;

How to Use It:

Instead of:

export const signup = async (req, res, next) => {
  try {
    // your logic
  } catch (err) {
    next(err);
  }
};

You write:

import asyncHandler from '../utils/asyncHandler.js';

export const signup = asyncHandler(async (req, res, next) => {
  // just write your logic — no need for try-catch
});

Why Using `asyncHandler`?

Cleaner controllers
Centralized error handling
Less boilerplate
Best practice in real-world Express apps

Directory example:

project-root/
├── controllers/
│   └── auth.controller.js
├── middlewares/
│   └── errorHandlers.js
├── utils/
│   └── asyncHandler.js ✅
├── routes/
├── models/
├── app.js

When to use `try/catch` after using `asyncHandler`

You still need try/catch inside an asyncHandler only if you are doing something like database transactions or manual rollback — where cleanup is needed even if an error occurs or you need custom logic during failure.

Example: Database transaction rollback

const signup = asyncHandler(async (req, res) => {
  const transaction = await sequelize.transaction();

  try {
    const user = await User.create({...}, { transaction });

    // simulate a bug (e.g., missing env var)
    const token = jwt.sign({ id: user.id }, process.env.JWT_SECRET);

    await transaction.commit();

    res.status(201).json({ token });

  } catch (error) {
    await transaction.rollback(); // 🛑 must rollback manually
    throw error; // let asyncHandler handle the error
  }
});

If you didn’t use try/catch here, the transaction would not rollback, and you'd leave your DB in a broken state (e.g., partial insert).

So:

asyncHandler = automatic error forwarding to Express
try/catch = necessary for manual cleanup logic before the error is forwarded

@adefam

Balancing the Art of Clean Code and Meeting Deadlines in Software Development

Famosa Adegbite — Sun, 17 Sep 2023 03:28:29 +0000

Clean code, much like a beautifully maintained garden, is a testament to a developer's commitment, determination, and effort. It's an ideal we all strive for, but the reality of deadlines often forces us to navigate a delicate balance between code cleanliness and project timelines. In this blog, we explore the challenges and strategies for harmonizing these two critical aspects of software development.

Deadlines First - The Crucial Trade-off: There are instances when the pressure to meet a project deadline becomes paramount. During such moments, the primary focus shifts from pristine code to code functionality. It's a challenging scenario, but sometimes, it's the reality we face.
Extra Effort Required: Striking a balance between clean code and tight deadlines demands going the extra mile. It necessitates putting in additional effort to ensure that your code is not only functional but also maintainable. While it may require more time upfront, the long-term benefits are invaluable.
The "After It Works" Mindset: It's a common pitfall among developers to defer code cleanup until later, once it works. Unfortunately, in the fast-paced world of software development, 'later' often never arrives. New projects continually demand attention, leaving behind a trail of less-than-ideal code. Commitment is the solution; allocate time to refactor and enhance your codebase regularly.
The Stress of Clean Code: Writing clean code can be an arduous task, particularly for those unaccustomed to it. The added stress of incorporating comments, using descriptive variable names, and adhering to best practices can be daunting. However, it's a skill worth cultivating as it ultimately leads to more efficient, maintainable, and high-quality code.

Conclusion: The Art of Balancing Balancing clean code and meeting deadlines is an art form. It requires unwavering determination, effort, and a commitment to excellence. While deadlines are pivotal in the software development landscape, it's essential to remember that clean code pays dividends in the long run. It simplifies maintenance, reduces technical debt, and enhances the overall quality of your work.

In the dynamic world of software development, the ability to navigate the fine line between these two facets is a valuable skill. By acknowledging the challenges and adopting strategies to address them, developers can achieve the delicate equilibrium of delivering both clean code and meeting project deadlines effectively.

“Clean code is simple and direct. Clean code reads like well-written prose. Clean code never obscures the designer’s intent but rather is full of crisp abstractions and straightforward lines of control.”
_ Robert C. Martin_

LinkedIn
Portfolio

My Portfolio

Famosa Adegbite — Thu, 01 Dec 2022 20:52:31 +0000

A lot has been said concerning having a portfolio as an engineer, I am a self-taught website developer and Engineer. I have passion for programming and technology. I am a huge fan of mobile responsive web applications, conversant with Node, Vue, React, Python, MySQL, PostgreSQL, Microsoft Excel, Word, PowerPoint, and more.

Your comment, suggestion, and constructive criticism will be highly appreciated. Feedback will go a long way to improving my performance and making necessary decisions. You can check me out🤸‍♀️🤸‍♂️.

Technologies Used:

Figma: For the UI/UX design
HTML5
VUE.js/Vite
CSS
Tailwind
PWA
GitHub: For continuous integration and deployment.
WEB SERVER FOR CHROME: Used to text my application locally.
Interserver.net: For hosting the website
Google AdSense
and more……

Font:
99% of the font used is poppins and it was labeled adefam. Poppins is a geometric sans-serif typeface published by Indian Type Foundry in 2014. It is highly readable, which makes it an excellent choice for both web and mobile.

Color:
The major color theme used is the family of Orange, Blue, and Platinum:

MidNight View:
At midnight from 8pm to 6am, all background color changes to black and most font color changes to white or maintain their default color.

Mobile View:
To the best of my knowledge and testing across platforms using google chrome inspect, the website is mobile responsive.

Accessibility:
The website is accessible using google search engine by typing Famosa Adegbite. Work is in progress to make it more accessible using different keywords and skills related to me.

My Content:
Major stress about personal portfolio website is ability to make constant update and changes without going through the code all over again. 99% of all the contents on my website are in JSON format. If there is any need for changes or update, that will be access by opening the json file.

Home page json file example tag main.json

{
    "mainValue": [
        {
          "id": "1",
          "greetings": "Hi! I am",
          "myName": "Famosa Adegbite",
          "status": "Self-taught website developer and engineer. I have a passion for programming and technology. I'd call myself a Jack of all trades when it comes to technology. I am open-minded and ready to learn new skills.👨‍💻👨‍💻👨‍💻",
         "image": "https://res.cloudinary.com/famosa-adegbite/image/upload/q_auto,f_auto/v1656117940/myPotfolio/WhatsApp_Image_2022-05-26_at_2.21.31_PM_2_msiyuj.jpg",
         "alt": "adefamosa"
        }
       ]
}

OVERVIEW OF THE WEBSITE
The website contains 11 sections: navigation, home, about, education, experience, blog, skills, Gallery, project, comment, and footer.

All this section talked about myself, my experiences, academics, skills, and basic information about me.

The Navigation:
The navigation was grouped into two parts: the header which contains the logo and my contact details (phone number and email address) while the left side navigation contains the logo, click button icons that lead to all the sections of the page and a contact button that leads to my WhatsApp. The Left side navigation is only visible on a big screen but hidden on a mobile screen.

Home Section:
It explains briefly about myself as a self-taught website developer and also contains all my social media links like LinkedIn, Facebook, GitHub and more.

About Section:
This elaborate more about myself, my interest in both tech and non-tech life. It also contains a button label My CV that leads you to my online CV.

Education & Certification:
This shows my academic achievement and some of the certifications I possess which include both soft and professional certifications.

Work Experience:
This section showcases my experiences and a brief description of my job responsibilities. Clicking on the arrow button will show more of my work experience.

Blog:
This section was tagged “Knowledge base” which contains a few of my tech writeup. Hoping to write more blogs on my achievement, experience, and career path.

Skills:
This section contains a few of my tech skills. As a self-taught individual, I learned a lot in order to achieve most of my goals, meet up with the challenging environment and also use the skills acquired to bless the life of others through training and mentoring.

Gallery:
They said seeing is believing, the gallery section display a few of my pictures taken during work, training and seminars.

My Project:
This section showcases a few of my web-related work which include my portfolio. An unknown author said, “Knowledge is knowing what to say. Wisdom is knowing when to say it”. Likewise, Skill is knowing what to do while Project is knowing how and when to do it.

Comment:
The comment section is an interactive section using Facebook social media plugin. Any feedback will go a long way to improving my performance and making necessary decisions.

Footer:
The footer section contains my social media links, email, phone number and a communication form which at the moment is work in progress.

LINKS:

View my portfolio
View the source code

PWA in VUE VITE

Famosa Adegbite — Mon, 21 Nov 2022 17:03:56 +0000

HOW I MAKE MY PORTFOLIO WORK OFFLINE USING VITE PLUGIN PWA
Although, I have learned about PWA since 2020 and used it with regular HTML, CSS and JavaScript applications. Applied it to my VUE VITE applications took another dimension that I like to share.

For those that are hearing PWA for the first time or don’t have ideas of what it is all about!!!

What is PWA?
PWA is a Progressive Web App that makes a website look and behave like a mobile app. PWAs are built to take advantage of native mobile device features without downloading or purchasing on the play store.

Despite the behavior of PWA in app resemblance, it’s never an app but a well-structured website that can replace a mobile app, native app, and desktop site.

Major benefits of PWAs
There are several benefits of PWA but I’m going to mention a few that impress me which include short loading time, accessibility to the website in an offline mode, push notification, and home screen features that make life easier to convert my website to resemble mobile application without visiting Google Play Store or any App Store and can be assessed on all platform either windows, androids or IOs. It cut across all platforms.

SERVICE WORKER IN PWA
Service worker is a web worker written in JavaScript that allows intercepting and control of network requests and asset caching from the web browser, which means it can respond to HTTP requests of the main document, check the availability of a remote server, cache content when that server is available and serve that content later to the document. With service workers, web developers can create reliably fast web pages and offline experiences. It’s a browser feature but it doesn’t have access to the DOM, its role is different than a normal JS script. Service workers can handle push notifications and synchronize data in the background, cache or retrieve resource requests, intercept network requests and receive centralized updates independently of the document that registered them, even when that document is not loaded.

Service workers have three stages that help maintain consistency when switching among versions of service worker:

Registration: It involves informing the browser location of the service worker in preparation for installation.
Installation: It occurs in two ways, first when there is no service worker initially installed in the browser related to the web app, and second when there is an update to the service worker.
Activation: This happened when all of the PWA’s pages are closed in order to avoid conflict between the previous version and the updated version.

Note: Only a single service worker can be active for a domain which means out of all the versions you might have due to update only one of it will be functioning. There are two ways to it, is either you are updating the service worker automatically at the background level without the awareness of the user whenever there is a new update or you inform the user of the new update and decide either to update to the new version or not. It is highly advisable to update if there is any.

MANIFEST IN PWA
PWA Manifest is a JSON file that tells the browser about your Progressive Web App and how it should behave when installed on the user’s desktop or mobile device. A typical manifest file includes the app name, the icons the app should use, and the URL that should be opened when the app is launched, among other things. For comprehensive details about manifest visit there website, it is well detailed and explanatory.

Necessary information provided includes:

The name of the web application
The short name
The description
Theme and background color
Links to the web app icons.
The display mode, which I prefer standalone

Package used: vite-plugin-pwa

Note: Different packages can be used based on how your application is set up. But for my application, I used Vite and have my vite.confige.js file where most of the configuration will occur.

Importance of using vite-plugin-pwa
It helps add PWA with almost zero configuration to existing applications and generates all the necessary files needed for PWA.

The vite-plugin-pwa will generate:

Web App Manifest using the manifest plugin option and configure the Web App Manifest on the application entry point.
Service worker using the strategies plugin option and generate the script to register the service worker in the browser using the injectRegister plugin option.

VITE-PLUGIN-PWA INSTALLATION USING NPM

npm i vite-plugin-pwa -D

To confirm if the installation is successful or not, check under dev dependencies in your package.json

Fig 1.1: Shows the dev dependencies in package.json

VITE-PLUGIN-PWA CONFIGURATION
Most of the configuration is going to take place in vite.config.js file.
Firstly; import the VitePWA plugin in vite config.

import { VitePWA } from 'vite-plugin-pwa'

Secondly: put it to use in the config under plugins:

export default defineConfig({
    plugins: [
       VitePWA({
          registerType: 'autoUpdate'
        })
    ]
})

With this simple configuration, a lot of magic have taken place. The application will be able to generate the Web App Manifest and inject it at the entry point, generate the service worker and register it in the browser.

Wait for a little, no visible changes…. Yes there won’t be any changes until you build your application using npm run build. But before doing that, let's configure all other necessary configurations.

InjectRegister Plugin Option:
This configuration helps to control how to register the service worker in my application, although the configuration is optional, but I set my injectRegister plugins to auto.

export default defineConfig({
   plugins: [
      VitePWA({
         injectRegister: 'auto'
      })
   ]
})

There are 4 ways to do that which is:

Inline method: injectRegister: 'inline' This will inject a simple register script, at the head tag of the application entry point.

<head>
  <script>
    if('serviceWorker' in navigator) {
       window.addEventListener('load', () => {
        navigator.serviceWorker.register('/sw.js', { scope: '/' })
      })
    }
  </script>
</head>

Script Method: injectRegister: 'script' This method will generate a registerSW.js script adding it to the head tag of the application entry point. The Head Tag:

<head>
    <script src="/registerSW.js"></script>    
</head>

The registers.js file will contain normal service worker script.

if('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
      navigator.serviceWorker.register('/sw.js', { scope: '/' })
    })
}

Null Method: injectRegister: null This method will do nothing but allow you to register the service worker manually.
Auto Method: injectRegister: auto Which is the default method, which will normally apply script registration method.

WORKBOX:
One of the major functions of a service worker is to act as proxies intercepting requests between the browser and the server, and the ability for your application to work offline calls for proper configuration of the service worker’s precaches manifest which includes all the resources of your application.
The vite-plugin-pwa plugin uses the workbox-build node library to build the SW which by default includes the CSS, Js, and Html resources in the manifest precache. If there is any need to add other resource types like [ico, JSON, png, SVG, and more] you will need to add them manually to the globPatterns of workbox configuration.

workbox: {
   globPatterns: ['**/*.{js,css,html,ico,png,svg,json,vue,txt,woff2}']
},

MANIFEST
As discussed earlier, a web app manifest is a JSON file that tells the browser about your Progressive Web App and how it should behave when installed on the user's desktop or mobile device.
There are minimal requirements to be met. Making the PWA application installable, there is a need to modify your application entry point, add some minimal entries to Web App Manifest, allow search engines to crawl all your application pages, and configure your server properly.

Basic Entry Point:
The index.html must have some following entries in the <head> section:

mobile viewport configuration
Title tag
Description tag
Favicon tag
Link for apple-touch-icon tag
Link for mask-icon tag
Meta entry for theme-color tag

<head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>My title here</title>
    <meta name="description" content="My description here">
    <link rel="icon" href="/favicon.ico">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
    <link rel="mask-icon" href="/mask-icon.svg" color="#FFFFFF">
    <meta name="theme-color" content="#ffffff">
</head>

WEB APP MANIFEST CONFIGURATION
There are some configurations we had to make in the vite-config.js file to make our Web App Manifest have a perfect result:

A scope: This can be omitted for simplicity. The vite-plugin-pwa plugin uses the Vite base option to configure it by using the default (“/ “). And this was omitted in my configuration.
Name: It is the name you want to give to your app.
Short_name: It is the short form of your name, like a nickname. Note: You must provide at least the short_name or name property. If both are provided, short_name is used on the user's home screen, launcher, or other places where space may be limited. name is used when the app is installed. ·
Description: It is the area to state the purpose of the app or a summary of the app.
Theme_color: The theme_color sets the color of the toolbar and also reflects in the app’s preview in task switchers which must match the configured one on the Entry Point theme-color at the header tag.
Background Color: The background_color is mostly the same color as the load page, to provide a smooth transition from the splash screen to the app.
Display: The display customize what browser UI is shown when the app is launched.
Icons: The Icons are the images that will display on your home screen in which you can define a set of icons for the browser to use on the home screen. Icons property is an array of image objects in which each object must include the src, a sizes property, and the type of image.

Note: You can use PWA manifest Generator to generate all your Icons and manifest configurations.

SEARCH ENGINES
To allow search engines to crawl all the application pages, you have to add robots.txt to the public folder on the application. The public folder must be on the root folder of the application, not inside the src folder.

Fig 1.2: Shows the robots.txt file in public folder.
.
Fig 1.3: Shows the content in robots.txt file.

Fig 1.4: Shows the complete manifest configuration in vite.config.js.

Cleanup Outdated Caches
This will help delete the old cache and update it with a new one after changes. The service worker will store all application assets in a browser cache (or set of caches). Every time you make changes to your application and rebuild it, the service worker will also rebuild, including in its precache manifest all new modified assets, which will have their revision changed (all assets that have been modified will have a new version).
Since Workbox v4.0.0, a Boolean configuration option was introduced.
The option cleanupOutdatedCaches was added to the GenerateSw mode. If it is set to true, a call to workbox.precaching.cleanupOutdatedCaches() will automatically be added to the generated service worker, which will delete any out-of-date precaches which are no longer used by Workbox.
Any version lower than v4.0.0, have to configure to automatically update the new changes and delete the old precach.
For more details check Workbox Changelog site or Worbox-routing site

export default defineConfig({
  plugins: [
    VitePWA({
      workbox: {
        cleanupOutdatedCaches: false
      }
    })
  ]
})

Fig 1.5: Shows the overall vitepwa configuration in vite.config.js.

Building Web Application:
At this point, we can now run npm run build to wrap all the web applications and configure all our service worker and web app manifest.

After the application had been built successfully, all the applications will be wrapped in the dist folder alongside sw.js file, registers.js file, manifest.webmanifest file which is a JSON file, workbox.js file. Also, all our applications CSS, Js, Html, will be rap up in different files inside the assets folder. While all fonts and icons still maintain their normal folder name.
Fig 1.6: Shows the output files after building the app in dist folder.

WEB SERVER FOR CHROME
Web Server for Chrome is one of the environments I use to test my application on my localhost.

Step I: Search for Web Server Chrome extension page and click on Add to Chrome to add it to your chrome page if you don’t have it already.
Fig 1.7: Shows the Web Server for Chrome and where to click.

Step II: Launch the Web Server from your list of Chrome Apps extension.
Fig 1.8: Shows the logo of Web Server in chrome apps.

Step III: The web server will instantly start and a window will appear with a bunch of options. The first thing you’ll need to do is specify a web directory – the place where all of the Html and related files you want to use with your web server are stored. In our case all our files are inside the dist folder. To do so, click the CHOOSE FOLDER button.
Fig 1.9: Shows the choose folder button to be click on Web Server.

Step IV: Navigate to the directory that contains the files that make up your website, select it and click the Select Folder button.
Fig 1.10: Shows the dist folder and select folder button click.

Step V: You can now view the website by visiting the URL http://localhost:8887 or http://127.0.0.1:8887. You can decide to change the setting or click on different options based on your choice.
Fig 1.11: Shows the URL link to be click.

Step VI: The website will be open on the local host and you will be prompted to install it on your browser by clicking the install icons on the right side of the URL link bar.
Fig 1.12: Shows the Installation button on chrome browser.

Step VII: Click on the Icons install on your home screen if you are on mobile or desktop area if you are using a system.
Fig 1.13: Shows the logo of Web app on desktop.

At this point, you can confirm all your configuration if it is working perfectly.
By moving your mouse on the Icons, you will see that the Icon label with the name provided in the manifest configuration and also the description will pop up.
Fig 1.14: Shows the logo name and description.

Let's Open the app, then you will observe the theme_color provided at the title bar alongside the name provided in the manifest and details provided at the title tag.
Fig 1.15: Shows the title and the color theme.

To check the progress of the service worker and monitor the performance, you can go ahead and inspect the web application on the browser and click on the application option.
Fig 1.17: Shows the application area on DevTools.

To further learn about VUE PWA, also on how to inspect and apply push notifications, watch a Master PWA in Vue – JavaScript Marathon presented by Simone Cuomo, a Senior Software Engineer at This Dot Labs

References

Font Awesome and React-Icons in React

Famosa Adegbite — Thu, 11 Mar 2021 10:02:46 +0000

What are Icons?

Icons are visual cues which help communicate concepts on web pages and every other application. Icons also stand as visual language for effective communication and help user interpret a concept correctly.

Where can I find Icons?

Icons are everywhere, and can be use professionally in order to pass across the message intend to and help users understand your content. For more details on where you can get best free Icons

So glad you find this article!
Today we’ll be discussing much on how to incorporate different type of Icons in React using npm package that will enable us to use icons from two major icon libraries;react-Icons and fontawesome Icons.

It has been assumed that you have basic understanding of React, npm packages and have perform necessary configuration, you can visit React site for more information and details.

Get Started

1.) React Icons

Step 1: At your terminal in the root folder of the project, type in this command:

npm install react-icons –save

This command will assist in downloading react-icons package and give us full accessibility to it.
Visit react-icons npm site for more details.

Step 2: Open App.js or any File.js you want to incorporate the Icon into and import Icon component.

import { HiArrowCircleUp } from 'react-icons/hi';

Step 3: Add the IconName imported to our jsx

import React from 'react';
import { HiArrowCircleUp } from 'react-icons/hi';

const MyIcon = () => {
    return (
        <div>
            <HiArrowCircleUp />
        </div>
    )
}
export default MyIcon

Go into your terminal and run:

npm run start

you should get a page with this icon in the top left of your page:

To learn more about IconName and the likes visit react-icons

Step 4: Let apply styles to our Icons by import IconContext component that allows us to do a lot of styles things.

import { IconContext } from "react-icons";

Step 5: Now let wrap our icon in the IconContext component like this:

import React from 'react';
import { IconContext } from "react-icons";
import { HiArrowCircleUp } from 'react-icons/hi';

const MyIcon = () => {
  return (
   <IconContext.Provider >
       <div>
         <HiArrowCircleUp />
       </div>
    </IconContext.Provider>
  )
}
export default MyIcon;

Go into your terminal and run:

npm run start

Step 6: Let style our IconContext component

import React from 'react';
import { IconContext } from "react-icons";
import { HiArrowCircleUp } from 'react-icons/hi';

const MyIcon = () => {
    return (
        <IconContext.Provider value={{ style: { fontSize: '20px', paddingRight: '5px', paddingTop:'6px', color: "rgb(0, 123, 255)" } }}>
            <div>
                <HiArrowCircleUp />
            </div>
        </IconContext.Provider>
    )
}
export default MyIcon;

Go into your terminal and run: npm run start to see the changes

Note: You can always be creative with it. Also you can import IconName from different relevant library.
Here is an example:

import { FontAwesome } from 'react-icons/fa';
import { Ionicons } from 'react-icons/io';
import { MaterialDesign } from 'react-icons/md';
import { Feather } from 'react-icons/fi';
import { GameIcons } from 'react-icons/gi';
import { WeatherIcons } from 'react-icons/wi';
import { DevIcons } from 'react-icons/di';

2.) Fontawesome Icons

Almost the same process in react-icons will be followed but we’ll import different libraries.

Step 1: Install the following packages into your project using a package manager npm.

  npm i --save @fortawesome/fontawesome-svg-core
  npm install --save @fortawesome/free-solid-svg-icons
  npm install --save @fortawesome/react-fontawesome

Step 2: Import FontAwesomeIcon and IconName component into App.js or any File.js you want to incorporate the Icon component.

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faArrowAltCircleUp } from '@fortawesome/free-solid-svg-icons'

Step 3: Add the component imported to our jsx

import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faArrowAltCircleUp } from '@fortawesome/free-solid-svg-icons'

const MyIcon = () => {
    return (
    <div>
         <FontAwesomeIcon icon={faArrowAltCircleUp} />
      </div>

    )
}
export default MyIcon;

Go into your terminal and run:

npm run start

You should get a page with this icon in the top left of your page:

To learn more about fontawesome IconName and the likes visit fontawesome-icons

Step 4: Let style our fontawesome component

import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faArrowAltCircleUp } from '@fortawesome/free-solid-svg-icons';

const MyIcon = () => {
    return (
        <div>
            <FontAwesomeIcon icon={faArrowAltCircleUp} style={{ paddingRight: '5px', fontSize: '30px', color: "rgb(0, 123, 255)" }} />
        </div>
    )
}
export default MyIcon;

Conclusion
Using Font Awesome and React together is a great pairing, If you enjoyed the article, please feel free to leave a like and comment, to help the next dev. Thank you.

Happy Coding

CREATE, UPDATE, ADD and DELETE SEQUELIZE MIGRATION

Famosa Adegbite — Tue, 12 Jan 2021 14:17:06 +0000

Did you have an existing sequelize that you wish to make changes like adding more columns, delete or modify a particular column. Have you been deleting/dropping all the migration completely and re-run migrations all over again for changes to reflect?

If you’ve been doing this before or you are new to sequelize/sequelize cli, dropping database tables in production for the sake of modification is totally wrong.

So glad you found this article, we talk more about how to create a new migration, add new column, update and delete existing column.

But you should have a basic understanding of node, sequelize and configuration, you can visit Sequelize site for more information and details.

Create the First Model:

Once we have properly configured CLI config file, creating our first migration It's as simple as executing a simple command.

Step I: Use model: generate command which will require two options name and attributes. The name is the name of the model (E.g. User, Employee, etc.) while attributes is the list of model attributes. Assuming we have User model, we can have firstName, lastName, and more as the attributes.

npx sequelize-cli model:generate --name User --attributes firstName:string,lastName:string,email:string

This will create a model file user in models folder and create a migration file with a name like XXXXXXXXXXXXXX-create-user.js in migrations folder.
Our models/user.js generated.

'use strict';
const {
  Model, Sequelize
} = require('sequelize');

module.exports = (sequelize, DataTypes) => {
  const User = sequelize.define(
    'User',
    {
      id: {
        type: Sequelize.INTEGER,
        autoIncrement: true,
        allowNull: false,
        primaryKey: true
      },
      firstName: {
        type: DataTypes.STRING,
        allowNull: false,
      },
      lastName: {
        type: DataTypes.STRING,
        allowNull: false,
      },
      email: {
        type: DataTypes.STRING,
        allowNull: false,
      },

    }, {
    sequelize,
    modelName: 'User',
  });

  return User
}

migrations/xxxxxxxxxxxx-create-user.js generated alongside.

'use strict';
module.exports = {
  up: async (queryInterface, Sequelize) => {
    await queryInterface.createTable('Users', {
      id: {
        allowNull: false,
        primaryKey: true,
        type: Sequelize.INTEGER
      },
      firstName: {
        type: Sequelize.STRING
      },
      lastName: {
        type: Sequelize.STRING
      },
      email: {
        type: Sequelize.STRING,
      },
    });
  },
  down: async (queryInterface, Sequelize) => {
    await queryInterface.dropTable('Users');
  }
};

Step II: Run migration command in order to create a table in database we need. Without this, we haven't inserted anything into the database. We have just created the required model and migration files for our first model User.

npx sequelize-cli db:migrate

Note: Before running the migration command, we can make changes to our User model and migration, most especially attribute.

At this point, we have created a user model and migration successfully.

Let's now assumed we’ve started inputting data to the database and want to make changes or modify the database which is our major focus in this article.

1.) Update a column:

Now let's update a column in the migration we have created already.

From the previous model, we have User table, with id, firstName, lastName, and email columns. And we want to update the id datatype from INTEGER to UUID.

queryInterface in migration will be waiting for a new command, including what it should update and in what table should it be done. In that case, we would have to create or generate a new migration.

Step I: Run a migration command to create a new migration file.

$ npx sequelize-cli migration:create --name migration_file_name

Step II: A new migration file has been generated for us. Next, let's edit the new migration file created.

'use strict';
module.exports = {
  up: async (queryInterface, Sequelize) => {
    await queryInterface.changeColumn('Users', 'id', {
      type: Sequelize.UUID,
      defaultValue: Sequelize.UUIDV4
    });
  },
  down: async (queryInterface, Sequelize) => {
    await queryInterface.dropTable('Users');
  }
};

Note: Take note that queryInterface.createColumn from our initial migration file has change to queryInterface.changeColumn in order for us to update the file.

Step III: Run migration command in order to make changes we are about to update in database table we have already created.

npx sequelize-cli db:migrate

By doing this, a notice will be passed to the database in the name of the table and column in the table we want to update, queryInterface will execute the command in the Database.

Step IV: We have to modify our user model (models/user.js), by implementing the changes we made in our database by replacing the INTEGER to UUID, and add defaultValue to Sequelize.UUIDV4.

In models/user.js file.

'use strict';
const {
  Model, Sequelize
} = require('sequelize');
module.exports = (sequelize, DataTypes) => {
  const User = sequelize.define(
    'User',
    {
      id: {
        type: Sequelize.UUID,
        defaultValue: Sequelize.UUIDV4,
        autoIncrement: true,
        allowNull: false,
        primaryKey: true
      },
      firstName: {
        type: DataTypes.STRING,
        allowNull: false,
      },
      lastName: {
        type: DataTypes.STRING,
        allowNull: false,
      },
      email: {
        type: DataTypes.STRING,
        allowNull: false,
      },
    }, {
    sequelize,
    modelName: 'User',
  }); 
  return User
}

2.) Add new column:

Now let's add a new column in the migration we have created already.

From the previous model, we have User table, with id, firstName, lastName, and email columns. And we want to add username column to the table in the database.

queryInterface in migration will be waiting for the new command, including what it should add and in what table it should add it. In that case, we would have to create or generate a new migration:

Step I: Run a migration command to create a new migration file.

$ npx sequelize-cli migration:create --name migration_file_name

Step II: A new migration file has been generated for us. Next, let's edit the new migration file created.

'use strict';
module.exports = {
  up: async (queryInterface, Sequelize) => {
    await queryInterface.addColumn('Users', 'username', {
      type: Sequelize.STRING,
      allowNull: true,
    });
  },
  down: async (queryInterface, Sequelize) => {
    await queryInterface.dropTable('Users');
  }
};

Note: Take note that queryInterface.createColumn from our initial migration file or the update migration file queryInterface.changeColumn has change to queryInterface.addColumn in order for us to add new column to our database table.

Step III: Run migration command in order to make changes we are about to make in database table we have already created.

npx sequelize-cli db:migrate

By doing this, a new column will be added to the database.

Modify user model (models/user.js), by adding the new column username and its attribute.
In models/user.js.

'use strict';
const {
  Model, Sequelize
} = require('sequelize');

module.exports = (sequelize, DataTypes) => {
  const User = sequelize.define(
    'User',
    {
      id: {
        type: Sequelize.UUID,
 defaultValue: Sequelize.UUIDV4,
        autoIncrement: true,
        allowNull: false,
        primaryKey: true
      },
      firstName: {
        type: DataTypes.STRING,
        allowNull: false,
      },
      lastName: {
        type: DataTypes.STRING,
        allowNull: false,
      },
    username: {
        type: DataTypes.STRING,
        allowNull: false,
      },
      email: {
        type: DataTypes.STRING,
        allowNull: false,
      },
    }, {
    sequelize,
    modelName: 'User',
  });

  return User
}

3.) Delete existing column:

Now let's delete existing column in the migration we have created already.

Our database table should have id, firstName, lastName, username, and email columns. Let's delete the username column in the database table.

We are going to repeat the same steps from previous explanation with a modification in our migration file that will change to queryInterface.removeColumn.

'use strict';
module.exports = {
  up: async (queryInterface, Sequelize) => {
    await queryInterface.removeColumn('Users', 'username');
  },
  down: async (queryInterface, Sequelize) => {
    await queryInterface.dropTable('Users');
  }
};

Then run the migration command and don’t forget to modify user model (models/user.js), by removing username column and its attribute.

In models/user.js.

'use strict';
const {
  Model, Sequelize
} = require('sequelize');

module.exports = (sequelize, DataTypes) => {
  const User = sequelize.define(
    'User',
    {
      id: {
        type: Sequelize.UUID,
 defaultValue: Sequelize.UUIDV4,
        autoIncrement: true,
        allowNull: false,
        primaryKey: true
      },
      firstName: {
        type: DataTypes.STRING,
        allowNull: false,
      },
      lastName: {
        type: DataTypes.STRING,
        allowNull: false,
      },
    email: {
        type: DataTypes.STRING,
        allowNull: false,
      },
    }, {
    sequelize,
    modelName: 'User',
  });

  return User
}

Have a great day and stay safe

Happy Coding

DEV Community: Famosa Adegbite

[Boost]

Error Handler

Error Handler

What is asyncHandler.js?

Problem It Solves:

How to Use It:

Why Using asyncHandler?

Directory example:

When to use try/catch after using asyncHandler

So:

Balancing the Art of Clean Code and Meeting Deadlines in Software Development

My Portfolio

PWA in VUE VITE

Font Awesome and React-Icons in React

What are Icons?

Where can I find Icons?

Get Started

1.) React Icons

2.) Fontawesome Icons

CREATE, UPDATE, ADD and DELETE SEQUELIZE MIGRATION

Create the First Model:

1.) Update a column:

2.) Add new column:

3.) Delete existing column:

What is `asyncHandler.js`?

Why Using `asyncHandler`?

When to use `try/catch` after using `asyncHandler`