Forem: mercicodes

Start with Ultra, the new React web framework

mercicodes — Mon, 25 Jul 2022 13:12:00 +0000

Ultra is a modern streaming React framework buily with Deno that heavily relies on the built-in functionality of your browser. It makes use of ES Modules, Import Maps, and Web Streams in the future. All the while, it supports some of the deviations from the norm that many ordinary people enjoy for whatever reason (JSX and TypeScript). Ultra uses Deno and React and focuses on using web streams and native features within the browser.

Let's look at some of the reasons you should consider using Ultra for your next project.

Permissions module: Ultra has the Deno permission-based security module features to allow you to set permissions for running your applications.
Lazy routing: Ultra uses the Wouter a small Hooks-based router for current React and Preact projects to create routes.
Suspense data fetching: Ultra uses the Vercel's SWR with Suspense to allow you to fetch data anywhere in your components.
Service Workers: Ultra uses the vanilla Service Workers to serve, cache, and optimize your website
Dynamic MDX: Ultra has support for MDX to allow you to generate dynamic MDX in your applications.

Project setup

Let's create a small book store application using Ultra.

First, we need to set up a new Ultra project by running the following commands on your terminal.

git clone https://github.com/exhibitionist-digital/create-ultra-app
cd create-ultra-app
deno task dev

The above command will generate the following folder structures below.

**create-ultra-app**
 ┣ src
 ┃ ┣ api
 ┃ ┃ ┗ example.ts
 ┃ ┣ app.tsx
 ┃ ┣ favicon.ico
 ┃ ┗ style.css
 ┣ .gitignore
 ┣ README.md
 ┣ deno.json
 ┣ importMap.json
 ┣ package-lock.json
 ┗ server.ts

Let's look at the folder structures in detail in the next section. Then start the application at http//:localhost:8000/books.

Project structure

Ultra creates the following folder structures.

Server.ts: This code runs Ultra's server.
src: This is the folder where the code for your project is.
app.tsx: This is the root file for every Ultra project.
importMap.json: Here is where dependencies for the project are documented.
deno.json: Here is where the configuration file that allows customizing the built-in TypeScript compiler, formatter, and linter.

Update app.tsx

Let's the app.tsx file to include the Bootstrap CDN to enable the style of the components. Ultra uses react-helmet-async to add markup to the html <head>. To replace the code in <Helmet> component with the code snippet below.

<Helmet>
  <title>Book store</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
</Helmet>

Open Source Session Replay

OpenReplay is an open-source, session replay suite that lets you see what users do on your web app, helping you troubleshoot issues faster. OpenReplay is self-hosted for full control over your data.

