Do you wish to use packages that are typically used on the backend in your frontend app? Well, you can do it with the help of Browserify.

What is Browserify?

It’s a JavaScript bundler that allows us to use node modules to be compiled to use in the browser. It can also be used to keep track of your own and third-party code.

How do I use it?

In a nutshell, you pass browserify your custom code or an external library, and it takes care of the rest.

Now, for instance, there is a need for a third-party package xml-js in your web app, then you need to follow these sets.

Create a file, say xmlConverter.js

const convert = require(‘xml-js’);
module.exports = convert;

Next, pass this file to browserify with -o option. This -o is used to tell which file will contain the complied code.

$ browserify xmlConverter.js -o xmlComplied.js

This file can now be utilized in your web application. This, however, will not function with native programs. Aakash N S gives detailed instructions on how to do so, or you can continue reading if you don't want to delve into depth. I've built a script that will take care of everything for you, and it will work for both web and mobile apps.

Using Docker Run: (link)

$ cd <project_directory>
$ docker run -it --rm -v "${PWD}":/app node-to-app-compiler:v0.0.1 <option> <package_name>

Example:

$ docker run -it --rm -v "${PWD}":/app node-to-app-compiler:v0.0.1 xml-js

Using Terminal: (link)

Clone this repo and run the shell script.

$ chmod +x compiler.sh
$ ./complier.sh <options> <package_name>

Example:

$ ./complier.sh xml-js

Options:

–local: This parameter tells the script whether you're looking for a node package that comes pre-installed. This script tries to install the package using npm by default.

References

• Browserify
• Browserify Handbook
• Using Core Nodejs Modules In React Native Apps
• React Native
• ReactJs