How to deploy React application to Heroku

Question

I have built a single-page weather app with React and Node.js but can't seem to get it to deploy to Heroku. So far, I have:

Created a new app on Heroku called weather-app-react-node
Logged into Heroku on the CLI
Run the command 'heroku git:remote -a weather-app-react-node' in my terminal
Added a Procfile with 'web: npm start' in it
Ran 'git add .', 'git commit -m "Pushed to heroku"', 'git push heroku master'

My terminal tells me it is deployed and waiting but when I click on the link, I get this error message:

SecurityError: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.

I've tried to google it but can't seem to find anything relevant to my situation. Anyone know how to fix it?

heroku-site: https://weather-app-react-node.herokuapp.com/
github: https://github.com/caseycling/weather-app

score 9 · Answer 1 · answered Mar 04 '20 at 16:26

To deploy the React app to Heroku, I performed the following steps...

1. In your terminal, enter npm -v and node -v to get your npm and node version. In my case, my npm version is 6.14.1 & my node version is 12.13.0.

2. In package.json, add "main": "server.js", and "engines": { "npm": "6.14.1", "node": "12.13.0" }, under the "private" property. In your scripts property, add "heroku-postbuild": "npm install" and set "start" to "node server.js".

3. In the root directory, create a Procfile with one line of text: web: node server.js.

4. In the root directory, create the server.js file with the below code..

const express = require("express");
// eslint-disable-next-line no-unused-vars
// const bodyParser = require('body-parser');
const path = require("path");
const app = express();
const port = process.env.PORT || 8080;

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

// This route serves the React app
app.get('/', (req, res) => res.sendFile(path.resolve(__dirname, "build", "index.html")));

app.listen(port, () => console.log(`Server listening on port ${port}`));

5. Enter npm run build in the terminal to produce the build directory. Next, remove (or comment out) /build from .gitignore file (in root directory).

6. Test if server.js works by entering node server.js (or nodemon server.js) in the terminal. If it works, server.js should serve the React app.

7. Commit everything from step 1-6 to GitHub and Heroku repository. To commit to Heroku repository, in your terminal, enter heroku git:remote -a weather-app-react-node and afterward, enter git push heroku master.

score 0 · Answer 2 · answered Jan 21 '20 at 23:41

0

You can try logging in to heroku directly and deploy your github repository's desired branch from there directly.

answered Jan 21 '20 at 23:41

sudo97

904
2
11
22

It might be related to your api call to openweathermap. Can you double check if you have the right format for the request URL and a valid auth key? – sudo97 Jan 21 '20 at 23:55
So i figured out that one of my issues was I didn't have a server built. I added a server.js file and built a server with express but now it is giving me the basic Application Error message – Casey Cling Jan 21 '20 at 23:59
Application Error message is normally caused by your application code base. I suggest going through [this link](https://daveceddia.com/deploy-react-express-app-heroku/). – sudo97 Jan 22 '20 at 00:04
After going through your github repository it seems like you dont need an express server. Heroku offers deployment of react projects with made `create-react-app` with zero configurations. Check out [this link](https://dev.to/smithmanny/deploy-your-react-app-to-heroku-2b6f) – sudo97 Jan 22 '20 at 00:08

Divek John · Answer 3 · 2020-11-02T07:34:03.697

I used create-react-app-buildpack

npm install -g create-react-app
create-react-app my-app
cd my-app
git init
heroku create -b https://github.com/mars/create-react-app-buildpack.git
or
heroku create -b mars/create-react-app
git add .
git commit -m "I am the newborn app"
git push heroku master
heroku open

Note: In my case, buildpack config from CLI did not work, I still had nodejs-build pack, so I manually changed the build pack to mars/create-react-app in the Heroku project dashboard

score 0 · Answer 4 · answered Dec 06 '20 at 14:28

The best practice to push React apps to Heroku with a node js backend is to use the Heroku Post Build Script, The post build will take care of all the work under the hood

Follow the steps below

Add This below snippet to your package.json under the scripts

    scripts{
    "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix reactFolderName && npm run build --prefix reactFolderName"
}

And add this snippet to your index.js file

    app = express()
    app.use(express.static('reactFolderName/build'));
    app.get('*', (req, res) => res.sendFile(path.resolve(__dirname, 'reactFolderName', 'build', 'index.html')));

score 0 · Answer 5 · answered Nov 25 '22 at 06:23

After I set up the all the things above mentioned I'm facing this issue.

When I'm using the URL like http://localhost:8080/ & http://localhost:8080/button

Cannot GET /button

In Console

Failed to load resource: the server responded with a status 
of 404 (Not Found)
DevTools failed to load source map: Could not load content 
for chrome- 
extension://gighmmpiobklfepjocnamgkkbiglidom/browser- 
polyfill.js.map: System error: net::ERR_FILE_NOT_FOUND

How to deploy React application to Heroku

5 Answers5

Linked