Deploying react app with webpack server

Question

I am a beginner in ReactJS and was just exploring it and trying to configure it with Webpack and Babel when I experienced an error when I run the application using npm start.

Following are some of files:-

package.json

{
 "name": "reactstarter",
 "version": "1.0.0",
 "description": "A basic React application to explore its state and beauty",
 "main": "index.js",
 "scripts": {
    "start": "webpack-dev-server"
   },
 "keywords": [
   "reactjs"
  ],
"author": "user1705",
"license": "MIT",

"dependencies": {
 "debug-log": "^1.0.1",
 "react": "^15.3.2",
 "react-dom": "^15.3.2"
},
"devDependencies": {
 "webpack": "^1.13.2"
 }
}

There are two directories src directory and dist directory inside the root folder.

File: src/index.html

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

  <head>
   <meta charset = "UTF-8">
   <title>React App</title>
  </head>

<body>
  <div id = "app"></div>
  <script src = "/app/bundle.js"></script>
</body>

</html>

File:- src/app/App.jsx

import React from 'react';

class App extends React.Component {
 render() {
   return (
     <div>
        Hello World!!!
     </div>
  );
 }
}

export default App;

File:- src/app/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('app'));

And webpack.config.js :-

var webpack= require(webpack);
var path= require(path);
var DIST_DIR=path.resolve(__dirname,"dist");

var SRC_DIR= path.resolve(__dirname,"src");

var config={
  entry:SRC_DIR+"/app/index.js",
  output:{
    path:DIST_DIR+"/app",
    fileName:bundle.js,
    publicPath:"/app/",
   },
  devServer: {
  inline: true,
  port: 7777
   },

  modules:{
    loaders:[
        {
            test:/\.js?/,
            include:SRC_DIR,
            loader:"babel-loader",
            query:{
                presets:["react","es2015","stage-2"]
            }
        }
       ]
     }
 };

 module.exports=config;

So now whenever I run the command npm start ,it gives the following error:-

Being a beginner I have no idea as what is the issue?? If anyone has come across this similar issue or knows about the error,please contribute your knowledge and show me the right path.

Answer 1

change

output:{
    path:DIST_DIR+"/app",
    fileName:bundle.js,
    publicPath:"/app/",
   },

to

output:{
    path:DIST_DIR+"/app",
    fileName:"bundle.js",
    publicPath:"/app/",
   },

Answer 2

It seems that you forgot the quotes when you were requiring the npm modules:

var webpack= require('webpack');
var path= require('path');

Deploying react app with webpack server

Question

2 answers

solution1
1 2016-10-02 15:20:17

solution2
0 ACCPTED 2016-10-02 13:17:19

Deploying react app with webpack server

Question

2 answers

solution1 1 2016-10-02 15:20:17

solution2 0 ACCPTED 2016-10-02 13:17:19

solution1
1 2016-10-02 15:20:17

solution2
0 ACCPTED 2016-10-02 13:17:19