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, Apr 02 '20 at 18:57
Yes, all in the same Heroku App (backend and frontend). @Tom — Andres Urdaneta, Apr 02 '20 at 19:01
Okay I don't think Heroku supports ports, according to this stackoverflow: https://stackoverflow.com/questions/37636580/heroku-node-js-i-have-a-server-which-uses-multiple-ports-how-can-i-get-herok. 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, Apr 02 '20 at 19:08

score 2 · Answer 1 · answered Apr 03 '20 at 03:41

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')
  }
}

score 1 · Answer 2 · answered Apr 02 '20 at 19:18

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.

score 0 · Answer 3 · answered Aug 17 '23 at 15:49

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.

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

3 Answers3