CODEWITHSUNDEEP
javascriptwebpackrxjs
Phalgun
Phalgun

Reputation: 1494

"Cannot GET / " webpack-dev-server

In order to prevent this question being marked as duplicate, I want to mention that I have referred to a number of similar SO questions and tried the accepted/most upvoted answers, but those did not help:

  1. webpack-dev-server 'Cannot GET /'
  2. Cannot GET / - localhost 8080 not working with webpack dev server
  3. Cannot GET / error running hello world in webpack
  4. Plugin not defined in webpack configuration file

I am trying to create a simple Javascript application which uses RxJs, by following the tutorial at https://www.javatpoint.com/rxjs-first-example.

When I start webpack-dev-server, I get "Cannot GET /" error.

I have committed the code here to a git repository for it to be reproduced easily. Here are the steps:

git clone https://github.com/phalgunv/basic-rxjs-starter.git
npm run start

Open "http://localhost:8080/", I get the error enter image description here

What am I missing here?

Upvotes: 0

Views: 2414

Answers (2)

Phalgun
Phalgun

Reputation: 1494

Thanks @dave-kiss for pointing in the right direction, the key idea being the use of HtmlWebpackPlugin and HtmlLoader.

I have committed the changes to the repository https://github.com/phalgunv/basic-rxjs-starter.git in the branch bug-fix-content-not-served for reference.

Here are the steps followed:

  1. Install html-load

    npm install --save-dev html-loader html-webpack-plugin

  2. Update webpack.config.js modules->rules with html-loader

    module: { rules: [ { test: /.tsx?$/, use: "ts-loader", exclude: /node_modules/, }, { test: /.html$/, loader: "html-loader", }, ], },

  3. Update webpack.config.js with HtmlWebpackPlugin

    plugins: [ new HtmlWebpackPlugin({ template: "src/index.html", }), ],

  4. Remove <script> tag from index.html

Check the commit - https://github.com/phalgunv/basic-rxjs-starter/commit/15d0779614ccd0428bb47bc308bea8f7f0509ea0 for refernce.

Upvotes: 1

Dave Kiss
Dave Kiss

Reputation: 10487

Your setup is correct; based on your filename settings in Webpack, your bundle is located at http://localhost:8080/bundle.js

If you'd like to copy over an index.html file to serve the contents of your bundle, you may want to take a look at HtmlWebpackPlugin here: https://webpack.js.org/plugins/html-webpack-plugin/

Upvotes: 1

Related Questions