Tutorial React.js and Node.js Performance (HTTPS and HTTP2 Servers)

With this tutorial you can check the performance of a React.js Application with a HTTPS and HTTP2 Node.js Servers.

🔖 Description

🚀 HTTP/2 will make our applications faster, simpler, and more robust — a rare combination — by allowing us to undo many of the HTTP/1.1 workarounds previously done within our applications and address these concerns within the transport layer itself. Even better, it also opens up a number of entirely new opportunities to optimize our applications and improve performance!

Google Developers | Introduction to HTTP/2 Node.js HTTPS Documentation
Node.js HTTP2 Documentation
React.js Website
MDN Mozilla | MIME types
Lighthouse Documentation

📹 Video Demo

The following video shows how you can check the difference between an https and http2 server with a react.js application.

📌 Methodologies and Guidelines

List of methodologies and tools used in this project for compliance with Quality Assurance Code (QAC)

• ESTlint, tool for identifying and reporting on patterns found in ECMAScript/JavaScript code.
  NPM ESLint
  NPM ESLint | Airbnb

✅ Prerequisites

In order to work with this project, your local environment must have at least the following versions:

• NodeJS Version: 14.xx
• NPM Version: 7.10.0

📐 How to work with this project

This project is built on the basis of several workspaces: back, front and performance. After installing the dependencies you will find several folders "node_modules".

You have to do the following steps to be able to work with this project.

1️⃣ Install Nodejs Dependencies

$npm i

2️⃣ Build React.js Application

$npm run build

3️⃣ Run HTTPS Server and Performance Test

$npm run server-https
$npm run performance-https

4️⃣ Run HTTP2 Server and Performance Test

$npm run server-http2
$npm run performance-http2

📂 Code scaffolding

/
├── assets 🌈               # Images Sources.
├── back 📁                 # Backend Project with https and http2 Node.js servers.
├── build 📦                # Frontend static compiled Application.
├── front 📁                # Frontend Project with React.js library.
├── performance 📁          # Performance Project Test with Lighthouse library.
├── reports 📊              # Html static files with performance results.
└── ...

⛽️ Review and Update Sependencies

For review and update all npm dependencies of this project you need install in global npm package "npm-check-updates" npm module.

# Install and Run
$npm i -g npm-check-updates
$ncu

License

MIT

Happy Code

Created with JavaScript, lot of ❤️ and a few ☕️

This README.md file has been written keeping in mind

GitHub Markdown
Emoji Cheat Sheet