RxJS First Example

Let's get started with the RxJS tutorial with the first example of RxJS. Here, we will see how to set up the development environment and get started with the concept of observables and create the first example of RxJS.

Set up and install the dependencies

To get started with our project, first, we have to create a new project folder by using the following command:

Now, go into the newly created folder by executing the following command:

Now, we will create a new package.json file inside of our project folder by using the following npm (Node.js Package Manager) command:

In the above image, you can see that the package.json file has been created. You can also see the default code in that image.

Note: If you have not installed Node.js, then you can easily install it by using npm. First, to install Node.js, 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.

Install Webpack, TypeScript, and TypeScript loader for Webpack

Here, we have to add and install a few dependencies such as Webpack, TypeScript, the corresponding TypeScript loader for Webpack, and the Webpack development web server by using NPM again by using the following command:

What is Webpack?

Webpack is a module bundler for modern JavaScript applications. It is used to process our application. When the Webpack processes our application, it internally builds a dependency graph that maps every module our project needs and generates one or more bundles.

What is TypeScript?

TypeScript is an open-source programming language, developed and maintained by Microsoft. It is used to add optional static typing to JavaScript. It is a strict syntactical superset of JavaScript language.

Install the Webpack CLI

We must ensure that we have installed the Webpack CLI (Command Line Interface) as development dependencies. Install the Webpack CLI by using the following command:

Add Script to Package.JSON File

Add the following script with name start to the scripts section in package.json file:

"scripts": {
    "start": "webpack-dev-server --mode development"
  },

This script is used to execute the webpack-dev-server command in development mode when we start up the Webpack development web server when the project is completed.

Set Up Webpack

Now, we have to add the Webpack configuration to our project. So, create a new file named webpack.config.js in the root project folder and use the following configuration code:

const path = require('path');
module.exports = {
    entry: './src/index.ts',
    devtool: 'inline-source-map',
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          use: 'ts-loader',
          exclude: /node_modules/
        }
      ]
    },
    resolve: {
      extensions: [ '.tsx', '.ts', '.js' ]
    },
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
};

Configure TypeScript

We also have to add the TypeScript compiler configuration in the project. to do so create a new file named tsconfig.json and use the following JSON code which contains configuration properties for the TypeScript compiler:

{
    "compilerOptions": {
      "outDir": "./dist/",
      "sourceMap": true,
      "noImplicitAny": true,
      "module": "es6",
      "moduleResolution": "node",
      "target": "es6",
      "allowJs": true,
      "lib": [
        "es2017",
        "dom"
      ]
    }
} 

Create the home page Index.html File

Now, create the home page named index.html file for the browser inside the project folder:

Index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>RxJS Demo</title>
    <style>
        body { font-family: 'Arial'; background: lightgray }
        ul { list-style-type: none; padding: 20px; }
        li { padding: 15px; background: lightcoral; margin-bottom: 10px; }
    </style>
</head>
<body>
    <h1>RxJS Demo</h1>
    <div>
        <ul id="list"></ul>
    </div>
    <script src="/bundle.js"></script>
</body>
</html>

Add the TypeScript Code

Now, the project setup is ready, the TypeScript and Webpack configuration set and the HTML document has been created. Next, create a new subfolder named src inside the project folder and then also create a new file named index.ts within it. Insert the following code inside index.ts file:

import { Observable } from 'rxjs';
var observable = Observable.create((observer:any) => {
    observer.next('Hello World!');
    observer.next('Welcome to JavaTpoint!');
    observer.complete();
    observer.next('Bye');
})
observable.subscribe(
    (x:any) => logItem(x),
    (error: any) => logItem ('Error: ' + error),
    () => logItem('This is the first Example')
);
function logItem(val:any) {
    var node = document.createElement("li");
    var textnode = document.createTextNode(val);
    node.appendChild(textnode);
    document.getElementById("list").appendChild(node);
}