Forem: Jaskaran Singh

'N' and 'E' of MERN - Basics of Node.js and Express.js

Jaskaran Singh — Wed, 21 Jul 2021 13:06:04 +0000

Introduction

What is Node.js?

Node.js is an open-source, cross-platform, back-end, JavaScript runtime environment that executes JavaScript code outside a web browser.

Open source - because it’s source code is available for use and modification legally.
Cross platform - works across different platforms like Linux, OSX and Windows.
Backend - receives requests from clients and contains the logic to respond to it.
JS runtime environment - where JavaScript code gets parsed and executed.

Node is a JavaScript environment built on the same JavaScript engine used in Google’s Chrome web browser. It has some great features that make it an attractive choice for building server-side applications, including web servers and web services for platform APIs.

Primary goals of this article -

Understand how Node.js applications are built
Implement a TODO application using Node.js
Implement REST APIs using Express.js

Prerequisite - As Node.js is based on JavaScript, it’s easier to learn to get started with for developers who know JavaScript. This also means that both the frontend and backend can now be written with just JavaScript knowledge.

Before we jump in, make sure you have node installed.
Install from Here.

Let's get started-
Let’s look at how to create a simple server using Node.js

create a file app.js and paste the following code-

// File: app.js

const http = require('http');
const port = 8081;

http.createServer((request, response) => {

    // Set response status code and response headers
    response.writeHead(200, { 'Content-Type': 'text/html' });

    // Set response body i.e, data to be sent
    response.write('<h1>TODO</h1>');

    // Tell the server the response is complete and to close the connection
    response.end();

}).listen(port, () => {

    // Log text to the terminal once the server starts
    console.log(`Nodejs server started on port ${port}`)

});

Execute node app.js in the terminal. You will see the following in terminal-

Nodejs server started on port 8081

Basically your server has started on port 8081 !!
Let's test it with curl:

curl -X GET http://localhost:8081

Or visit http://localhost:8081 in your browser to see the response sent by the above server.
That’s it! You’ve just built your first Node app.

So, What's happening with above code?
http is an inbuilt Node module, you can use require() to import it.
The http module exposes a function createServer() which can be used to create an HTTP server.
You have to pass a callback function as a parameter to the createServer() function. This function gets executed every time the server receives a request. The parameters to the callback function are the HTTP request and response objects.
We used these response object methods -

writeHead() - the first parameter is the response status code and the second any response headers.
write() - to add response body to be sent back to the client.
end() - tells the server that the response is complete. and OfCourse, we can add any number of response.write() calls before response.end() is called to send more data.

Here, We are just sending a h1 tag with text as 'TODO'.
curl command prints out the response as such-

<h1>TODO<h1>

The browser renders the HTML tag and displays an h1 heading with text, TODO.

The listen() method sets the port in which the server listens to the requests. You can also add a callback function to listen() which will get executed once, when the server starts. Normally, we add lines such as Nodejs server started on port 8081 to make sure that server is listening.

Routing

Ok. So currently our server sends same response (h1 Tag) with status code 200 to every( irrespective of url and method) request it receives.
Let's change the body of createServer() method with following-

const { method, url } = request;
//fetch request method and path by using the request object’s method and url properties.

if (url == "/todos") {

    if (method == "GET") {
        response.writeHead(200, { 'Content-Type': 'text/html' });
        response.write('<h1>TODO</h1>');
        response.write('<p>Track your work</p>');
    } else {
        response.writeHead(501); //or response.statusCode = 501
    }

} else {
    response.writeHead(404);
}

response.end();

Now the server checks if url variable is /todos ?
If so, check if method is GET ?
If so, return the header and HTML response
Else, return just a 501 status code
Else, return 404 status code.

Now if you try to

curl -X GET http://localhost:8081/random

Can you guess what response are you going to get from server?
The url path is /random, so server sends response with status code as 404.
if you try to

curl -X POST http://localhost:8081/todos

yes, the url is /todos, but the method is POST, now you will get response code as 501.

Note that - 200 OK response status code is send by default if it’s not set explicitly.

Request Body

The request object that's passed in to a handler implements the ReadableStream interface. This stream can be listened to or piped elsewhere just like any other stream. We can grab the data right out of the stream by listening to the stream's 'data' and 'end' events.
The request.on() method can be used to look for the stream events. The data is read in chunks and is a buffer.
Once the whole data is read (known by the end event), you can parse the JSON data as a JavaScript object using the JSON.parse() function.

