CODEWITHSUNDEEP
node.jsreactjsherokuheroku-ci
Casey Cling
Casey Cling

Reputation: 637

How to deploy React application to Heroku

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:

  1. Created a new app on Heroku called weather-app-react-node
  2. Logged into Heroku on the CLI
  3. Run the command 'heroku git:remote -a weather-app-react-node' in my terminal
  4. Added a Procfile with 'web: npm start' in it
  5. 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

Upvotes: 5

Views: 9538

Answers (5)

L O C O
L O C O

Reputation: 155

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

Upvotes: 0

SARAN SURYA
SARAN SURYA

Reputation: 554

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')));

Upvotes: 0

Divek John
Divek John

Reputation: 755

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

Upvotes: 0

Genesis
Genesis

Reputation: 198

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".

enter image description here

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.

Upvotes: 9

sudo97
sudo97

Reputation: 914

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

Upvotes: 0

Related Questions