express.static() only works when run locally

Question

For some reason when I run my express server on my machine it it serves the static files in my build folder without any problem, but when I deploy on Heroku I'm getting the following 404 error:

HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier).
GET - http://playcheckerswithme.herokuapp.com/

Here's my directory structure:

.
├──index.js
├──webpack.config.js
├──package.json
├──.gitignore
├──node_modules
|  ├── ...
|
├──src
|  ├──assets
|  |  ├──index.html
|  |  ├──images
|  |  |  ├──...
|  |
|  ├──components
|  |  ├──...
|  |
|  ├──reducers
|     ├──...
|
├──build
   ├──index.html
   ├──bundle.js
   ├──images
      ├──...

And here's index.js:

var express = require('express');
var app = express();
var http = require('http').Server(app);

app.use(express.static(__dirname + '/build'))

http.listen(process.env.PORT || 3000, function(){
  console.log(`listening on port: ${process.env.PORT || '3000'}`);
});

app.use(express.static(__dirname + '/build')) should be serving all static files in my build folder, but it seems that in production it isn't working correctlly. Any ideas?

Edit -

For extra context here are my package.json and webpack.config.js files

package.json

{
  "name": "Checkers",
  "version": "1.0.0",
  "description": "react + redux + express environment for a checkers app",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack-server": "webpack-dev-server --hot --progress --colors",
    "start": "node build/index.js"
  },
  "keywords": [],
  "author": "Nathan Jones",
  "devDependencies": {
    "autoprefixer-loader": "^3.1.0",
    "babel-core": "^6.3.21",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-stage-0": "^6.3.13",
    "copy-webpack-plugin": "^4.0.1",
    "file-loader": "^0.10.0",
    "react-hot-loader": "^1.2.8",
    "source-map-loader": "^0.1.5",
    "url-loader": "^0.5.7",
    "webpack": "^1.11.0",
    "webpack-dev-server": "^1.10.1"
  },
  "dependencies": {
    "express": "^4.15.2",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-redux-utilities": "^1.0.7"
  }
}

webpack.config.js

var { resolve } = require('path');
var webpack = require('webpack');

var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');

function getEntrySources(sources) {
  if (process.env.NODE_ENV !== 'production') {
    sources.push('webpack-dev-server/client?http://localhost:8080');
    sources.push('webpack/hot/only-dev-server');
  }
  return sources;
}

module.exports = {
  entry: getEntrySources(['./src/app.js']),
  
  output: {
    filename: 'bundle.js',
    path: resolve(__dirname, 'build'),
    publicPath: '/'
  },
  
  devtool: 'source-map',
  
  devServer: {
    inline: true,
    hot: true,
    contentBase: resolve(__dirname, 'build'),
    publicPath: '/'
  },
  
  module: {
    preLoaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'source-map'
      }
    ],
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loaders: ['react-hot', 'babel-loader?presets[]=es2015,presets[]=react,presets[]=stage-0'],
      },
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract(
          'style-loader',
          'css-loader?sourceMap!autoprefixer?browsers=last 3 versions!sass-loader?sourceMap'
        )
      },
      {
        test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, 
        loader: 'file-loader?name=fonts/[name].[ext]'
      },
      {
        test: /\.(png|jpg|jpeg)$/,
        loader: 'url-loader'
      }
    ]
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new CopyWebpackPlugin([{from: 'src/assets/', force: true}], {copyUnmodified: true})
  ]
};

Possible duplicate of [How to serve an image using nodejs](http://stackoverflow.com/questions/5823722/how-to-serve-an-image-using-nodejs) — rsp, Mar 20 '17 at 12:15
First of all how are you building using webpack on the production? I see a bunch of devDependencies. Heroku won't even install those. So webpack isn't even going to get installed on production machine. Also how are you building locally? — Yasser Hussain, Mar 20 '17 at 17:48

score 1 · Accepted Answer · answered Mar 20 '17 at 19:58

1

Your npm "start" script is "node build/index.js" which means that __dirname would be pointing to <project-root>/build. You need to change your build/index.js file to use this instead since it's already in the build folder:

if (__dirname.slice(-6) === '/build') { // For production
  app.use(express.static(__dirname))
} else { // For development
  app.use(express.static(__dirname + '/build'))
}

answered Mar 20 '17 at 19:58

idbehold

16,833
5
47
74

Yep, that was the problem, thanks! Also works just by changing my start script to just `node index.js`. I was mistakenly under the impression heroku runs `node index.js` instead of `node start` by default for web. – Nathan Jones Mar 20 '17 at 21:27

score 0 · Answer 2 · answered Mar 20 '17 at 14:40

0

Try remove slash:

app.use(express.static(__dirname + 'build'));

or use path module:

var express = require('express');
var path = require('path');
var app = express();
var http = require('http').Server(app);

app.use(express.static(path.join(__dirname, 'build')));

http.listen(process.env.PORT || 3000, function(){
  console.log(`listening on port: ${process.env.PORT || '3000'}`);
});

answered Mar 20 '17 at 14:40

mcek

480
7
17

1

Tried both and neither worked :\ The first solution gives me an error `Cannot GET /`, and the second solution doesn't change anything. – Nathan Jones Mar 20 '17 at 15:11
Do you create Procfile config file before deploy? – mcek Mar 20 '17 at 15:48

express.static() only works when run locally

Edit -

2 Answers2