let body = '';

    request.on('error', (err) => {
        console.error(err);

    }).on('data', (chunk) => {

        body += chunk;  //keep concatenating the chunk 

    }).on('end', () => {
        body = JSON.parse(body);
    });

URL Module

What if we want to filter the response based on url parmaters??
We can use the Built-in URL Module-
The URL module splits up a web address into readable parts.


var url = require('url');
var adr = 'http://localhost:8081/default.htm?year=2017&month=february';  //request.url
var q = url.parse(adr, true);

console.log(q.host); //returns 'localhost:8081'
console.log(q.pathname); //returns '/default.htm'
console.log(q.search); //returns '?year=2017&month=february'

var qdata = q.query; //returns an object: { year: 2017, month: 'february' }
console.log(qdata.month); //returns 'february'

Now, If you have gone through the complete article up to this point, you have really good knowledge of Node.js and of course, there are always so many new things to explore.

Express

Express.js is a Node.js framework and makes it easier to build APIs.
We will be implementing the same APIs we created using Node.js. You can then compare both the implementations to view how Express.js makes it easier.
First, let’s get Express to work on your system.

$ npm install express

Express enables you to create a web server that is more readable, flexible, and maintainable as compared to developing a web server using only the Node HTTP library, which can get complicated for even the most basic web servers.

Routing in Express and HTTP Methods

The syntax for defining a route handler function is:

app.httpMethod(path, handler) {...}

Here, httpMethod can be get, put, post, delete, etc. The path is the actual route where the request will go and the handler is the same callback function which were passing to createServer() in node.js that is it will execute when the requested route is found.
Let's implement the GET API to the /todos path using Express

const app = express();

app.get("/todos", (request,response) => {
    response.status(200);
    response.send('<h1>TODO</h1>');

});
const port = 8081;

app.listen(port, function(){

    console.log(`Nodejs server started on port ${port}`)

});

Express Server is initialized using the express() method.
For GET, we used app.get() method, likewise you will use app.post(), app.delete() etc. for other HTTP methods.
The response object’s send() method is used to send the response body.
To bind the server to a port, you use the listen() method on the Express application, app.

As Javascript is a case-sensitive language, app.GET() won’t work.

Express Middlewares

Middleware functions are those that have access to request and response objects just like we do within routes. Middlewares are capable of changing requests, response objects, and can end the response cycle as well. You can think of middleware as a stack of functions that gets executes whenever a request is made to the server.
Generally, a middleware function takes 3 parameters: a request object, a response object, and a "next" function. Whenever you write a middleware, you must call this next() function at the end of every middleware function you write. In order to use middleware in your application, you have to make a call to app.use() and pass a middleware function as an argument.
For example-

// User defined Middleware
app.use(function(req, res, next){
   console.log('Inside Middleware function...');
   next();
});

If you do not call next(), no more route handlers or middleware will be processed. If still for some reason, you don't want to call next() then just send a response to the client, or else the client will remain in hang state and eventually get timed out.

Now we have basic understanding of Express, let's complete our TODO application using Express.

const express = require('express'); 
//importing express

const app = express();
//initializing express app

app.use(express.json())
//express.json() middleware to parse the request body as JSON.

const port = 8081

let todoList = ["Complete writing blog", "Complete project"];

/* Get all TODOS:   
** curl -v http://localhost:8081/todos
*/
app.get("/todos", (request, response) => {
    response.send(todoList);
});

/* Add a TODO to the list
** curl -v -X POST -d '{"name":"Plan for next week"}' http://localhost:8081/todos -H 'content-type:application/json'
*/
app.post("/todos", (request, response) => {
    let newTodo = request.body.name;
    todoList.push(newTodo);
    response.status(201).send();
});

/* Delete a TODO to the list
** curl -v -X DELETE -d '{"name":"Complete writing blog"}' http://localhost:8081/todos
*/
app.delete("/todos", (request, response) => {
    let deleteTodo = request.body.name;
    console.log(deleteTodo);
    for (let i = 0; i < todoList.length; i++) {
        if (todoList[i] === deleteTodo) {
            todoList.splice(i, 1);
            response.status(204).send();
        }
    }
});

app.all("/todos", (request, response) => {
    response.status(501).send()
})

app.all("*", (request, response) => {
    response.status(404).send()
})

app.listen(port, () => {
    console.log(`Nodejs server started on port ${port}`)
});

