There are similar posts, but my case is pretty specific on NodeJS-frontend-backend-Docker-Heroku, so I have stuck for a whole week now.
Task : I have 2 folders frontend and backend. I have Dockerfile in both of them like this /frontend/Dockerfile and /backend/Dockerfille. I also have docker-compose.yml and Procfile on the root directory.
Attempt 1 : change to Dockerfile.frontend and Dockerfile.backend. I use heroku:container push --recursive. Successfuly deploy it on Heroku, I already have scale=1 too. It doesn't work.
Attempt 2 : change Dockerfile.frontend to Dockerfile.web and Dockerfile.backend. The frontend web is working, but I can't login so I can't say for sure. I can't call api request to backend with POST https://mycoolapp.herokuapp.com/api/users/login. I also used Postman and nothing happened.
My guess : the backend either doesn't work at all, or else I use process.env.PORT || localhost:5000 incorrectly.
I really need help with this. Sorry for my english. Thank you.
I solved it by pushing frontend and backend to different apps.
For each folder, I would have 1 Procfile that has web npm start
And then, I would change my API in my frontend from localhost:5000/api/info to myappname.herokuapp.com/api/info
Explain : I believe 'web' process-type is the only special one that accept external HTTP. So my backend previously did not work, while my frontend (web) works.
Related
I'm very new so sorry about this...
Basically, I am trying to replicate a blog from a youtube tutorial - however there was nothing available on how to deploy the application so I'm trying to replicate it as much as I can.
I successfully deployed both the backend and frontend separately on render, then I changed the axios URL to link with the backend. I then type the backend URL with /api/posts and it retrieves the posts in the DB so I am not sure what else I am missing out on if someone could help me that would be great.
Frontend
Backend
Ignore the added extra frontend folder in the backend folder as that was an accident... If that has an effect on this?
Thank you.
ERROR: everydaybeing.onrender.com/auth/register:1
Failed to load resource: the server responded with a status of 404 ()
Tried to link the frontend to backend but unsuccessful
I'm developing a full-stack web app, which has both a frontend and a backend. In production, my frontend will be hosted at https://frontend.com, and my backend at https://backend.com. It seems reasonable to hardcode the address https://backend.com in my frontend code.
However, when I am testing the app locally, I'll want to spin up the backend at, say, localhost:8000, and redirect my frontend to this address instead. My question is: what's the easiest/most elegant way to do this?
One approach is to manually change the frontend code to point to localhost:8000 for local testing, and then change it back before deploying. However, this is quite annoying, and it's too easy to forget to change it back.
An approach I've used in the past is:
Create a file server.js containing:
const LOCAL_SERVER = "http://localhost:8000"
Import this file in my frontend HTML:
<script src="server.js"></script>
Set a fallback to the remote/production server in my JS scripts:
let SERVER = typeof LOCAL_SERVER === 'undefined' ? 'https://backend.com' : LOCAL_SERVER
Add server.js to my .gitignore.
This works, but it feels kind of hacky, and it pollutes my production code with references to this (possibly non-existent) server.js and LOCAL_SERVER constant. I'm wondering if anyone has a better way.
If your real backend & local backend use the same port, a simple solution is to add the following line to your hosts file:
127.0.0.1 backend.com
I am new to reactJS. I am working on project which uses following :
Front-end : ReactJS
Backend : NodeJS (Express)
Front-end runs on port 3000
Back-end runs on port 8088.
I am planning to deploy application on amazon AWS.
What i am trying to do is load reactJS front-end when i make request on http://localhost:8088/
I know using axios we can make request on backend server and display fetched data.
What would be standard way of loading ReactJS front from the nodeJS ?
I'm not sure if this is the answer you are looking for, but generally in development you use something called proxy in your package.json in the client (react) folder:
{
// Other stuff
"proxy": "http://localhost:8088"
}
and then when you'd want to deploy you'd run npm build for your react folder and serve that generated folder called build. But as I said, you usually do that only when deploying your application onto server, not the actual development.
Also I'd suggest checking some of these videos, that are focused on deployment, because that is what I think you are asking, right ?
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I have been doing react apps for some time now and I want to deploy my latest project. The problem is, in this particular app, I use an API Key to make requests to The Movie Database API. After figuring out that I need to hide it in the backend with an .env file (something I have never done before), I made it work perfectly on my machine using an Express server I made. The two problems that I have start when I want to make this thing go live.
I separated my front end (https://github.com/cavini/the-movie-app) from my backend (https://github.com/cavini/the-movie-app-server). I hosted the frontend code on Netlify with zero issues, but I cannot make the hosted front end website make the GET and POST requests to the backend which is on Heroku.
I have never used heroku before and I'm not sure I fully understand how it works.
Here is the message I get when I try to see what my Heroku app looks like. Heroku deploy error?
I went looking for answers on the logs but I do not understand what it says.
Heres what that looks like: Heroku log, Heroku log 2
My questions are, do I need a static folder to host an app on heroku? If so, how do I do that? Because on the front end, react already has a build command to do so. Also, do I need the front end files too?
That's the first part of my problem. The second part is what I think is related to CORS. When I try to make the requests from my local files to the local back end code, it works perfectly, but when I try the same to the back end hosted on Heroku, I get this message on my Chrome console.Access-Control-Allow-Origin header error.
Heres what those look like on the Network tab: Request details, Request details 2
I have absolutely NO IDEA what any of this means and/or how to fix it. Can anyone please shed a light on this?
Instead of trying to host the front end on netlify and the backend on heroku, you could host both front and backend on heroku from 1 github repository, which would also resolve the issue your having with Cors.
To host both front and backend on Heroku you'll need to put both folders into 1 directory,
You'll also need to add something like this to your main express file which fetches the files from your front end files and displays it
(install path)
npm i path,
const path = require('path')
app.use(express.static(path.join(__dirname, 'client/build')));
Also
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'))
}
);
Also adding the following scripts to be used by Heroku:
"scripts": {
"start": "node index.js",
"heroku-postbuild": "cd client && npm install && npm run build"
},
Create a Procfile if you don't already have one, as you're creating a web application which connects to ports, you'll need a web Dyno, all you need in your Procfile is web: npm run start
And also remember to replace the request urls with the new Heroku link that's given.
e.g previously your requests would be fetched from "https://example.com/api", after hosting on heroku and both your front end and back end are together, you'll need to make requests to "LinkGivenByHeroku/api",
The reason your getting a "failed to bind to $PORT within 60 seconds" error is because Heroku isn't always able give you the port you wanted, and it chooses an open port and puts it into its ENV, so where you put something like:
let port = 3001
app.listen(port)
Change it to:
let port = process.env.PORT || 3001
app.listen(port)
I am trying to connect an app hosted in my localhost:3000 port. The back-end is on the localhost:8080 port (not a remote API but on my own PC. I downloaded a pre-created back-end api and linked the front-end to the back-end with MongoDB using an .env file.
The weird thing is that on MongoDB the connection looks ok, following the tutorial I am using. The backend and the front-end also look alrigh, however, I am unable to login with the form in the screenshot.The error I get when trying to login or create a new user is "xhr.js:178 POST http://localhost:3000/login 404 (Not Found)"
It was a bit hard to put the whole code here, so I am linking you to the front-end repo: https://github.com/manuelalonge/complex-app and the back-end repo: https://github.com/manuelalonge/back-end-api
I can understand the issue is most likely on the back-end but I could not understand where exactly. I tried to get back to the previous lessons in the tutorial but it still doesn't get solved.
Probably it is easier to solve this issue with a screenshare session, so if anybody would contact me I'll be grateful.
Screenshot --> [1]: https://i.stack.imgur.com/jVJzn.png
Your screenshot points to what's wrong. You're posting to localhost:3000, as you know this is the frontend webpack server.
You'll want to create an axios config file and set a base url to hit the correct endpoint.
const axiosInstance = axios.create({
baseURL: 'localhost:8080'
});
export default axiosInstance;
Also, please add some sort of file structure.