How to Install RxJS - Setting up a Development Environment

Note: This tutorial is a part our free comprehensive RxJS Tutorial
Download the code for this tutorial at Github

There are a lot of ways to get up and running with RxJS, and frameworks like Angular already have it integrated.

For the purpose of this course, we're going to set up our own development environment where we're not going to rely on any frontend JS frameworks like Angular, React, etc., because I would prefer to keep this framework agnostic.

We will use TypeScript, but you can omit that part if you wish.

So, let's get up and running!

A Comprehensive RxJS Tutorial - Learn ReactiveX for JavaScript

If you prefer watching a video..

Be sure to Subscribe to the Official Coursetro Youtube Channel for more videos.

Installing Project Dependencies

Open up your console and create a new project folder, then hop into it:

> mkdir rxjs && cd rxjs

We're going to use yarn for adding packages, but you can use npm as well. Run the following command to create a package.json file:

> yarn init -y

Next, we'll use yarn to add RxJS, Webpack and TypeScript:

> yarn add rxjs webpack webpack-dev-server typescript ts-loader

We need to install webpack-cli as a dev dependency:

> yarn add webpack-cli --dev

Great. Now we're ready to create some files.

Modifying Package.json

Open up your preferred code editor (if you use Visual Studio Code, you can type code . in the console within the current folder and it will load up the project for you).

Open the package.json file and add the following:

{
  "name": "rxjs",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",

  // Add this

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

We'll run yarn run start shortly, which will create a development server for us while we're learning RxJS.

Setting up Webpack

Create a file called webpack.config.js and paste the following boilerplate code:

const path = require('path');

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

The only important part to note here is that we're defining our app's entry point to ./src/code.ts -- this is where we will be working in throughout this series. Notice the .ts extension, this is for TypeScript. If you didn't want to use TypeScript, you would just change this to a regular .js file.

TypeScript Configuration

Create another file called tsconfig.json and paste the following config settings:

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

This config allows us to use es2017 JavaScript (es8) while compiling down to 2015 (es6).

Finishing the Project Setup

Create an index.html file and paste the following contents:

<!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>Learn RxJS with Coursetro</title>

    <style>
        body { font-family: 'Arial'; background: #ececec; }
        ul { list-style-type: none; padding: 20px; }
        li { padding: 20px; background: white; margin-bottom: 5px; }
    </style>
</head>
<body>
    <ul id="output"></ul>

    <script src="/bundle.js"></script>
</body>
</html>

Instead of console.logging everything while we learn RxJS, we're going to output most of the results within our unordered list #output.

I also have some basic styling as you can see.

Next, create a new folder called /src/ and inside of it, a file called code.ts with the following contents:

import * as Rx from "rxjs/Observable";

console.log(Rx);

Go to your console within the project folder and type:

> yarn run start

Visit http://localhost:8080 in your browser and view the console (CTRL-SHIFT-i) and you should use > Object.

This means that RxJS is ready to go!

Conclusion

Now that our RxJS project is setup, we're going to start learning all about the basics going forward.

Note: This tutorial is a part our free comprehensive RxJS Tutorial

Create your account