CODEWITHSUNDEEP
javascriptreactjswebpack-dev-server
Lillian
Lillian

Reputation: 70

Why using Webpack-dev-server to start a React App returned my directory structure

I am new to webpack-dev-server and have this question. Can you please explain and help me to fix it?

First, I am sure my application is running correctly without webpack-dev-server. However, using Webpack-dev-server to start a React App didn't return my hello world page, instead it returned my directory structure... I believe I may miss something here.

Without React, I can first run webpack --config webpack.config.js to create my bundle.js. And then, execute webpack-dev-server --open to open my main page.

Now this procedure doesn't work for me when I am trying to start a React app. It turns my development directory instead as the screenshot below:

enter image description here

My hello world app is:

enter image description here

Hello.js:

var React = require("react");
var ReactDOM = require("react-dom");

var Hello = React.createClass({
    render: function(){
        var message = "Hello, world!!!!!";
        return (
            <div>
                {message}
            </div>
            );
    }
});


ReactDOM.render(
    <Hello />,
    document.getElementById("root")
);

index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>

  </head>
  <body>
    <div id="root"></div>
    <script src= "bundle.js"></script>
    <h2>HEY!</h2>
  </body>
</html>

webpack.config.js:

module.exports = {
    entry: "./app/components/Hello.js",
    output: {
        filename: "public/bundle.js"
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: "babel-loader",
                query: {
                    presets: ["es2015", "react"]
                }
        }]
    }

};

Upvotes: 0

Views: 607

Answers (2)

Alfred Crosby
Alfred Crosby

Reputation: 136

Because you don't setup webpack dev server properly. Add

devServer: {
    contentBase: "./public"
},

See webpack-dev-server config list https://webpack.github.io/docs/webpack-dev-server.html#api

Also you have to set publicPath on output in your webpack config. Because you called bundle.js in index.html like this <script src= "bundle.js"></script> (no /public folder)

output: {
    publicPath: '/',
    filename: 'bundle.js'
},

Hope this helps

Upvotes: 2

jonifen
jonifen

Reputation: 208

It's because your index.html is inside /public and not in the root of the website. If you browse to http://localhost:8080/public you should find it works

Upvotes: 2

Related Questions