Monday, 29 May 2017

My react webpack app deployed in heroku displaying a blank page

I can't figure out what's wrong with my app. The view is correctly displayed when i am testing in localhost and the react component is displayed but after i deploy in heroku, i see my index.html but the react build seems to not be recognized since the page remains blank.

My current situation :

webpack.prod.config.js

var path = require('path');
var webpack = require('webpack');
var env = process.env.NODE_ENV

module.exports = {
  devtool: 'source-map',
  entry: [
    './app/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    library: 'Redux',
    libraryTarget: 'umd',
    publicPath: '/static/'
  },
  plugins: [
   new webpack.optimize.OccurrenceOrderPlugin(),
   new webpack.optimize.UglifyJsPlugin({
      minimize: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    }),
    new webpack.NoErrorsPlugin()

  ],
  module: {
    loaders: [
      {  test: /\.js$/,
        loaders: ['babel-loader'], exclude: /node_modules/,
        include: path.join(__dirname, 'app')
      },

      {
            test: /\.json$/,
            loader: 'json'
        },

    {test: /\.scss$/, loader: "style-loader!raw-loader!sass-loader?includePaths[]=" + path.resolve(__dirname, "./node_modules/compass-mixins/lib") + "&includePaths[]=" + path.resolve(__dirname, "./mixins/app_mixins")},
  /*  { test: /\.scss$/, loaders: ['style', 'css', 'sass?includePaths[]=' + path.resolve(__dirname, './node_modules/compass-mixins/lib','raw']}, */
     { test: /\.css$/, loader: "style-loader!css-loader" },
     //{ test: /\.json$/, loader: 'json-loader' },
     { test: /\.(jpe?g|png|gif|svg)$/i,loader:'file'},
     {test: /\.(woff|woff2|ttf|eot)$/, loader: 'file'},
     { test: /\.(png|woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,loader: 'url' }



  ]
  },
  node: {
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
  },

};

server.js

var path = require('path');
var express = require('express');
var app = new express();
var port = process.env.PORT || 5000;

if (process.env.NODE_ENV !== 'production') {
  var webpack = require('webpack');
  var webpackDevMiddleware = require('webpack-dev-middleware');
  var webpackHotMiddleware = require('webpack-hot-middleware');
  var config = require('./webpack.dev.config');
  var compiler = webpack(config);
  app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath }));
  app.use(webpackHotMiddleware(compiler));
}

app.use(express.static(path.join(__dirname)));

app.use(function(req, res) {
  res.sendFile(path.join(__dirname, '/index.html'))
});

app.listen(port, function(error) {
  if (error) {
    console.error(error);
  } else {
    console.info('==> 🌎  Listening on port %s. Open up http://localhost:%s/ in your browser', port, port);
  }
}) 

scripts in my package.json

"scripts": {
    "postinstall": "npm run build",
    "build": "NODE_ENV=production webpack --config ./webpack.prod.config.js --progress --colors",
    "start" : "node server.js"
  },

As i said before, the index.html file is loaded in heroku but react stuffs aren't displayed. Yet everything works when i am trying in local.

Why heroku doesn't behaves as expected ? What am i doing wrong ?

I've tried to deploy the ready-to-use starter kit react for heroku and it's work without any problem. Yet the config is the same as mine at 99%.

So i don't understand

Thanks for helping.



via Jack

No comments:

Post a Comment