Trouble Deploying Angular/Express App in Heroku frontend cannot hit the API endpoint

Question

Currently in development it works just fine... localhost:4200 for the front-end and localhost:8080 for the back-end

However, I just deployed it and the front-end get displayed, but isn't getting the data from the API because in my app.service.ts I'm doing the following:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  private apiUrl = 'http://localhost:8080/api'

  constructor(private http: HttpClient) { }

  public getNews() {
    return this.http.get(`${this.apiUrl}/countries`)
  }
}

As you can see, I'm hardcoding the localhost:8080 and it works fine in development, but when it comes to production Heroku does not assign me the port 8080, it assigns me another one.

That being said... How can I tweak this in order to read the port Heroku gives me?

This is my app.js file

const express = require('express');
const app = express();
const scrapper = require('./backend/scrapper')

// Create link to Angular build directory
var distDir = __dirname + "/dist/covid19";
app.use(express.static(distDir));

app.use((req, res, next) => {
    res.setHeader("Access-Control-Allow-Origin", "*");
    res.setHeader(
        "Access-Control-Allow-Headers",
        "Origin, X-Requested-With, Content-Type, Accept, Authorization"
    );
    res.setHeader(
        "Access-Control-Allow-Methods",
        "GET, POST, PATCH, PUT, DELETE, OPTIONS"
    );
    next();
});

app.use("/api/countries", async (req, res, next) => {
    const data = await scrapper.getCountries()
    res.status(200).json(data)
})

const port = process.env.PORT || 8080;
app.listen(port, () => {
    console.log(`API listening on port ${port}...`);
});

module.exports = app;

As you can see I'm declaring my port to be process.env.PORT || 8080, but this is for the backend... How can achieve this but in my API call in the service.ts file?

Well your api route isn't a localhost anymore when your are hosting it on heroku. Do you host the node js and the front-end in the same heroku application? Or do you have 2 — Tom
– Tom, Commented Apr 2, 2020 at 18:57
Yes, all in the same Heroku App (backend and frontend). @Tom — Andres Urdaneta
– Andres Urdaneta, Commented Apr 2, 2020 at 19:01
Okay I don't think Heroku supports ports, according to this stackoverflow: stackoverflow.com/questions/37636580/…. You have 2 options, have al ook at the answer of that stackoverflow or what you can do is create 2 heroku apps one with front-end, one with back-end. In your front-end you would then change your api url to something like http://my-heroku.herokuapp.com. Search around for how to host node.js server on Heroku, plenty of information to be found. — Tom
– Tom, Commented Apr 2, 2020 at 19:08

Andres Urdaneta · Accepted Answer · 2020-04-03 03:41:38Z

You guys pointed me in the right direction, but to be precise:

I noticed that in Angular you get a environments folder with two files 1. environment.ts and environment.prod.ts.

I just had to make sure to use to point to the URL that Heroku gave me for my app after deploying yourappname.herokuapp.com, by doing the following in my environments.prod.ts (Which is the one that Heroku is gonna look for)

export const environment = {
  production: true,
  apiUrl: "https://yourappname.herokuapp.com/api"
};

And in my api.service.ts I ended up with the following code:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { environment } from '../environments/environment'

const API_URL = environment.apiUrl;

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  constructor(private http: HttpClient) { }

  public getNews() {
    return this.http.get(API_URL + '/countries')
  }
}

Tin Nguyen · Accepted Answer · 2020-04-02 19:18:22Z

1

When you deploy a web server on Heroku you bind to the $PORT Heroku tells you to bind to.

When you visit your deployed app you don't specify a port. You just connect to yourappname.heroku.com. The DNS automatically translates it into ipaddress:port.

So on your frontend you just point to yourappname.heroku.com instead of ipaddress:port.

answered Apr 2, 2020 at 19:18

Tin Nguyen

5,3801 gold badge16 silver badges34 bronze badges

Comments

dezmasterflex · Accepted Answer · 2023-08-17 15:49:20Z

0

You have to refer to the production variables when deploying your app. I like using the isDevMode function included in the '@angular/core' package.

import { isDevMode } from '@angular/core';

setUrl(){
 if(isDevMode() == true){
 //in development mode
 api_url = "localhost:4200"
 }else{
 api_url = "heroku.app_url.app"
 }
}

This function lets you know which mode the app is running in, so you can use that to switch between connection strings.

answered Aug 17, 2023 at 15:49

dezmasterflex

193 bronze badges

Collectives™ on Stack Overflow

Trouble Deploying Angular/Express App in Heroku frontend cannot hit the API endpoint

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related