Why is Heroku unable to cd to my frontend React App? - node.js

Question

I keep getting this error message when I git push my backend to heroku:
remote: -----> Build
remote: Running heroku-postbuild
remote:
remote: > mp-backend#1.0.0 heroku-postbuild /tmp/build_eaac46c4d4704cb2a35221c2068a754a
remote: > cd map-project && npm install --only=dev && npm install && npm run build
remote:
remote: sh: 1: cd: can't cd to map-project
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno 2
remote: npm ERR! mp-backend#1.0.0 heroku-postbuild: `cd map-project && npm install --only=dev && npm install && npm run build`
remote: npm ERR! Exit status 2
remote: npm ERR!
remote: npm ERR! Failed at the mp-backend#1.0.0 heroku-postbuild script.
Leading to a ! [remote rejected] master -> master (pre-receive hook declined).
I do not understand. I added this:
"scripts": {
"start": "node index.js",
"heroku-postbuild": "cd map-project && npm install --only=dev && npm install && npm run build"
}
to the package.json for my backend and then ran
git init
git add .
git commit -m "Initial commit"
heroku create
git push heroku master
while cd'd to my backend. What keeps causing my build to fail?
additional code that may help:
//my backend under folder mp-backend
const express = require('express');
const path = require('path');
const app = express();
const populartimes = require('populartimes.js');
//Node Geocoder
const NodeGeocoder = require('node-geocoder');
const options = {
provider: 'google',
apiKey:
};
const geocoder = NodeGeocoder(options);
const getWeekDay = () => {
typical getDay codes
}
const unRendered = 'https://i.imgur.com/fgSeO4a.png';
const Rendered = 'https://i.imgur.com/sg9a1sG.png';
//Markers
const markers = [an array of marker objects]
const findLatLong = async function findLatLong(){
for(let i = 0; i < markers.length; i++){
const temp = await geocoder.geocode(markers[i].address)
markers[i].position.lat = temp[0].latitude;
markers[i].position.lng = temp[0].longitude;
}
}
const fillNewMarker = async function fillNewMarker(num){
const i = num;
let temp;
let data;
await populartimes(markers[i].placeID)
.then(out => {data = out; temp = 'Currently ' + data.now.currently + ' full.'})
.catch(() => {temp = 'There is currently no data available.'});
markers[i].busy = temp;
}
// Serve the static files from the React app
app.use(express.static(path.join(__dirname, 'map-project/build')));
var bodyParser = require('body-parser');
app.use(bodyParser.json()); // support json encoded bodies
app.use(bodyParser.urlencoded({ extended: true })); // support encoded bodies
app.get('/api/getMarkers', async (req,res) => {
await findLatLong();
console.log('Find LatLng Complete')
//await fillPopularity();
//console.log('Find Business Complete')
var mark = markers;
res.json(mark);
console.log('Sent Markers');
console.log(markers);
});
app.post('/api/newMarker', async (req,res) => {
console.log('Request Recieved');
const n = req.body.index;
console.log(n);
await fillNewMarker(n);
console.log('Retrieve Data For New Marker Complete');
markers[n].icon = Rendered;
var mark = markers;
res.json(mark);
console.log('Sent Markers');
console.log(markers);
})
app.get('*', (req,res) =>{
res.sendFile(path.join(__dirname+'/map-project/build/index.html'));
});
const port = process.env.PORT || 5000;
app.listen(port);
console.log('App is listening on port ' + port);

Answer 1

What's your folder structure? What does your project look like?
You haven't provided enough information for anyone to help you.
Edit:
You have two options here, mono-repo and poly-repo. Basically, do you want your front and back ends always tied together (mono-repo) or do you want them to be entirely separate things (poly-repo)? While I am a huge fan of mono-repos, even with large scopes, don't let me necessarily persuade you either way without doing your own research. I think a mono-repo would be better for you in this situation, as they are less work to manage.
Here's an example of a folder structure for your project:
my-project
----.git
----packages
--------back-end
--------front-end
----README.md
----(any other whole-project type files)
Your whole project will be under one Git repository. See your issue was that Git only tracks the folder you're in and down. So if you put Git in packages/backend, it'll only find and track that folder's children. Meaning when you push, anything not in packages/backend just doesn't exist.
This solution I propose has you tie the two packages quite closely. When you push to git or heroku, both your front and back end will be together. This also lets you handle some other tooling better, like say documentation. You can add instructions for deploying the system as a whole, rather than an individual part.