1

I want to deploy a project (React app + Node server), but I'm new to deployment,

I wanted to know : do I need to have the React app in a Github repo and the Node server in another, or I can deploy all in one ?

Currently, I have 1 Github repository with a folder "frontend" and an other "backend",

I want to have my React app on -> nameofmyapp.herokuapp.com and the Node server on -> api-nameofmyapp.herokuapp.com,

If someone got ideas... Thanks

Improve this question

2 Answers 2

Reset to default
1

While in theory that's not a problem, I would suggest maybe considering keeping things on one domian for reasons such as additional latency and connection trouble as well as path issues such as you are facing. It would seem to me that you would ideally just like to prefix the name of your app with 'backend' or similar and in such a case I would just consider setting up a sub domain on a domain which I had control ie mydomain.com and backend.mydomain.com. While developing on Heroku this model could prove to be tricky as each 'site' or app is separate and not actually intended to work together while they most certainly could. Consider setting up separate routes and an endpoint for 'backend' on your app, similar to your frontend login, then when you are finished developing your app and happy you could register your domain name and point it to your app and point a subdomain ie backend.mysite.com or login.mysite.com to your endpoint on Heroku ie mysite.com/backend. Unless you have a specific reason for separating them into their own repos with separate source control and urls, it might make debugging things much harder. Apologies if I missed your point. Most web hosting companies should allow you to register a subdomain or vanity domian free or charge because you own the primary domian. Just some considerations.

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

8 Comments

The structure and design model I am referring to is the one Philippe mentioned too. It would make life much easier I think.
Ok thats’why I did but I still can’t get datas from the server in production (locally everything works). Site : -> ofilms.herokuapp.com. Repo -> www.github.com/Versifiction/ofilms
And what do your Heroku logs tell you? And your console?
And which database are you using? If Mongo have you allowed access to your IP?
I’m using a MongoDB database in the cloud, so I can access everywhere and I whitlisted every IP, the issue is with the server. In the console of the browser I see that I can’t fetch datas from the server
|
0

Anything is possible, you just need to understand how things are working... my advice would be that you start simple and have a single repo that contains front+back, you can then deploy that as a single Heroku app.

One app can only have a unique Heroku url, so you cannot have what you mention nameofmyapp + api-nameofmyapp hosted by a single Heroku instance, this would need to be hosted by two different instances, which means code from two repos.

Usually for a node app, you would create an /api route that is hosted by the same app, so you have your frontend served at nameofmyapp.herokuapp.com and your api at nameofmyapp.herokuapp.com/api with some sub routes, for example nameofmyapp.herokuapp.com/api/items.

You should be able to easily find tons of Node/React/Heroku tutorials on the web, just play a bit with it to experiment and build some understanding of how those are working together.

Improve this answer

6 Comments

I deployed with the frontend and the backend in the same repo, the client is OK but I can't fetch datas from server, because of a "Error occured while trying to proxy to" error...
well, can't really tell you much based on such thin description, you should first make sure your app is working fine locally, then if not working on heroku find what is the cause and the differences...
the app is working fine locally, the issue is that locally my server is on port 5000 and the client on port 3000, but in production the server is not in port 5000 and I don't know what to do... do you want me to show some stuff?...
the client cannot be on any port, I think what you rather mean is that you have a static server for the frontend on port 3000 and another one for the API on port 5000. On heroku your app will only get a single port that's probably why it doesn't work. Again what you should do is lower your ambitions and start with a very basic app which runs both static client and API from a single node application, so it requires just one port to run. When you master a bit more the mechanism you can split front and back on 2 heroku instances, but it will be more tricky... again just a suggestion.
Good advice from Philippe, there is so much documentation and techniques that going back to basics and building from there can do the worlds of good. One thing, have you set any PORT in your .env file? Because you cannot set a port for Heroku, it gets automatically assigned to your app. Also, remember your host should be set to 0.0.0.0 on Heroku, 127.0.0.1 only works locally. Probably not related to your exact problem but I struggled initially not knowing about those two settings when deploying. Oh and app.set('trust proxy', 1); could also sometimes help if behind a proxy like Heroku.
|

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.