Connection refused?

I have hosted my group project on vercel, and hope to use it in my portfolio. However, there is something weird going on and I am not sure why. After it successfully hosted, I tried it and made sure everything ran like it should and it did. I closed that window, and came back to it, but when I load the page and try logging in nothing works. I checked the dev tools and I see this in the console.

I tried searching it, but there were numerous reasons why this could be happening and no real solution. I was wondering if anyone else has experienced this? Not sure why it would work originally, and now refuse the connection everytime.

Where is the API running? Why is it connecting to localhost?

This part of the project was set up by someone else. So, I am not sure of any of their reasoning behind the decisions. This would be the full page of the file if that helps any

import { Injectable } from '@angular/core';
import { Course } from './course';
import { Student } from './Student';
import { catchError, map } from 'rxjs/operators';
import { Observable, throwError } from 'rxjs';
import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
 
@Injectable({
  providedIn: 'root'
})
 
export class CrudService {
 
  // Node/Express API
  REST_API: string = 'http://localhost:8000/api';
 
  // Http Header
  httpHeaders = new HttpHeaders().set('Content-Type', 'application/json');
 
  constructor(private httpClient: HttpClient) { }
 
  // Get all course
  GetAllCourse() {
    return this.httpClient.get(`${this.REST_API}`);
  }
 
  //Get a single course
  GetCourse(id: any): Observable<any> {
    let API_URL = `${this.REST_API}/read-course/${id}`;
    return this.httpClient.get(API_URL, { headers: this.httpHeaders})
      .pipe(map((res: any) => {
        return res || {}
      }),
        catchError(this.handleError)
      )
  }

  getCourseByOwner(owner: any): Observable<any> {
    let API_URL = `${this.REST_API}/read-course/${owner}`;
    return this.httpClient.get(API_URL, { headers: this.httpHeaders})
      .pipe(map((res: any) => {
        return res || {}
      }),
        catchError(this.handleError)
      )
  }



  // Update
  updateCourse(id: any, data: any): Observable<any> {
    let API_URL = `${this.REST_API}/update-course/${id}`;
    return this.httpClient.put(API_URL, data, { headers: this.httpHeaders})
      .pipe(
        catchError(this.handleError)
      )
  }

  //Add course
  AddCourse(data: Course): Observable<any> {
    let API_URL = `${this.REST_API}/add-course`;
    return this.httpClient.post(API_URL, data)
      .pipe(
        catchError(this.handleError)
      )
  }

//Delete
  RemoveCourse(id: any): Observable<any> {
    let API_URL = `${this.REST_API}/remove-course/${id}`;
    return this.httpClient.delete(API_URL, {headers: this.httpHeaders})
      .pipe(map((res: any) => {
        return res || {}
      }),
        catchError(this.handleError)
      )
  }

    //Add student
    AddStudent(data: Student): Observable<any> {
      let API_URL = `${this.REST_API}/register-page`;
      return this.httpClient.post(API_URL, data)
        .pipe(
          catchError(this.handleError)
        )
    }

    GetCredintials(): Observable<any> {
      let API_URL = `${this.REST_API}/login-page`;
      return this.httpClient.get(API_URL, { headers: this.httpHeaders})
        .pipe(map((res: any) => {
          return res || {}
        }),
          catchError(this.handleError)
        )
    }




  // Error 
  handleError(error: HttpErrorResponse) {
    let errorMessage = '';
    if (error.error instanceof ErrorEvent) {
      // Handle client error
      errorMessage = error.error.message;
    } else {
      // Handle server error
      errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
    }
    console.log(errorMessage);
    return throwError(errorMessage);
  }
}

It looks to be set up for local development.

REST_API: string = 'http://localhost:8000/api';

That might have worked if you had the local server running when you were testing it. But that isn’t correct, the API needs to be running on some server anyone can access.

Any suggestions on how to get that done? Ive only seen how to set up for local testing

It’s a node/express API, the code must be somewhere in the codebase (same repo if monorepo, or using a different repo for the client and backend). How you set it up may depend on how the project is structured.

With Vercel you only have edge/serverless functions so running an express API isn’t just going to work with any setup Using Express.js with Vercel

You can host the API on a separate server from the client code, like Heroku for the backend, and keep Vercel for the frontend. The express code can run anywhere that supports Node/Express apps (even Replit or Glitch)

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.