Deploy a prebuilt expense React app on Heroku-NO SUCCESS

This is one of Brad Traversy’s courses for making an expense app. There are earlier videos where he does it in vanilla JS then moves on to doing it with React and using State to store the data, then in the video below he uses a MERN Stack (MongoDB, Express, React & Node) and gets it running on a loclhost. So externally all he’s done is wire up to a Clo9ud Atles database, the rest is on his local computer.

The learning I’m interested in is getting a Backend (Node) and Frontend (React) up and running with persistant data in a Database that is accessible out of production instance in Heroku, I’m happy with the Cloud Atlas MongoDB solution.

This follows on from me deploying a Selfie App to Heroku with a file for storage. I couldn’t access the selfie app data later as it was locked in the Heroku server.

The learning I want is confdence in deploying apps. If I can do this without too much pain then its worth learning more about Node & React, if not then its just playing with the programmes on localhost so not very useful.

This seems the current programming environment for people so I should try and get familiar with these tools.

Project

The video above has a link to a github repostiory for that code. I’ve cloned it to my PC.

Brad Traversy has another video on deploying a shopping list app to Heroku that has both back and front ends here:

So I will try and deploy the first expense app using the process in the video above, fingers crossed.

Part 1. Hook up to DB and load packages

I have hooked up to MongoDB and I had to delete one instance of the clone and rebuild from scratch before I got the react app running in the client directory with >npm start after doing an >npm install in that directory. I started that server and browser at localhost:3000

Then to parent directory and did a >npm install then >node server to have that running.

I set the DB path in the environmental variable file & then shut downall all the servers and then restarted both and tested:

React app running on localhost:3000
I checked the database and the documents are in there.

So at this point, I have the app running on my PC and linked to the cloud database.

2. Configuring for Deployment

It wont. I tried itbut it’s broken.

The issue seems to be that I canmnot open the localhost:5000 browser page, there are errors, but its running and connected to the mongoDB so passes stuff through.

There is a block in the network in that it wont load the favicon.ico and just says Cannot GET /

Not sure where to go from here. I think its setup OK. Loading it up to Heroku is OK and the build is made but there is a fault in the backend server that I’ve not been able to identify or fix.

So although Heroku sayssuccessful build, it ain’t. And I think its to do with the backend rather than the frontend. The app is sophisticated and I don’t really understand the code, I’m stumbling around in the dark.

I chose this app as it was something useful, all the other tutorials have been on to do lists, which do not shake my tree.

I think i’ll need to revisit the server code and then move onto another tutorial that looks at API’s rather than this.

Tutorials look easy but even with the code I still can’t deploy this app, so that is a concern. Unless you can deploysomething its just playing around. Rather frustrating.

End comment

After the last paragraph I went at it again for another hour or 2 and still no closer. Give up on this. A non- productive day.