Start enjoying your debugging experience - [start using OpenReplay for free]
(https://github.com/openreplay/openreplay).

Create Book Component

Now let's create another folder called component for our components. In the component folder, create a file called Book.tsx and add the code snippet below.

import React from "react";
const BookList = React.lazy(() => import("./BookList.tsx"));

const books = [
  {
    id: 1,
    title: 'The Design of EveryDay Things',
    author: 'Don Norman',
    price: '$22.00',
    coverImage: 'https://miro.medium.com/max/1200/1*ixC7mJJRK55qPhyRwj3iGg.jpeg',
    description: 'Don Norman is a designer who lives and works in San Francisco. He has designed more than 100 products for companies such as Google, Motorola, and eBay. He has also designed products for non-profit organizations such as the World Food Program and UNICEF.',
  },
  {
    id: 2,
    title: 'Things fall Apart',
    author: 'Chinua Achebe',
    coverage: 'https://i0.wp.com/feminisminindia.com/wp-content/uploads/2021/07/Things_Fall_Apart_by_Chinua_Achebe_1_.jpg?fit=1200%2C675&ssl=1',
    description: 'Don Norman is a designer who lives and works in San Francisco. He has designed more than 100 products for companies such as Google, Motorola, and eBay. He has also designed products for non-profit organizations such as the World Food Program and UNICEF.',
  }
];

In the above code snippet, we imported React and the BookList components which we'll create later in this tutorial. Then we created a book array with some book data.

Now let's create and render the JSX for the Book component with the code snippet below.

export default function Book() {
  return (
    <>
      <nav class="navbar navbar-light bg-light">
        <div class="container-fluid">
          <a class="navbar-brand">Book Store</a>
          <form class="d-flex">
            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
            <button class="btn btn-outline-success" type="submit">Search</button>
          </form>
        </div>
      </nav>
      <div class="container-md">
        <div class="row">
          {books.map((book) => (
            <BookList key={book.id} book={book} />
          ))}
        </div>
      </div>
    </>
  );
}

In the above code snippet, we created the JSX for the Book component and render the BookList component passing the book array as props.

Create BookList component

With the Book component created, let's create another component in the component folder called BookList.tsx file and add the code snippet below.

import React from "react";
export default function BookList({ book }) {
    return (
        <div class="col-sm-6">
            <div class="card">
                <img src={book.coverImage} class="card-img-top" alt="..." />
                <div class="card-body">
                    <h5 class="card-title">
                        {book.title}</h5>
                    <p class="card-text">{book.description}</p>
                    <a href="#" class="btn btn-primary">View Details</a>
                </div>
            </div>
        </div>

    );
}

In the above snippet, we created the BookList component. Here we destructure the book array from the props to access the book objects and render them.

Adding Routes

Now let's configure a route for the application. Ultra uses a Wouter router for routing and that is already set up in the app.tsx file for you. But we need to do a few modifications. We'll render the Book component on the /books route.

...
<Switch>
  <Route path="/book">
    <Book />
 </Route>
</Switch>
...

Conclusion

Throughout this tutorial, you've learned about Ultra by creating a simple Book application. We started with the introduction, then we looked at some of the reasons a developer should use Ultra for their projects.
You can learn more about Ultra from the official documentation.

Building sensible UI components with React Suite

mercicodes — Thu, 07 Jul 2022 21:59:11 +0000

How to build a sensible React Component UI using React Suite

When building a React application, developers tend to spend most of the time writing CSS and JSX code to make the application look appealing and easy to use to the end user. In this tutorial, you'll learn how to build a sensible React Component UI using React Suite.

Before we go too deep;

What is React Suite

React Suite is a set of react component libraries for enterprise system products. It is a well-thought-out and developer-friendly UI framework with supports the latest, stable releases of all major browsers and platforms. IE<=10 is no longer supported since React Suite 5.0. React Suite is designed and implemented for use on modern desktop browsers rather than mobile browsers.

What’s new in v5

React Suite V5 has been released with lots of cool features. Let's look at some of them in a moment.

Improve accessibility: All the components provided by React Suite has an improved keyboard operation and screen reading devices.
Add a set of high contrast themes: React Suite has improved on the standard for color contrast requirements and has made great improvements to the components to meet most users.
Use SVG Icon instead of Icon font: Icon font has some rendering problems, which makes the icon blurry, the need to load the font file, and the content area flickers. For better accessibility, Version 5 prefers SVG Icon which is also well compatible with third-party icon resources.
Support CSS variables:Provision has been made in version 5 to provide a set of component CSS variable configurations to make theme customization and theme switching more convenient.
Refactoring React Class Components with Hooks: Most of the React Suite components have been refactored using function and adopted the new features brought by React Hooks to enhance the development experience.
Import on Demand: Version 5 removes the distinction between cjs and esm when importing React Suite components

// v4: cjs
import Button from 'rsuite/lib/Button';
// v4: esm
import Button from 'rsuite/es/Button';

// v5
import Button from 'rsuite/Button';

What we are building

In this tutorial, we'll be building a Photo gallery application to demonstrate how to build a sensible React component with React Suite.

The project we'll be building will look like the one on the screenshot below:

Project Setup

Let's start by setting up the new React project. Run the command below to create a React project.

npx create-react-app react-suite-app && cd create-react-app react-suite-app

The above command will scaffold a new React application and change the directory into the project folder.

Now open the project in your favorite text editor. For the demonstrations in this tutorial, I will be using Virtual Studio Code.

Next, install the React suit module with the command below:

npm i rsuite --save
 #or 
yarn add rsuite

Once the installation is completed, let's proceed to create our components using React Suite.

Create App Components

In our App component, we'll create a navbar where the users can navigate between our components. Open the ./src/App.js file and update the code with the code snippets below:

import "rsuite/dist/rsuite.min.css";
import { Navbar, Nav, Header, Container, Content } from "rsuite";
function App() {
return (
    <div className="show-fake-browser navbar-page">
      <Container>
        <Header>
          <Navbar appearance="inverse">
            <Navbar>
              <Nav>
                <Nav.Item>Gallary</Nav.Item>
                <Nav.Item>Create New</Nav.Item>
              </Nav>
              <Nav pullRight>
                <Nav.Item >Login</Nav.Item>
                <Nav.Item>Signup</Nav.Item>
              </Nav>
            </Navbar>
          </Navbar>
        </Header>
        <Content>

        </Content>
      </Container>
    </div>
  );
}

export default App;

In the above code snippet, we imported the React Suite minified style which will apply styles to our components. We also imported the following components

Container: Which defines the frame of our page
Navbar: To add navigation to our page
Nav: To add the list of the navigation menu
Header: To add a header to our page
Content: To define the contents of the page

Now if you open the application on your browser, you should see the output below.

Create Signup Form

We need to ensure that a user is signup into the application before they can view or add their photos. To do that, we'll create a signup component to enable users to signup. To create a components folder in the src folder, create an AuthModal.jsx file and add the code snippet below:

import { Button, Modal, Form, ButtonToolbar, Message } from "rsuite";

export const AuthModal = (props) => {
  const handleClose = () => props.setOpen(false);
  return (
    <div className="modal-container">
      <Modal open={props.open} onClose={handleClose}>
        <Modal.Header>
          <Modal.Title>
            {props.isLogin ? "Login Here" : "Signup Here"}
          </Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <Form fluid onSubmit={props.isLogin ? props.login : props.signUp}>
            <Form.Group controlId="email-1">
              <Form.ControlLabel>Email</Form.ControlLabel>
              <Form.Control
                name="email"
                type="email"
                onChange={props.setEmail}
              />
            </Form.Group>
            <Form.Group controlId="password-1">
              <Form.ControlLabel>Password</Form.ControlLabel>
              <Form.Control
                name="password"
                type="password"
                autoComplete="off"
                onChange={props.setPassword}
              />
            </Form.Group>
            <Form.Group>
              {props.error && (
                <Message showIcon type="error">
                  {props.error}
                </Message>
              )}
            </Form.Group>
            <ButtonToolbar>
              <Button appearance="primary" type="submit">
                {props.isLogin ? "Login" : "Signup"}
              </Button>
            </ButtonToolbar>
          </Form>
        </Modal.Body>
        <Modal.Footer>
          <Button onClick={handleClose} appearance="primary">
            Ok
          </Button>
          <Button onClick={handleClose} appearance="subtle">
            Cancel
          </Button>
        </Modal.Footer>
      </Modal>
    </div>
  );
};

Here we imported the Modal,Form,Button, Message, ButtonToolbar components to create a modal and form fields for users signup. We made this component reusable so that if we navigate to log in or signup the same Modal will be used for signup and login.

Now update the code in the App.js to show this modal. First, import useState and the AuthModal component.

...
import { useState } from "react";
import { AuthModal } from "./components/AuthModal";
...

Then add onClick events to the login and signup nav.

 <Nav.Item onClick={openLogin}>Login</Nav.Item>
 <Nav.Item onClick={openSignup}>Signup</Nav.Item>

Next, create the state variables, the openLogin ,openSignUp, and the signup methods with the code snippet below:

...
 const [open, setOpen] = useState(false);
  const [isLogin, setIsLogin] = useState(true);
  const [users, setUser] = useState([]);
  const [email, setEmail] = useState(null);
  const [password, setPassword] = useState(null);

  const signUp = () => {
        setUser([...users, { email, password }]);
      };
  const openLogin = () => {
    setOpen(true);
    setIsLogin(true);
  };

  const openSignup = () => {
    setOpen(true);
    setIsLogin(false);
  }; 
...

Finally, Add the AuthModal component in the Content component and pass in the state variables and the methods as props to the AuthModal component

...
 <Content>
  <AuthModal
    open={open}
    setOpen={setOpen}
    isLogin={isLogin}
    setEmail={setEmail}
    setPassword={setPassword}
    signUp={signUp}
  />
</Content>
...

If you go back to your browser, this time you should be able to open the signup modal.

Create Signin Form

Now let's create and implement the logic to log a user in when they have signup into our application. In the App.js file, add the following state variables.

const [error, setError] = useState(null);
const [isLoggedIn, setIsLoggedIn] = useState(false);

Then create a login method. In this method, we'll use the Javascript filter function to search for the record that matches the email and password provided by the user and reset the isLogin state or set an error message

const login = () => {
    const foundUser = users.filter(
      (user) => user.email === email && user.password === password
    );
    if (foundUser.length > 0) {
      setIsLoggedIn(true);
      setError(null);
    } else {
      setError("Email or Password is incorrect");
    }
};

Next, we'll update the props in the AuthModal component with the state variables and login method we just created.

 <AuthModal
   open={open}
   setOpen={setOpen}
   isLogin={isLogin}
   setEmail={setEmail}
   setPassword={setPassword}
   error={error}
   login={login}
   signUp={signUp}
 />

Now if you open the login modal and try to log in as a user, you should the output below;

Open Source Session Replay

Start enjoying your debugging experience - start using OpenReplay for free.

Create the Gallery component

Now that we've been able to implement the login and signup features, Let's create our photo gallery. To do that, create a new component in the components folder, name it Photo.jsx and add the code snippet below:

import { Row, Col } from "rsuite";

export const Photo = (props) => {
  return (
    <Row>
      {props.photos.map((photo) => {
        return (
          <Col md={4} key={photo.id}>
            <img
              src={photo.URL}
              alt={photo.name}
              onClick={() => props.setOpenModal(true)}
            />
          </Col>
        );
      })}
    </Row>
  );
};

In the above code snippet, we imported the Row, and *Col * components from React Suite to define a row and column for the photos in our application. Then we loop the photos array (we'll create it shortly) using the Javascript map function and display the columns. Our photo array has the URL and name properties which store the name of the image and the URL respectively.

Now in the App.js file, import the Photo component and create the photos array state variable.

...
import { Photo } from "./components/Photo";

function App() {
...
const [photos, setPhotos] = useState([]);
...
}

Then add the Photo to the Content component and pass in the required props.

<Content>
...
{isLoggedIn && <Photo photos={photos}></Photo>}
</Content>

In the above code snippet, we used the isLoggedIn state variable to check if the user is logged in before we render the Photo component.

Create Add Photo component

Now let's create another component to allow logged-in users to create and add new photos/images to the application. To do that, create a PhotoModal.jsx file in the component folder and add the code snippet below;

import { Button, Modal, Form, ButtonToolbar } from "rsuite";
export const PhotoModal = (props) => {
  const handleClose = () => props.setOpenModal(false);
  return (
    <div className="modal-container">
      <Modal open={props.openModal} onClose={handleClose}>
        <Modal.Header>
          <Modal.Title>Create New Photo</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <Form fluid onSubmit={props.addPhoto}>
            <Form.Group controlId="name">
              <Form.Group controlId="name">
                <Form.ControlLabel>Image URL</Form.ControlLabel>
                <Form.Control
                  name="name"
                  onChange={(input) => props.setName(input)}
                />
                <Form.HelpText>Required</Form.HelpText>
              </Form.Group>
            </Form.Group>
            <Form.Group controlId="image">
              <Form.Group controlId="image">
                <Form.ControlLabel>Image URL</Form.ControlLabel>
                <Form.Control
                  name="name"
                  onChange={(input) => props.setPhoto(input)}
                />
                <Form.HelpText>Required</Form.HelpText>
              </Form.Group>
            </Form.Group>
            <ButtonToolbar>
              <Button appearance="primary" type="submit">
                Create
              </Button>
            </ButtonToolbar>
          </Form>
        </Modal.Body>
        <Modal.Footer>
          <Button onClick={handleClose} appearance="primary">
            Ok
          </Button>
          <Button onClick={handleClose} appearance="subtle">
            Cancel
          </Button>
        </Modal.Footer>
      </Modal>
    </div>
  );
};

Here we created another modal with form fields using the React suite components. Then we created a handleClose method to handle the closing of the modal, and used other methods and props from the App component like the setPhoto, setName, and addPhoto.

Now import the PhotoModal component.

...
import { PhotoModal } from "./components/PhotoModal";

Add the following state variables and methods.

  ...
  const [openModal, setOpenModal] = useState(false);
  const [photo, setPhoto] = useState(null);
  const [name, setName] = useState(null);

  const addPhoto = () => {
    setPhotos([...photos, { name, URL: photo }]);
  };

  const openPhotoModal = () => {
    setOpenModal(true);
  };
 ...

In the above code snippet, we created the photo and name variables to get the URL and name of the photo from the form fields. Then the addPhoto method to add a new photo to the array of photos and openPhotoModal method to open the PhotoModal.

Next, add the PhotoModal to the Content component and pass in the methods and properties as props.

<Content>
  ...
  <PhotoModal
      openModal={openModal}
      setOpenModal={setOpenModal}
      addPhoto={addPhoto}
      setPhoto={setPhoto}
      setName={setName}
    />
</Content>

Finally, update the Create New nav by adding an onClick action which will allow the user to open the modal when they are logged in.

  {isLoggedIn && <Nav.Item onClick={openPhotoModal}>Create New</Nav.Item>}

Now you can log in and add a new photo to the application.

Add Custom Styling.

Now update the styles in the App.css file with the code below to give all the images/photos a fixed width.

img{
  width: 100%;
}

Then import the file into the App.js file.

import "./App.css";

Test Application

I have added two more photos to the application.

Go ahead and add more to test it out.

Conclusion

So far, you’ve created a Photo gallery application using React and React Suite components. We started with introducing new features in v5 and then creating a demo application. I believe practice makes a difference, so feel free to clone the Github repo for this project and extend the functionalities of the application.

Bye for now, see you in the next one.

How to Build Node.js REST API with MySQL

mercicodes — Thu, 28 Apr 2022 06:02:48 +0000

In this tutorial, you'll build a simple database for adding, updating, and removing todos, this tutorial will show you how to create a REST API with Express and MySQL. The GitHub repository for this project can be cloned to follow along. Let's get started, shall we?

Getting started

This tutorial is a hands-on demonstration. Be sure you have the following in place before getting started:

MySQL Database installed
Node.js installed

What is MySQL databases

MySQL is an open-source relational database management system (RDBMS) (RDBMS). It's the most often used database system with PHP. MySQL is a cloud-native database solution that comes with full management. HeatWave, a built-in high-speed query accelerator, increases MySQL performance by 5400x.

Oracle Corporation created, distributed, and maintained MySQL, which has the following functionalities.

The data in a MySQL database is organized into tables with columns and rows.

MySQL is a server-based database management system.
MySQL is a great choice for both small and large projects.
MySQL is a database system that is extremely quick, dependable, and simple to use. It makes use of normal SQL.
MySQL runs on a variety of platforms.

Project Setup

Now that we have explored what MySQL database is all about, let's dive into creating our RESTFul application. First, we need to create a folder for our project with the command below:

mkdir rest-todos && cd rest-todos

The above code will create a rest-todos folder and change the current directory to it. Then, using the command below, we'll create a new node.js project:

npm init -y

Next, we'll install the dependencies we require for our project.

npm install express MySQL cors

Creating our Express server

Now that we have our dependencies installed let's create an app.js file and add the following code snippet below to it. We'll import the following:

const express = require("express");
const cors = require("cors");
const AppError = require("./appError");
const errorHandler = require("./errorHandler");

Next, we create an app instance from express, using the express.json() middleware in our app to parse the URL encoded body. Finally, we make our API router middleware listen to incoming requests to the URL specified.

Then, we check for URLs missing from our endpoints and throw a 404 error to the user if they're accessed. The global error handler will handler we will have it setup in a later section.

app.use(api, router);

app.all("*", (req, res, next) => {
 next(new AppError(`The URL ${req.originalUrl} does not exists`, 404));
});
app.use(errorHandler);

const PORT = 3000;
app.listen(PORT, () => {
 console.log(`server running on port ${PORT}`);
});

module.exports = app;

connecting to MySQL

Now let's go ahead and set up our MySQL Database. First, we'll open our MySQL shell with the command below:

mysql -u root -p

The above command will prompt for your root password. Enter the password and press the Enter key to continue.

Then, create a database from your MySQL shell with by running the SQL statements below.

CREATE DATABASE

Then, create the tasklist table by running the SQL statements below. The table will have an id, name, status, date_created fields. The id is the primary key of our table.

CREATE TABLE tasklist(id int NOT NULL AUTO_INCREMENT,
name varchar(50) NOT NULL, 
status varchar(50), 
date_created DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, 
PRIMARY KEY (id));

Next, create a dbConfig.js file and add the following code snippets below to it to connect the application to MySQL database.

const mysql = require('mysql');
const connection = mysql.createConnection({
 host: "localhost",
 user: "root",
 password: "1234",
 database: "todo",
});

connection.connect();

module.exports = connection;

Create our controllers

Let's get started building our application's routes.

Create a controllers folder in our project root directory, then an app.js file in the controllers folder.

Our global error handler and MySQL database connection will be imported first.

const AppError = require("./appError");
const conn = require("./dbConfig");

The next step is to setup our getAll handler, which will retrieve all of the todos in our database. The MySQL query method will be used in this handler, which takes a SQL query and a callback function as inputs. We'll use the AppError class to return an error to the user if an error happens during the operation.

exports.getAll = (req, res, next) => {
 conn.query("SELECT * FROM tasklist", function (err, data, fields) {
   if(err) return next(new AppError(err))
   res.status(200).json({
     status: "success",
     length: data?.length,
     data: data,
   });
 });
};

Next, create our createTask handler to add new todos to our database. First, we need to check if the user is sending an empty form before saving the data.

exports.createTask = (req, res, next) => {
 if (!req.body) return next(new AppError("No form data found", 404));
 const values = [req.body.name, "pending"];
 conn.query(
   "INSERT INTO tasklist (name, status) VALUES(?)",
   [values],
   function (err, data, fields) {
     if (err) return next(new AppError(err, 500));
     res.status(201).json({
       status: "success",
       message: "todo created!",
     });
   }
 );
};

Then, to get our todos by IDs, we develop a getTask handler. First, we'll see if the id is supplied in the request field, and if it isn't, we'll return an error to the client.

exports.getTask = (req, res, next) => {
 if (!req.params.id) {
   return next(new AppError("No todo id found", 404));
 }
 conn.query(
   "SELECT * FROM tasklist WHERE id = ?",
   [req.params.id],
   function (err, data, fields) {
     if (err) return next(new AppError(err, 500));
     res.status(200).json({
       status: "success",
       length: data?.length,
       data: data,
     });
   }
 );
};

Next, to update our todos, we'll write our updateTask handler, which will edit the todo whose id is in the request parameter to be completed.

exports.updateTask = (req, res, next) => {
 if (!req.params.id) {
   return next(new AppError("No todo id found", 404));
 }
 conn.query(
   "UPDATE tasklist SET status='completed' WHERE id=?",
   [req.params.id],
   function (err, data, fields) {
     if (err) return next(new AppError(err, 500));
     res.status(201).json({
       status: "success",
       message: "todo updated!",
     });
   }
 );
};

Finally, to delete a todo from our database, we'll create a deleteTask handler. To delete a todo whose id is the request argument, we'll use the delete statement.

exports.deleteTask = (req, res, next) => {
 if (!req.params.id) {
   return next(new AppError("No todo id found", 404));
 }
 conn.query(
   "DELETE FROM tasklist WHERE id=?",
   [req.params.id],
   function (err, fields) {
     if (err) return next(new AppError(err, 500));
     res.status(201).json({
       status: "success",
       message: "todo deleted!",
     });
   }
 );
}

Create our Error handlers

Now that we have all our API controllers setup, let's go ahead and create our error class function with the code snippet below:

class AppError extends Error {
 constructor(msg, statusCode) {
   super(msg);

   this.statusCode = statusCode;
   this.error = `${statusCode}`.startsWith('4') ? 'fail' : 'error';
   this.isOperational = true;

   Error.captureStackTrace(this, this.constructor);
 }
}
module.exports = AppError;

Then, without stopping our program, check for probable issues and deliver the associated error and status code to the client.

module.exports = (err, req, res, next) => {
 err.statusCode = err.statusCode || 500;
 err.status = err.status || "error";
 res.status(err.statusCode).json({
   status: err.status,
   message: err.message,
 });
};

Create routes

Now let's create API routes to access our controllers. Create a router.js file and add the code snippets below:

const express = require("express");
const controllers = require("./controllers");
const router = express.Router();

router.route("/").get(controllers.getAllTodos).post(controllers.createTodo);
router
 .route("/:id")
 .get(controllers.getTodo)
 .put(controllers.updateTodo)
 .delete(controllers.deleteTodo);
module.exports = router;

Now update the app.js file to import our router with the code snippet below:

...
const router = require("./router")
app.use("task/", router);
...

Conclusion

Throughout this tutorial, you've learned how to build a REST API in Node.js by creating a todo application. You add more features like authentication, and authorisation to the application you just built.