Setting up project for developing RxJS app – Blancer.com Tutorials and projects

I am trying to set up VS Code project for developing RxJS apps. I am following this article.

I keep getting Cannot GET / message from the server. My folder structure is:

root:
 index.html
 package.json
 tsconfig.json
 webpack.config.js
dist
 src
  index.js
node_modules
src
 index.ts

index.html:

<!DOCTYPE html>
<html lang="en">

<head>
<meta> charset="UTF-8"   </meta>
<meta name="viewport" > </meta>
    <title> RxJS Demo </title>
</head>

<body>
    <h1>Rx TypeScript</h1>
    <div>
        <ul id="list"> </ul>
    </div>

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

</html>

package.json:

{
  "name": "rxjs-test",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --mode development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "rxjs": "^7.8.1",
    "ts-loader": "^9.5.1",
    "typescript": "^5.5.4",
    "webpack": "^5.93.0",
    "webpack-dev-server": "^5.0.4"
  },
  "devDependencies": {
    "webpack-cli": "^5.1.4"
  } 
}

tsconfig.json:

{
    "compilerOptions": {
      "target": "ES6",    
      "lib": [
        "ES2017",
        "DOM"
      ],                                        
      "module": "ES6",   
      "moduleResolution": "Node",
      "allowJs": true, 
      "esModuleInterop": true, 
      "forceConsistentCasingInFileNames": true, 
      "strict": true,                                      
      "noImplicitAny": true,
      "skipLibCheck": true,                                 
      "sourceMap": true,
      "outDir": "./dist/"
    }
  }

webpack.config.js:

const webpack = require("webpack");
const path = require("path");
console.log("__dirname="+__dirname);
module.exports = {
    mode: "development",
    entry: './src/index.ts',
    devtool: 'inline-source-map',
    output: {
      filename: "bundle.js",
      path: path.resolve(__dirname, "dist"),
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    module: {
      rules: [
      {
        test: /.tsx?$/,
        use: 'ts-loader',
          exclude: /node_modules/
      }
     ]
    },
    devServer: {
        //contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 9000
    },
    // enable devServer-logging
    infrastructureLogging: {
        debug: [name => name.includes('webpack-dev-server')],
      },
    stats: {
        logging: 'verbose',
      },
      mode: 'development'
  }

index.ts:

import { Observable } from "rxjs";
console.log(__dirname);
var observable = new Observable((observer) => {
    observer.next("Hello world");
})
observable.subscribe(
    (x) => console.log(x)
);