What is app.all()?
To send a 501 status code for requests to /todos other than GET, POST and DELETE, we can use the app.all() method below the current set of routes.
Express returns a 404 status code with HTML content by default for any unimplemented route or we can also use the app.all() method at the end to add a custom 404 handler.

Conclusion

Congratulations on making till the end. We have learned a lot in this article, I hope you now have a decent knowledge of Node and Express. Now you can create simple applications using the Node.js framework, Use Node.js to create a web server that listens to multiple routes, Utilize the Express.js library in your Node applications. I will come with more articles on this topic soon.

Till then: Keep Learning :)

Also, please ❤️, if you liked this article.

Would You React ? - Build a Video App

Jaskaran Singh — Sat, 03 Jul 2021 10:25:25 +0000

Introduction

What is React?

React is a popular JavaScript frontend library open-sourced by Facebook. It allows you to create and re-use UI elements. React was born out of the need to solve the problem of the browser DOM being slow. It's famous and mostly used for a multitude of reasons.

Why use React?

Reusable components - React is component-based meaning that components are the building blocks of a React UI. A component describes how a smaller section of the UI looks like and is reusable. Complex applications can be built by nesting components within other components.

SPA - Another important thing about React is that it’s a Single Page Application (SPA). This means React doesn’t fetch a completely new web page when the user has to be shown a different view, it just re-writes the current web page with any new data fetched from the backend server.

Fast rendering with virtual DOM - Updating DOM is usually the bottleneck when it comes to the web performance. React uses virtual DOM; a DOM kept in memory. Any view changes are first reflected to virtual DOM, then the previous and current state of the virtual DOM is compared and only necessary and minimum changes are applied to DOM. This is the main reason behind React’s high performance.

Primary goals of this Article -

Understand how React renders HTML to UI.
Understand how to use JSX.
Understand React components, states, props and Lifecycle methods.
Create a React application (videos) from scratch.

Getting Started -

First, go to Terminal, and type -

npx create-react-app videos

This instruction creates a template of React application with name videos
To run your app on localhost:3000 in your browser, in your terminal type-

cd videos
npm start

This is how it will look like in Browser-

Cleanup -

Open src folder and delete the following files - App.test.js, logo.svg, setupTests.js
Delete everything in App.js and Index.js file.

Now that we have setup project and cleaned up unnecessary files, we can proceed to understand React.

In Index.js file, place following content-

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.querySelector('#root'));

Lines 1 and 2: Importing the react and react-dom libraries. The react module is used to write HTML code within JavaScript (JSX) and react-dom is used to execute the render function that will display the contents onto the page.
Line 3: Importing App Component.
Line 4: Render App in a container which has an id of root.

The ReactDOM.render method-
What this method does is plugs in the App component to Browser's DOM. First parameter it takes is the React component to render and the second magic parameter is how we specify where in the public/index.html file we need to plug the component into. You’ll find a <div> element with id, root in public/index.html. This <div> element is the React container node. When the render() function is first called, the whole of the container node is replaced with App component.

Now we will be writing our App component (go to App.js file), But before that let's understand the basics -

JSX - React can support statements using JSX (JavaScript XML) which allows to use HTML like statements for creating UI elements (components) within JavaScript. You’ll find the JSX notation much easier to use as it’s very similar to how we write HTML.

Components - As said before, React is component based, Components are the building blocks in React and group of elements make up a component. Usually there’ll be a component each to define how the navigation bar looks, the content tab looks, login form looks etc. This also helps to wrap both the visual (elements) and logical (functions) aspects of a UI section together.

Breaking down our project into Components -

There will be 4 components in the Application.

Searchbar (on Top)
VideoDetail (on Left)
VideoList (on Right)
VideoItem (Items of VideoList)

Functional Components -
The simplest way to define a component is to write a JavaScript function.
in app.js -

import React from 'react';

function App(props) {
    return ();
}

This function is a valid React component because it accepts a single “props” object argument with data and returns the elements to be rendered when the component is rendered. We call such components “functional components” because they are literally JavaScript functions.

Class Based Components -
When creating a React component, the component's name must start with an upper case letter. The component has to include the extends React.Component statement, this statement creates an inheritance to React.Component, and gives your component access to React.Component's functions. A React component must at least have the render() function. The render() function returns the elements to be rendered when the component is rendered.

To render a component "Component", use the <Component /> tag.

For our App Component (App.js)
This is equivalent to the above functional component.

import React from 'react';

class App extends React.Component {
  render() {
    return ();
  }
}

