Cannot GET / http://localhost:8080/ for rxjs local setup

Question

Trying to setup my local server in order to run rxjs code

Package.json

 {
      "name": "rxjs",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "webpack-dev-server --mode development"
    
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "dependencies": {
        "rxjs": "^7.5.4",
        "ts-loader": "^9.2.6",
        "typescript": "^4.5.5",
        "webpack": "^5.68.0",
        "webpack-dev-server": "^4.7.4"
      },
      "devDependencies": {
        "webpack-cli": "^4.9.2"
      }
    }

ts config.json

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

webpack.config.js

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

Index.html

<!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>

index.ts

import * as RX from "rxjs";

console.log("hai",RX)

Here is my file structure

I tried npm run start and getting this

Look at you console, you probably have an error in the serve/build — Matthieu Riegler, Feb 11 '22 at 14:44
I dont have experience with Webpack Dev server, but from your image, I feel that even though port 8080 is exposed, you seem to need to specify route handlers - i.e what happens when you request GET/POST/PUT/DELETE on certain routes. I believe you can do so using similar `devServer` config like this post: https://stackoverflow.com/questions/47442543/how-do-i-get-webpack-dev-server-to-accept-post-requests, like `app.get("/", (req, res) => {res.render("index.html")})` — Bao Huynh Lam, Feb 11 '22 at 14:48
Yeah but I referred this blog https://medium.com/codingthesmartway-com-blog/getting-started-with-rxjs-part-1-setting-up-the-development-environment-creating-observables-db76ce053725 — Gowtham, Feb 11 '22 at 14:52

score 0 · Answer 1 · answered Feb 11 '22 at 14:45

0

It looks like you haven't configured a port for the DevServer. The default is "auto".

You'll probably want to change your we pack.config.js devServer section to include

port: 8080

answered Feb 11 '22 at 14:45

GreyBeardedGeek

29,460
2
47
67

devServer: { port:8080 }, Added it still getting the same – Gowtham Feb 11 '22 at 14:49

Cannot GET / http://localhost:8080/ for rxjs local setup

1 Answers1