Vite and Node.js: Running a Local Server

Introduction

In order to build our frontend, we needed to see what our website looked like as we constructed it. In order to do this, we needed to run a local server which could host our website and show live edits. The tools we used for this were Node.js and Vite.

Node.js

Released in 2009, and developed by Ryan Dahl, Node.js allows developers to create front-end and back-end applications with JavaScript. Node.js is open source, meaning the source code is publicly available, and is maintained by developers around the world. It is cross platform, meaning it can run on Windows, Linux, and macOS. Built on the Chrome V8 JavaScript engine, Node.js includes a runtime environment that can run your code outside of the browser.

Why Node.js

The main reason we need Node.js is that Vite requires Node.js versions 18+.20+. However, there are still some more advantages that Node.js brings to the table, such as how it incorporates Google's Chrome V8 JavaScript Engine, its relevancy in the modern software development industry, and its NPM Library.

V8 Engine

Node.js is built on Google's Chrome V8 JavaScript Engine, which is used in many of Google's browser applications, such as Gmail, Google Maps, or any of the Google Workspace applications such as Google Docs, or Google Slides. Its primary purpose is to run JavaScript code efficiently in the the browser.

It's Relevant

Many big companies like Netflix. Netflix uses it with its user interfaces on a variety of different devices as it is able to handle a large number of concurrent connections. Many other companies like Uber, Microsoft, NASA use it as well. And working with it in our own project will help us gain practical experience with it.

NPM Library

Node.js comes with the NPM Libary, which holds millions packages, some of which could be useful for our project. It also allows you to create your own packages for recurring tasks or problems. It also allows you do easily manage your project's dependencies in the project.json file which also allows you to share your project and collaborate with others. In addition, The NPM Command Line Interface is very straightforward to use and makes installing, updating, and managing packages very easy.

Vite

Vite, built by the Evan You, the creator of Vue.js, is a development tool that comes with a local development server for building applications.

Why Vite?

Vite, which is French for "fast", was built in order to deliver high speed server start up and updates.

Faster Start Up

When creating your own server, dependencies can often cause slow start up times, however Vite pre-bundles dependencies causing speeds to increase by a factor of ten to a hundred.

Faster Updates

In bundler-based projects, rebuilding the entire bundle can be time consuming, and the time increases as the the size of the web application increases. Vite, however, uses Hot Module Replacement (HMR). Hot Module Replacement allows modules of the page to update themselves without affecting the entire page. In addition, Vite uses HTTP headers in order to boost full page reload speeds. Vite also uses "Lazy Loading" of modules, meaning that only the modules that are need are loaded in resulting in smaller bundle sizes and better performance, particularly for bigger web applications.

Other Optimizations

To reduce the size of your code and to optimize performance, Vite uses techniques called tree shaking and code splitting. Tree shaking filters and removes unused code, while code splitting "splits" your code into smaller pieces that can be loaded as needed much like modules. This results in faster load times and improves overall performance.

Local Development Server

Vite has a built-in development server which was specifically built to have faster reload times and hot module replacement. Because of Vite's optimized reload speeds, users are able to development their application and see live updates on their page without even having to refresh the page. This allows for boosted productivity and faster, more efficient development.