Setting up the Development Environment to mess with JS/TS/RxJS

This article will explain the steps i did to setup my development environment to just run the first RxJS code. Of course we can use online tools like

JS Bin

JSFiddle

etc…

But I needed to setup the environment locally and run my first RxJS code there.

So.. Here are the steps

Step 01

Create a folder for your work inside your workspace.

mkdir RxJS/test

Step 02

Use the package manager NPM to initialize the project.

npm init -y

npm is a package manager for the JavaScript programming language.

here, you will see

package.json

Step 03

Install all the dependencies for the work.

npm install rxjs webpack webpack-dev-server typescript ts-loader

rxjs — RactiveX programming for JS library

webpack — open-source JavaScript module bundler

webpack-dev-server — to run the bundler, get all code in one file called bundle.js

typescript — open-source programming language developed and maintained by Microsoft.

ts-loader — TypeScript loader for webpack.

You’ll see them added in the package.json like following and also these modules will be saved inside the node_modules folder.

"dependencies": {
   "rxjs": "^6.5.4",
   "ts-loader": "^6.2.1",
   "typescript": "^3.7.5",
   "webpack": "^4.41.5",
   "webpack-dev-server": "^3.10.1"
}

Step 04

We need the Webpack CLI. This provides a flexible set of commands for developers to increase speed when setting up a custom webpack project.

npm install webpack-cli--save-dev

Once finished you should be able to see the dependency like this in the package.json

"devDependencies": {
    "webpack-cli": "^3.3.10"
}

Step 05

Open it with the IDE. I use the VS Code here

code .

VS code

Step 06

Since we are using webpack we can change the package.json script file in order to run the application using npm

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
},

Change to

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

Once you have done this. You can run the application using the following command

npm run start

Step 07

Setup the configuration for the webpack. Here is the file for the simplest webpack config

What this means is that we start with the file called index.ts which we needs to create in the next step.

And all code in thses ts files will be bundled in the form of inline. And for the execution of the ts files we use the loader (Which we have already installed using npm to the npm_modules. )

Exclude section is where we can define which part of the directory should not be a part of this bundle process. So here it is the node modules.

At last this will give a file names “bundle.js” in the dist file. That what configured in the output.

To add this config file create a file inside the directory named as “webpack.config.js”

Step 08

Add configurations for the TypeScript compiler. The file name is “tsconfig.json”

Step 09

Create the basic html template. I just used “index.html”

index.html

Notice: Make sure to include bundle.js. It is the single file which includes all the code we have in ts files.

Step 10

Let’s create the typescript file. This is the place where we can start using RxJS and other codes. This will be your workspace to mess around RxJS and other stuff.

Create a sub folder called “src” → and inside create the file “index.ts”

index.ts

Step 11

Run and See. Now you know the command right. We have already defined it in the package.json. It is..

npm run start

Wolaaaa.. !!!! :)

You should get this output

npm run start

In the browser

That’s all here.

Happy Coding !!! :)