0

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

2 Answers 2

0

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.

Sign up to request clarification or add additional context in comments.

4 Comments

okay I understand, so that means that I have to host my server on another heroku app since I can't put both in the same port right ? I've tried using localhost:3000 for both but it wouldn't let me =/
@Mich You can host them both on the same port as long as you're not using React Router, but you'll need to change app.get('*', /* ... */) to app.get('/', /* ... */) so your react app doesn't take over all the get routes making it impossible to reach the api routes.
weeeelll that's awkward since I'm using react router for the pages =/ any solution for this ?
Try moving app.get('*', /* ... */) to the bottom of the file (just before app.listen)
0

@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)

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.