Thursday, 11 May 2017

React.js Page is empty after start express server + nodemon + webpack 1

I have following setting and component

webpack.config.js

{
  "name": "reddice",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "server": "nodemon --watch server --exec babel-node -- server/index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-preset-es2015": "^6.24.1",
    "express": "^4.15.2",
    "nodemon": "^1.11.0",
    "webpack": "^1.13.1",
    "webpack-dev-middleware": "^1.10.2"
  }
}

webpack.config.js

import path from 'path';

export default {
  devtools: 'eval-source-map',
  entry: path.join(__dirname, '/client/index.js'),
  output: {
    path: '/'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        include: path.join(__dirname, 'client'),
        loaders: ['babel']
      }
    ]
  },
  resolve: {
    extensions: ['', '.js']

  }    
}

client/index.js

import React from 'react';
import {render} from 'react-dom';
import App from './components/App';

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

client/components/App.js

import React from 'react';

export default () => {
  return (
    <h1>Hello from App component</h1>
  );    
}

i run server with command npm run sever. Display webpack: Compiled successfully. But nothing happen. Empty page.



via Stefan Hansch

No comments:

Post a Comment