Comments (5)
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 your
server.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.
from react-hot-boilerplate.
@yonahforst you can go through following blog and repository for heroku deployment
Blog Link
Github repo
from react-hot-boilerplate.
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.
from react-hot-boilerplate.
@donpinkus want to make a PR and add something like Deploy_to_Heroku.md
?
from react-hot-boilerplate.
I think create-react-app better serves this purpose, they have extensive guides on building/deploying.
from react-hot-boilerplate.
Related Issues (20)
- React native view swiper HOT 1
- Using boilerplate with react-hot-loader/webpack loader HOT 1
- [HMR] Update failed: Error: Manifest request to /static/[hash].hot-update.json timed out. HOT 4
- Does the next branch work? HOT 1
- Version 3 Release Date HOT 1
- No error display with next branch? HOT 1
- Express res.sendfile(bundle) just loads browser with plain JS source in the actual window
- whether has the plan to release a standard version to use webpack to 2.x HOT 1
- Double WDS client in the next branch
- Next branch: after hot reload, redux-connected component not re-rendered in response to redux state change HOT 2
- No solution for server-side rendering HOT 1
- Bundle is 190kb from 150kb when updated from webpack v3
- Hot loading and iframes
- Webpack plugin is not working is `three-shaking` is enabled
- The guide page based on is gone, return 404.
- Receive error upon clone
- Hot Reload only works after changing files multiple times, very annoying. HOT 3
- Hola
- not working if I made some changes in functions HOT 1
- not working well with webpack 4 and happypack HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-hot-boilerplate.