RxJS Installation or Environment Setup

There are different ways to install RxJS but before installing RxJS, we need the following setup to work efficiently with RxJS.

You have to install-

js
Npm
RxJS package installation

Installing Node.js and npm

If you are already familiar with Node.js then you must have installed Node.js on your computer system. You should check whether you have installed Node.js on your system or not. In the case if you have not installed Node.js then it is very easy to install RxJS using npm.

First, let’s verify if Node.js and npm are installed on your system. Open your Node.js command prompt and execute the following command.

Run the following command to check Node’s version:

Run the following command to check npm version:

After running the above commands, you can see that we have got a result. It means the Node.js and npm are installed on our system and the version is 12.16.3 and 6.14.4 respectively. So, we can proceed further.

If your command prompt does not print anything, it means Node.js and npm are not installed on your system

How to install Node.js?

Installing Node.js is not a big task. To install Node.js, first go to the download page of the official website of the Node.js https://nodejs.org/en/download/ and then install the package according to your operating system.

You will see that the download page of Node.js would look like this:

Install the required package according to your operating system. After installing the Node.js, npm will also be installed along with it. Now, check if npm is installed or not by typing npm -v command in the terminal and you will see the version of the npm.

You can read in details: How to install Node.js? https://tutoraspire.com/install-nodejs

Install RxJS Package

Before going to start RxJS installation, we have to first create a folder named “rxjsproject” where we will practice all RxJS examples.

After creating the folder rxjsproject, we have to run the command npm init, to setup the project.

Execute the command given below:

When you run the npm init command, it will ask few questions during execution. You have to just press enter and proceed.

When the execution of the npm init is completed, it will create a file package.json inside rxjsproject/ as following:

The File package.json contains the following code:

  {    “name”: “rxjsproject”,    “version”: “1.0.0”,    “description”: “”,    “main”: “index.js”,    “scripts”: {      “test”: “echo “Error: no test specified” && exit 1″    },    “author”: “”,    “license”: “ISC”  }  

Install RxJS

Now, all the prerequisites are done and it’s time to install RxJS. Use the following command to install RxJS:

After running the installation code, you will see that the npm has created a lockfile as package-lock.json. You should commit this file.

In the above image, you can see that the installation of RxJS is completed.

Now, let us see how to use RxJS.

First, create a folder src/ inside the rxjsproject/. See the following image:

Now, you will see that the folder structure would look like this:

Now, create a file testrx.js inside the src/ folder and write the following code:

  import { of } from ‘rxjs’;  import { map } from ‘rxjs/operators’;  map(x => x * x)(of(1, 2, 3, 4, 5)).subscribe((v) => console.log(`Output is: ${v}`));   

If you execute the above code in command prompt using the command- node testrx.js, it will display an error for import. The error occurs because Node.js does not know what to do with import.

To resolve this issue, we have to make it possible that it can import with Node.js.

Install ES6 Modules Package

For this purpose, we have to install ES6 modules package using npm. Use the following command to install ES6 module package.

Now, the package has been installed and you can execute the testrx.js file by using the following command:

Output:

Output is: 1  Output is: 4  Output is: 9  Output is: 16  Output is: 25

See the following image:

In the above image, you can see the output on the console. You can see that RxJS is installed and ready to use but the above method will help us to test RxJS in the command line only. If you want to test RxJS in the browser, you have to install some additional packages.

Test RxJS in Browser

We have to install the following packages inside rxjsproj/ folder to test RxJS in browser.

Run the following npm command:

  npm install –save-dev babel-loader @babel/core @babel/preset-env webpack webpack-cli webpack-dev-server   >npm install –save-dev babel-loader @babel/core @babel/preset-env webpack webpack-cli webpack-dev-server  npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated  npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated  npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.  npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.  npm WARN notsup Unsupported engine for watchpack-chokidar2@2.0.0: wanted: {“node”:”<8.10.0″} (current: {“node”:”12.16.3″,”npm”:”6.14.4″})  npm WARN notsup Not compatible with your version of node/npm: watchpack-chokidar2@2.0.0  npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.1.2 (node_moduleschokidarnode_modulesfsevents):  npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {“os”:”darwin”,”arch”:”any”} (current: {“os”:”win32″,”arch”:”x64″})  npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_moduleswatchpack-chokidar2node_moduleschokidarnode_modulesfsevents):  npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {“os”:”darwin”,”arch”:”any”} (current: {“os”:”win32″,”arch”:”x64″})  npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_moduleswebpack-dev-servernode_moduleschokidarnode_modulesfsevents):  npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {“os”:”darwin”,”arch”:”any”} (current: {“os”:”win32″,”arch”:”x64″})  npm WARN rxjsproject@1.0.0 No description  npm WARN rxjsproject@1.0.0 No repository field.    + babel-loader@8.1.0  + webpack@4.44.2  + webpack-cli@3.3.12  + @babel/core@7.11.6  + webpack-dev-server@3.11.0  + @babel/preset-env@7.11.5  added 716 packages from 381 contributors and audited 722 packages in 180.939s    28 packages are looking for funding    run `npm fund` for details    found 0 vulnerabilities  

Here, we have installed webpack-server to start the server and execute our Html file. The command “publish” in package.json is used to start as well as pack all the js files using webpack server.

To use webpack, we have to run npm run publish command. You can see that the publish command is added in package.json as following:

Update the package.json file with the following code:

Package.json:

  {    “name”: “rxjsproject”,    “version”: “1.0.0”,    “description”: “”,    “main”: “index.js”,   “scripts”: {        “publish”:”webpack && webpack-dev-server –output-public=/dev/”,        “test”: “echo “Error: no test specified” && exit 1″     },    “author”: “”,    “license”: “ISC”,    “devDependencies”: {      “@babel/core”: “^7.11.6”,      “@babel/preset-env”: “^7.11.5”,      “babel-loader”: “^8.1.0”,      “esm”: “^3.2.25”,      “rxjs”: “^6.6.3”,      “webpack”: “^4.44.2”,      “webpack-cli”: “^3.3.12”,      “webpack-dev-server”: “^3.11.0”    }  }  

To work with webpack, create a file called webpack.config.js that has the following code:

  var path = require(‘path’);  module.exports = {     entry: {        app: ‘./src/testrx.js’     },     output: {        path: path.resolve(__dirname, ‘dev’),        filename: ‘main_bundle.js’     },     mode:’development’,     module: {        rules: [           {              test:/.(js)$/,              include: path.resolve(__dirname, ‘src’),              loader: ‘babel-loader’,              query: {                 presets: [‘@babel/preset-env’]              }           }        ]     }  };  

Now, create an index.html file within the root project. This file will contain what you want to show on your browser.

Index.html:

  <!DOCTYPE html>  <html lang=”en”>  <head>  <style>          body { font-family: ‘Arial’; background: lightpink }      </style>  </head>  <body>  <h2>Hello World!</h2>  <p>You are Welcome<p>  </body>  </html>  

The final folder structure would look like following:

  rxjsproject/     node_modules/     src/        testrx.js     index.html     package.json     webpack.config.js  

Run the Project

Now, execute the run command npm run publish. It will create a folder named dev with main_bundle.js file in it. The server will be started and you can test your index.html in the browser.

Open the browser and goto the local host url: http://localhost:8080/ and you will see the output:

Next TopicRxJS First Example

RxJS Installation or Environment Setup

RxJS Installation or Environment Setup

Installing Node.js and npm

How to install Node.js?

Install RxJS Package

Install RxJS

Install ES6 Modules Package

Test RxJS in Browser

Run the Project

Some Cryptocurrency Libraries for Python

Download and Installation of SoapUI

You may also like