Deploying build to production using express server which i compiled using webpack -p

config, deployment, production, reactjs, webpack

Solution

You now need to serve the contents of your dist folder with express, here's a basic implementation which you can use as an example:

Create a file named app.js in your . folder (in the same folder you dist folder is in)

app.js

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

var app = express();

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

app.get('/*', function(req, res){
  res.sendfile("index.html", {root: path.join(__dirname, '/dist')});
});

app.listen(80, function() {
  console.log("App is running at localhost: 80")
});

Then, run node app.js, if you get the EACCES error, run sudo node app.js instead. This runs your production files locally at http://localhost.

If you want to deploy this to somewhere else (for example, heroku https://devcenter.heroku.com/articles/getting-started-with-nodejs#introduction) you will have to check their instructions.

Problem

I want to deploy my app to production. I dont know what to do after i build my bundle using webpack -p. How to serve this bundle on production using express node server. My webpack.config.js file ``` var HtmlWebpackPlugin = require('html-webpack-plugin') var debug = process.env.NODE_ENV !== "production"; var webpack = require("webpack"); var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({ template: __dirname + '/app/index.html', filename: 'index.html', inject: 'body' }); module.exports = { devtool: debug ? "inline-sourcemap" : null, entry: [ './app/index.js' ], output: { path: __dirname + '/dist', publicPath: '/', filename: "index_bundle.js" }, module: { loaders: [ {test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"} ] }, resolve: { extensions: ['', '.js', '.jsx'] }, plugins: debug ? [HTMLWebpackPluginConfig] : [ HTMLWebpackPluginConfig, new webpack.optimize.CommonsChunkPlugin('common.js'), new webpack.optimize.DedupePlugin(), new webpack.optimize.OccurenceOrderPlugin(), new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }), new webpack.optimize.AggressiveMergingPlugin() ], }; ``` My package.json file ``` { "name": "my-web", "version": "1.0.0", "description": "Practicing react-website", "main": "index.js", "scripts": { "start": "webpack-dev-server --hot --port 8080 --host 0.0.0.0 --content-base dist/ --history-api-fallback", "prod": "NODE_ENV=production webpack -p", "postinstall": "npm start" }, "dependencies": { "axios": "^0.15.0", "express": "^4.14.0", "radium": "^0.18.1", "react": "^15.3.2", "react-dom": "^15.3.2", "react-router": "^2.8.1" }, "devDependencies": { "babel-core": "^6.17.0", "babel-loader": "^6.2.5", "babel-preset-react": "^6.16.0", "html-webpack-plugin": "^2.22.0", "webpack": "^1.13.2", "webpack-dev-server": "^1.16.1" } } ``` Note: npm start is running very fine on localhost. And so i used webpack -p for creating bundle in ./dist folder. Need steps from here. Also suggestion on better way for deploying is appreciated.

Original source