Managing State in Class Components -
Data related to a particular component can be stored as its "state". State of a component can only be changed from that particular component only. All the state variables go inside a class variable, state, as key-value pairs.
React re-renders the UI whenever state changes.

Modifying the state-

Do not Modify State Directly, as this will not re-render a component.
Instead use setState(). when setState() is called, React knows the state has changed, and calls the render() method again to learn what should be on the screen. For example,

state = {selectedVideo: null}

//Wrong
this.state.selectedVideo = 'Something'

//Correct
this.setState({ selectedVideo: 'Something' })

Within the JSX notation, we can also plugin regular JavaScript expressions by wrapping them in braces ("{}").
For example -


<h1>{ 2 + 5 * 8 }</h1>

<p> Current Selected Video is : {this.state.selectedVideo} </p>

Please note that in early days, state could only be used in class components, not in functional components. That’s why functional components were also known as stateless components.
However, after the introduction of React Hooks, state can now be used both in class and functional components.
In this project we are not using React Hooks, therefore we will be using class components if it requires a state variable otherwise we use simple function component.

Props to inherit Properties -
Suppose that user has selected some Video which we store in this.state.SelectedVideo state variable. To Display that video in our VideoDetail component, we have to pass the information of selected video to VideoDetail component. Props or properties allow us to pass data from the parent components to the child components. We can pass "props" value to an individual component by passing it similar to how we do for an HTML attribute.

<VideoDetail video={this.state.selectedVideo} />

video is a defined prop here and contains selectedVideo data. Then we can pass data with props like we’re giving an argument to a function:

const VideoDetail = (props) => {
   // code
}

And finally, we use dot notation to access the prop data and utilise it as `props.video'

In Class Components, we can access properties as this.props.video

Note that the elements of JSX are just JavaScript objects. This means that a JSX element’s props and children can be anything that you could place in a JavaScript variable — they can be strings, state variables, other components, or even functions. You will see in project, how we can pass different things as props to components.

Lifecycle Methods-
The lifecycle of an instance of a React component comprises three phases.
Mounting - when it gets created and inserted into the DOM.
Updating - when it gets updated or re-rendered due to a change in its state values.
Unmounting - when it gets removed from the DOM.
Each of these lifecycle phases involves executing a set of lifecycle methods.

1.componentDidMount() - is called immediately after the component gets mounted and can be used to perform initializations which’ll require the DOM nodes to be in place. here we can perform tasks like fetching data from an API.

2.componentDidUpdate() - A component will be updated/re-rendered whenever any of its props or state values changes. componentDidUpdate() is called immediately after a component is updated. It can be used to implement any logic to execute after re-rendering.

There are other lifecycle methods which I will not be explaining in this article. We will be only using componentDidMount() in this project.

ok!!

Now that we’ve gotten this out of the way, it’s finally time to get our feet wet!

Important - We will use semantic ui for styling components. (Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML.) For that, Add this line inside head in public/index.html -

<link rel = 'stylesheet' href = "https://cdnjs.cloudflare.com/ajax/libs/semanticui/2.4.1/semantic.min.css" integrity = "sha512-8bHTC73gkZ7rZ7vpqUQThUDhqcNFyYi2xgDgPDHc+GXVGHXq+xPjynxIopALmOPqzo9JZj0k6OqqewdGO3EsrQ==" crossorigin = "anonymous" />

Project Folder Structure -

Also, please note that this article's goal is to primarily focus on React concepts. So please feel free to ignore irrelevant topics.

index.js -`

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

ReactDOM.render(<App />, document.querySelector('#root'));

apis/youtube.js

import axios from 'axios';

// create your youtube api key and place it here
const KEY = YOUR_API_KEY;

// setting up base instance in which you can define a URL and
// any other configuration elements.
// and exporting as default.

export default axios.create({
    baseURL: 'https://www.googleapis.com/youtube/v3',
    params: {
        part: 'snippet',
        maxResults: 5,
        key: KEY
    }
});

// we can import this instance from other files and no longer need to write 
// whole URL everytime we call API

VideoItem.js

import './VideoItem.css';
import React from 'react';

// takes props video object and onVideoSelect function
// we call onVideoSelect when user clicks the video

// What does a VideoItem Component contains?
// yepp, Video Thumbnail and Video title

const VideoItem = ({ video, onVideoSelect }) => {
    return (
        <div onClick={() => onVideoSelect(video)} className="item video-item">
            <img alt={video.snippet.title} className="ui image" src={video.snippet.thumbnails.medium.url} />
            <div className="content">
                <div className="header">{video.snippet.title}</div>
            </div>
        </div>
    );
}

