Whilst setting up a test app myself, I couldn't find a simple way to deploy Create React App with Express on the same server. It took some tweaking, so here are the steps if you want to do the same.
Please note: These steps assume you want to run your app server and your API's from the same place. This is useful if you want to deploy simply to something like heroku.
Read this if you've not worked with create-react-app before: If you've not yet worked with create-react-app it has two modes of serving: from a hot-reloader which is launched with npm run start and an optimised production bundle which is a standard index.html that you can serve in any way you desire. I wanted a way to have the npm run start method and the npm run build method to work in the same way with my API, one way to do this is with the proxy setup I'm about to take you through.
Step 1: Install create-react-app
create-react-app your-app-name
Step 2: Install packages for create react app
npm install;
Step 3: Install express
npm install express --save
Step 4: Create a server.js file
const express = require('express');
const bodyParser = require('body-parser')
const path = require('path');
const app = express();
app.use(express.static(path.join(__dirname, 'build')));
app.get('/ping', function (req, res) {
return res.send('pong');
});
app.get('/', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
app.listen(process.env.PORT || 8080);
Step 5: Update your package.json
Add the following to your package.json
"proxy": "http://localhost:8080"
If you didn't do this we would have to create slow production builds every time (rather than the faster for development npm run start method). This is because npm start uses port 3000, which is not the same port that the express APIs are running on (8080).
Step 6: Start the express server
node server.js
Or nodemon if you prefer.
Step 7: Start your react app
Keep node running, do this in a separate tab/ window.
npm start
Start the react build with hot reloading.
Conclusion
Now you can develop all you want on localhost:3000 by using npm run start and your API's will work as expected (despite requests coming from port 3000).
When you want to deploy, just run the production build npm run build and serve your app from localhost:8080, which is node server.js in this example (note the port number at the bottom of server.js).
Profit.
Lou is the editor of The Cloud Native Software Engineering Newsletter a Newsletter dedicated to making Cloud Software Engineering more accessible and easy to understand, every 2 weeks you’ll get a digest of the best content for Cloud Native Software Engineers right in your inbox.
Latest comments (35)
I need to know either my react app is running on the server (node) or in the client browser in order to use "navigator", is there a way to do this? or i just got to check if
can you help me with this issue? thanks
I got help from this post,
thank you
Hey,
Great article! I would like to know how to set up HTTPS here.
I tried creating a self-signed certificate following the steps below,
openssl genrsa -out key.pemopenssl req -new -key key.pem -out csr.pem
openssl x509 -req -days 9999 -in csr.pem -signkey key.pem -out cert.pem
rm csr.pem
I'm adding the following code in my server.js
var express = require("express");var https = require("https");
var fs = require("fs");
const path = require('path');
var app = express();
const options = {
key: fs.readFileSync('key.pem'),
cert: fs.readFileSync('cert.pem')
};
var server = https.createServer(options, app);
app.use(express.static(__dirname));
app.get('/', function (req, res) {
res.sendFile(path.join(__dirname, 'build'));
});
server.listen(8000);
But this doesn't seem to work as when I try to open
https://localhost:3000, it throws a "The site can't provide a secure connection". Could you please point out where exactly I am going wrong?Thanks!!!!
This has been driving me insane, stayed up until 4 in the morning after 7 hours of pulling my hair out and I am still struggling today.
localhost/8080/pong works perfectly fine. As soon as run build and deploy to my web server the response is:
404 Not Found
I presume this is do with "just run the production build npm run build and serve your app from localhost:8080"
The casual nature of this comment makes me believe this is an obvious thing to be able to do, yet I have no idea how to change the server from localhost:3000 to local host 8080 when I run build.
I'm not even sure if this is what the issue is either.
Hi, can you also help out to setup HTTPS with regards to this arcticle? I have tried to use export HTTPS=true as i am working on MAC. It works fine when i do npm start (i.e. development mode) but not when i started hosting the production build as per the steps you mentioned above.
Hi,
Did you get a solution to this?
I tried creating a self-signed certificate by following these steps -
openssl genrsa -out key.pemopenssl req -new -key key.pem -out csr.pem
openssl x509 -req -days 9999 -in csr.pem -signkey key.pem -out cert.pem
rm csr.pem
And to my server.js file, I included the following code -
var express = require("express");var https = require("https");
var fs = require("fs");
const path = require('path');
var app = express();
const options = {
key: fs.readFileSync('key.pem'),
cert: fs.readFileSync('cert.pem')
};
var server = https.createServer(options, app);
app.use(express.static(__dirname));
app.get('/', function (req, res) {
res.sendFile(path.join(__dirname, 'build'));
});
server.listen(8000);
But this doesn't seem to work for me. When I open
https://localhost:3000it throws a "The site can't provide a secure connection". Can someone point out where I am going wrong?Thanks for the tutorial! I just followed it successfully to setup a new project that uses CRA and Express.
Just to be clear for anyone who is confused, what's not been stated explicitly is that you should just load localhost:3000 when you're developing because that's your single page app front end. As long as you configure the proxy in package.json and created the server.js according to this article, you should never need to think about the fact that localhost:8080 is the API server when developing.
Hope this helps!
Hey Nick! Glad to hear it worked out for you. I imagine the article is a little bit out of date now since it was written some years ago. I think what you mention is what I tried to address in the conclusion: dev.to/loujaybee/using-create-reac.... But hopefully your re-wording will help someone else who stumbles upon the article!
Hey,
When I try to serve my production build app from localhost (here 8014) I just get a blank page. In the console i get the error message: GET localhost:8014/static/js/2.2612b9d... net::ERR_ABORTED 404 (Not Found)
Any idea?
leaving this here for anyone that might be encountering the same issue! Here's how I fixed it, I just needed to add a route that matches any (*) that don't match exactly '/', and serve the react app:
app.get('/', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
// Handles any requests that don't match the ones above
app.get('*', (req,res) =>{
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
Cheers!
(*) did the trick for me too :)
the express server doesn't know how to host the static files generated by created webpack.
put
app.use(express.static('build'))to tell express where to look for them.@Lou maybe this should be included in the article.
Thanks @bordenjardine . The post does currently refer to the build folder:
app.use(express.static(path.join(__dirname, 'build')));But depending on how you're referencing the build folder it may depend on where you're the server start commands from. Try as @jaspersurmont to ensure that you're correctly pointing to the build folder, and that it has at the least an index.html inside.
did you find a solution for this? i having the same problem.
I did fix it, however I'm not so sure what exactly I did.
I think that one of the issues was that I didn't refer to the build folder correctly. Try messing around with that a bit
Would it be possible to provide a little context for the instruction to insert "proxy" into packages.json?
Hey Lou, really love this simple version to add a backend to create react app. It's really cool.
I'm having some trouble deploying this to heroku. Is there a particular package.json change I need to make to get this to work? Everything works in development, but when deployed I get an 'invalid host error' rendering on the page with nothing else
My package.json looks like this. I also ran 'npm run build' before deploying.
Given the popularity of the post, I should probably completely overhaul it. A few things have changed in create-react-app since.
Sounds like this though...
facebook.github.io/create-react-ap...
It's probably an issue with your proxy settings. CRA has changed a few bits with regards to proxies since, it's worth taking a look at their docs.