Deploying ReactJS app with NodeJS backend (using express) for server/database on heroku

Question

its the end of my project and I must deploy the application (ReactJS frontend, NodeJS backend) on heroku : here's the link atm https://ancient-chamber-42876.herokuapp.com/#/PageCollectionneur

I've managed somehow to deploy it but I don't know how to deploy the server at the same time . The problem is that I've hosted the client in localhost:3000 and server in localhost:3004 , now I can't get access to the server.

I want to do something like using the site for the proxy, but I'm really confused about that.. I've tried a lot of things tho Here's my server.js (connects to the database but I still don't know how to manage database with heroku.. =/) and some of the functions

 const express = require('express'); const bodyParser = require('body-parser'); const mysql = require('mysql'); var url = require('url'); const path = require ('path') // données de ma bd const connection = mysql.createConnection({ host : 'localhost', user : 'root', password : '', database : 'l3ad2' }); const app = express(); app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); next(); }); if (process.env.NODE_ENV === 'production') { app.use(express.static('client/build')); app.get('*', (req, res) => { res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html')); }); } //crée une connection a ma bd connection.connect(); // création de la database connection.query("CREATE DATABASE IF NOT EXISTS bd_l3ad", function (err, result) { if (err) throw err; }); //création de la table LignesCollection var sql1= "CREATE TABLE IF NOT EXISTS LignesCollection ( numero INTEGER UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY , collection VARCHAR(30), objet VARCHAR(30), descriptionObjet VARCHAR(250) , Avendre VARCHAR(30) DEFAULT 'no' , prix VARCHAR(30), urlimage VARCHAR(250) )"; connection.query(sql1, function (err, result) { if (err) throw err; }); // envoi des données de la table collection dans un serveur http://localhost:3004//getCollections app.get('/getCollections', function (req, res) { connection.query('SELECT nom FROM collections', function (error, results) { if (error) throw error; res.json(results) }); }); // envoi des données de la table Collectionneur dans un serveur app.get('/getCollectionneur', function (req, res) { connection.query('SELECT * FROM Collectionneur', function (error, results) { if (error) throw error; res.json(results) }); }); const port = 3004; app.listen(process.env.PORT || port, () => console.log(`server is listening on ${port}`));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Should I also post my package.json?

Anyways if anyone can help me, btw sorry the question is a bit weird but I'm really having trouble with this it would be really appreciated as theres only one week left for me to do this

Thanks in advance guys

Answer 1

You can't just open any port you want on heroku, heroku opens a port for you and you get it from process.env.PORT . If you need your api server to be separate from your static server and hosted on heroku, then you'll most likely need to create two different heroku apps.

Answer 2

@Mich, i reccently managed to deploy a fullstack application consisting of react+express+mongo, on Heroku.

It is true that it is complicated to sync all these tools, like: 1. create app on Heroku 2. host mongodb on mlab.com 3. create react + express 4. deploy them to Heroku.

I have an answer on a similar issue, you could take a look and hope it helps. link: ( How to deploy react with express to heroku )