export default VideoItem;

VideoItem.css

.video-item{
    display: flex !important;
    align-items: center !important;
    cursor: pointer;
}

.video-item.item img{
    max-width: 180px;
}

VideoList.js

import React from 'react';
import VideoItem from './VideoItem';

// takes videos (video array) and onVideoSelect function
// What does a VideoList contain?
// yepp, List of Video (specifically VideoItems)
// So we iterate over videos array and make a VideoItem for each
// Note We are passing video and OnVideoSelect as props to VideoItem

const VideoList = ({ videos, onVideoSelect }) => {

    const renderedList = videos.map((video) => {
        return <VideoItem key={video.id.videoId} onVideoSelect={onVideoSelect} video={video} />;
    })

    return <div className="ui relaxed divided list">{renderedList}</div>;

}

export default VideoList;

VideoDetail.js

import React from 'react';

// videoDetail takes the selectedVideo and displays its info.

const VideoDetail = ({ video }) => {
    if (!video) {
        return <div>Loading...</div>;
    }

    //This url is for fetching selectedVideo
    const videoSrc = `https://www.youtube.com/embed/${video.id.videoId}`;

    return (
        <div>
            <div className="ui embed">
                <iframe title="video player" src={videoSrc} />
            </div>
            <div className="ui segment">
                <h4 className="ui header">{video.snippet.title}</h4>
                <p>{video.snippet.description}</p>
            </div>
        </div>
    );
}

export default VideoDetail;

SearchBar.js

import React from 'react';

// state variable "term" stores what user types in searchBar

class SearchBar extends React.Component {
    state = { term: '' };

    // this sets the "term" to what user types in. (in sync)
    onInputChange = (e) => {
        this.setState({ term: e.target.value });
    }

    // it is called when user submits the "term"
    // which in turn calls the onTermSubmit() function passed as its prop
    onSearchBarSubmit = (e) => {
        e.preventDefault();
        this.props.onTermSubmit(this.state.term);
    }

    render() {
        return (
            <div className="ui segment search-bar" style={{ marginTop: '20px' }}>
                <form onSubmit={this.onSearchBarSubmit} className="ui form">
                    <div className="field">
                        <label>Video Search</label>
                        <input
                            style={{ backgroundColor: 'whitesmoke' }}
                            type="text" value={this.state.term}
                            onChange={this.onInputChange}
                        />
                    </div>
                </form>
            </div>
        );
    }
}

export default SearchBar;

App.js

import React from 'react';
import SearchBar from './SearchBar';
import VideoList from './VideoList';
import youtube from '../apis/youtube';
import VideoDetail from './VideoDetail';

class App extends React.Component {
    state = { videos: [], selectedVideo: null };
    // videos - array of videos based on term that user passed in searchbar (initally empty)
    // selectedVideo - video selected to display on left 


    // this lifecycle method is called when App component gets mounted 
    componentDidMount() {
        this.onTermSubmit('dev.to');
    }
    // Note that here 'dev.to' is initial term for which videos will be searched
    // It is random



    // This function is the one that accepts the term and fetches videos
    // and set "videos" state variable to fetched videos and
    // selectedVideo to the first video of videos
    onTermSubmit = async (term) => {
        const response = await youtube.get('/search', {
            params: {
                q: term
            }
        });
        this.setState({ videos: response.data.items, selectedVideo: response.data.items[0] });
    }

    onVideoSelect = (video) => {
        this.setState({ selectedVideo: video });
    };

    render() {
        return (
            <div className="ui container" style={{ backgroundColor: 'whitesmoke', padding: '40px' }}>
                <SearchBar onTermSubmit={this.onTermSubmit} />
                <div className="ui grid">
                    <div className="ui row">
                        <div className="eleven wide column">
                            <VideoDetail video={this.state.selectedVideo} />
                        </div>
                        <div className="five wide column">
                            <VideoList onVideoSelect={this.onVideoSelect} videos={this.state.videos} />
                        </div>
                    </div>
                </div>
            </div>
        );
    }

}

export default App;

Conclusion

In this Article, we learned basic concepts of ReactJS and how these concepts are applied in a Real Project. Now that you have basic understanding of React, you can move to more advanced topics such as Hooks, Redux etc.

Thanks for Reading

This is my first ever post on Dev. I hope you enjoy this and wasn't overwhelming. If you liked the article, please ❤️. Happy coding 😊.