Running Node.js in web browsers
Node.js remains a key expertise for front-end developers due to the vast ecosystem of Node-based tools and applications that are required for modern front-end web development.
However, we can also use Node.js to assist with front-end web development. For example, popular client-side libraries such as Angular makes use of CLI or command-line interface tools to enable developers to create projects and even build and deploy them to the cloud.
Learning to build server-side apps using Node is beyond the scope of this scope; rather than that we'll see how to take benefits of running Node modules in the clien's browser.
In this quick tutorial, we'll learn to use and run Node.js modules in the browser then we'll see how it is now possible to run the full Node.js runtime inside the web browser using web containers.
Node.js vs web browsers
Using the same programming language on both the client and server offers developers a clear edge, since its's difficult to master a new programming language from scratch.
For instance, the filesystem and server databases are accessible to Node app developers, but in browsers, these resources are restricted and sandboxed for obvious reasons of security.
On browsers, one important aspect is the DOM which refers to Document Object Model and a set of Web Platform APIs such as sessions and cookies.
On the other hand, Node.js doesn't have the DOM and developers are unable to access the document, window, and other browser objects.
Before delivering your code to the browser, you can use Babel to convert it to ES5 compatibility, but in Node.js, you won't need to.
Node.js supports both the CommonJS and the modern EcmaScript module systems, whereas browsers are just beginning to implement the ES Modules standard.
This implies that in Node.js, you can use both
require() and import, however in the browser, you can only use import.
In addition, Node.js gives you total control over your environment, allowing you to choose the version of Node.js your application will run on as a developer.
When comparing this to a browser, the environment is determined by the version of the browser being used by end users so as a front-end developer, you must pay care when developing your app since features may not exist on specific browsers, causing your app to crash.
Node.js vs Chrome
Both Node.js and Chrome are built on top of v8, and many of the Node.js libraries can be already executed in Chrome.
Recently Microsoft built Edge a new and modern browser that is also built on top of V8.
The Node.js ecosystem is massive, in part because to V8, which powers desktop applications via projects like Electron.
You can check which version of V8 engine is included with your Node.js installation using the following command:
node -p process.versions.v8
Why running Node modules in the browser?
Node.js provides the world's largest repository of open source modules, which tackle a wide range of common and unique development issues. You can quickly find a module for practically any functionality you require, allowing you to focus on addressing your specific requirements rather than reinventing the wheel and increasing your productivity.
Can Node.js run in a browser
The Node.js runtime does not exist on the client; all you have is a browser that cannot use Node.js modules. What a colossal waste, we hear you exclaim!
However, guess what? Thanks to some creative engineers, it is now feasible to use Node.js modules in browsers, but not directly.
Existing ways for running Node modules inside the browser
It is possible to meet at least some of the aforementioned objectives by using existing tools such as: - Webpack.js, - Browserify, - And Nodular.js, among others.
For each solution, a source code transformation is required, either in advance (in the case of webpack and browserify) or in real time in the case of nodular. They may be appropriate for your purposes, but it's worth noting that they are just attempts to reproduce or emulate specific behaviours inside the browser.
The official website describes Browserify with the following sentence:
Browserify lets you require('modules') in the browser by bundling up all of your dependencies.
Browsers lack the Node.js platform's require/export and module import systems; therefore, Browserify was developed to make it possible to import Node.js modules.
Suppose you have written your application source code using require syntax to import a useful Node.js module. Now to be able to use your application in the browser with no error you need to use Browserify and run the following command:
browserify app.js -o bundle.js
How To use Browserify?
To install browserify, first enter your command line terminal and type the legendary
npm install command as follows:
npm install -g browserify
Next create your example project folder
Next you should install the module you want to use or to convert to browser compatible script
npm install -g ytdl-core
main.js require the module as you do normally with node.js modules:
var yt = require('ytdl-core'); console.log(yt);
Now let the magic begins, call browserify with the input is
main.js and give it a name for the output
browserify main.js -o ytdl.js ...
Now you can use your script as easily as using a script tag
<script src="ytdl.js"></script> ...
Replicating Node environments in browsers
Now that, we've seen how to compile a run a single Node module in the browsers, another question that arises is that can we repliate a full node environment?
Many solutions exist that tried to replicate the Node.js environment inside the browser.
Can we, for example, build the webpack code in the browser rather than the server's nodejs environment? The benefit of this is that we no longer need the server's capabilities for compilation.
This issue may be solved in a variety of ways. For instance, codesandbox, which is described as a browser-based compilation technique, may be used to package react, vue, and other browser-based libraries. It is also clear that codeandbox provides a browser version of webpack.
Running a headless browser within Node
We've seen ways to run Node in web browsers but how about the inverse, can you run a web browser with Node.js? In fact, you can thanks to headless browsers and Node libraries such as Playwright for running Chrome, Firefox and Safari or Puppeteer for running headless Chrome browser and others.
Puppeteer is a Node module that exposes a high-level API for administering Chrome or Chromium through the DevTools Protocol. Puppeteer is set to run full (non-headless) Chrome or Chromium by default.
The majority of tasks that may be accomplished manually in the browser can be accomplished using headless browsers and Node.js, for example:
- Create page screenshots and PDFs.
- Crawl an SPA (Single-Page Application) and create pre-rendered content (sometimes referred to as "SSR" (Server-Side Rendering)).
- Automate form submission, user interface testing, and keyboard input, among other tasks.
Running Node.js in browsers with web containers
As a front-end web developers, you may not need to use Node.js to build apps since the front-end doesn't and can't have access ro server resources directly but often via a REST or GraphQL API.
However, nowadays modern web development frameworks and libraries such as Angular, React or Vue provides a set CLI tools that are built on top of Node.js.
This means that Node is required on the development of front-end apps even if you don't target or develop for the server side.
A few years ago, it seemed clear that the web was nearing a turning point. In light of the release of WebAssembly and new powerful APIs, it seems feasible to develop a WebAssembly-based runtime robust enough to run Node.js entirely inside a web browser. The goal was to provide a development environment that was faster, more secure, and more consistent than local development environments.
As a consequence, the stackblitz team, announced the development of web containers. Web containers make it easy to build a fully functional Node.js environment that boots in milliseconds, is online, and can be shared with others. VS Code's rich editing experience, a complete terminal, npm, and more are loaded into the environment.
Tht means that you can run the Node.js runtime natively, inside the browser, for the first time in the history of web development.
You can try that at StackBlitz.com.