deploy to heroku

[yonahforst]

I'm new to webpack and babel. I'm trying to deploy this to heroku, but i think i need to change something first. Does anyone know of step by step instructions for deploying an app built on react-hot-boilerplate?

[lakhansamani]

@yonahforst you can go through following blog and repository for heroku deployment
Blog Link
Github repo

[donpinkus]

I'm not sure hot-module replacement is working correctly with that repo.

If you clone it, build it (be sure to switch the build to the dev webpack), then start the server and try changing CSS, nothing happens.

[donpinkus]

Alright, just got this working. It's actually simple. You need a Procfile to tell Heroku what server to run, a new server file that runs an Express app instead of the hot module stuff, and then you just move your bundle.js, images, and other assets to a place where that server can access them.

Here is what you need to do:

Step 1. Procfile

Heroku uses a Procfile to run commands to start your server. Add a file named Procfile to your project's root directory. Put this line in it web: node server.prod.js. Save it. That tells Heroku to run the command node server.prod.js. You don't have a server.prod.js file yet, so let's make that.

Step 2. server.prod.js

Create a server.prod.js file in your root directory. You already have a server.js from this repo. Your server.js file has a bunch of react hot reloading stuff in it, great for dev, bad for prod.

In your server.prod.js file, paste this:

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

app.set('port', (process.env.PORT || 5000));

app.use(express.static(__dirname + '/public'));

// views is directory for all template files
app.get('/', function(request, response) {
  response.sendFile(__dirname + '/index.html');
});

app.listen(app.get('port'), function() {
  console.log('Node app is running on port', app.get('port'));
});

It uses express to serve your index.html file.

Step 3. Run npm install express --save

You use Express to serve your index file, so you need to install express and save it. By the way, Heroku runs npm install when you push.

Step 4. Move /dist/bundle.js into /public/bundle.js

Make a folder in your root directory called "public". Copy your bundle.js file there.

Step 5. Update your webpack.config.js

Change publicPath: '/dist/ to publicPath:/public/. Otherwise you'll get weird errors that modules can't be found when you try to use yourserver.prod.js`.

Step 6. Update index.html

Have its bundle.js served from /bundle.js. It was being served from /dist/bundle.js which is going to 404 in production. /bundle.js works since your express app set /public/ as its static asset folder, so any route that doesn't match something is going to be checked in public/ for a match.

Step 7. deploy

Push your app to heroku.

---- At this point you can deploy to heroku, it will work. The next few steps are to get your dev working well ----

Step 8. Add index.html to your /public folder

Copy your index.html file, paste it into your /public folder.

Step 9. Add contentBase: "./public" to your server.js file.

So server.js is your dev server. You can rename it if you want, just be sure to update your packages.json file if you do.

Anyway, add this line to your webpackdevserver config contentBase: "./public". So when you start your dev server, it'll look in /public for an index.html file, and serve from there. That works since your other assets are in the public folder too now. Otherwise you'll get a bunch of 404 on dev, or you'll have to have your files duplicated for dev and prod, which would suck. So now your server.js file should look like this:

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');

new WebpackDevServer(webpack(config), {
    contentBase: "./public",
  publicPath: config.output.publicPath,
  hot: true,
  historyApiFallback: true
}).listen(3000, 'localhost', function (err, result) {
  if (err) {
    return console.log(err);
  }

  console.log('Listening at http://localhost:3000/');
});

Note: I'm still editing this to work well with development, but at the very least this will get you deployed to prod without totally f*ing your setup.

[calesce]

@donpinkus want to make a PR and add something like Deploy_to_Heroku.md?

[calesce]

I think create-react-app better serves this purpose, they have extensive guides on building/deploying.