Changing the port number for a gulp-angular project with loopback REST API: A step-by-step guide

I'm currently working on a project that utilizes loopback for the backend and Angular for the frontend. My client side was set up with gulp-angular, and I added lb-services.js from loopback. The issue I am facing is that my Angular application is attempting to send requests to the API on the same port where I have gulp serve running. Loopback is on port 3000 while Angular runs on port 3001.

Is there a way to instruct Angular to use a different port when making requests to the API?

I attempted to modify the gulp server.js like so:

browserSync.instance = browserSync.init({
    startPath: '/',
    server: server,
    browser: browser,
    port:4000
});

However, this configuration results in both Angular and its API requests running on port 4000. Here's what it looks like:

Angular running on: http://localhost:4000/

Requesting data from loopback server:

http://localhost:4000/api/People 

What I actually want is this: Angular running on: http://localhost:4000/

Requesting data from loopback server:

http://localhost:3000/api/People 

Any suggestions on how to accomplish this task would be greatly appreciated!

Answer №1

To update the API URL to localhost:3000, consider implementing a rewriteRule. Check out this guide for more information:

Another useful approach is to utilize a proxy configuration like shown here: https://github.com/Swiip/generator-gulp-angular/blob/master/docs/how-it-works.md#proxy. By setting up a proxy to handle API requests and point them to the correct URL (similar to the example below from GitHub):

app.use('/api', proxy({target: 'http://localhost:3000/api', changeOrigin: true}));

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Executing actions on events in a Basic jQuery sliderLearn how to handle events and execute

I utilized the slider from the bjqs plugin at after reviewing the documentation, I noticed it only offers options and lacks events/functions. I am referring to events/functions like onSlideChange and onSlideDisplay. While other plugins such as bxslid ...

Guide on updating individual rows in Google App Script using data from a different sheet

I am trying to create a script that will pull a value from column[3] in the ZONE sheet to the active sheet, specifically in column 56 of the job sheet when the zonelist value matches the zone value in different sheets. The script should check the range fro ...

Is there a way for me to retrieve the values of <td name="pname"> when the Edit button is

When the button is clicked, I use jQuery to add items in a td that I have created. $("#ddproduct").click(function () { $('#prodcuttable tr:last').after('<tr><td name="pname">' + prodName + '</td> <t ...

Tips for adding styles to the first and last elements of a printed page

I have created a dummy code example that generates multiple paragraph elements with some text in it. However, I need to add borders to the first and last elements to enhance the design. Here is the code snippet: <!doctype html> <html> <he ...

What is the best way to rotate a mesh by 90 degrees in ThreeJS?

Currently, I'm working on rotating a mesh by 90 degrees within Three JS. Below is an image illustrating the current position: My goal is to have the selected mesh rotated parallel to the larger mesh. I attempted to rotate the matrix using the follow ...

router.query is returning an empty object when using Next.js

Here is how my folders are organized: https://i.stack.imgur.com/TfBtv.png In addition, here is a snippet of my code: const router = useRouter(); const { id } = router.query; The issue I'm facing is that the id is returning {} instead of the actual ...

Interactive grid feature created with HTML Canvas

Imagine my surprise when I discovered that the latest version of Google Spreadsheets is now using a canvas tag to render the spreadsheet grid, unlike the traditional <table><tr><td> method used in the past. In the previous version, only ...

Debugging JavaScript on the client side for Internet Explorer

Can we skip over a Javascript statement without running it in the Developer Tools of Internet Explorer? Similar to the "Set next statement" feature in Visual Studio debugger... ...

Error: Firebase has encountered a network AuthError, which could be due to a timeout, interrupted connection, or an unreachable host. Please try again later. (auth/network-request-failed

I have set up my Angular app to utilize Firebase's emulators by following the instructions provided in this helpful guide. In my app.module.ts, I made the necessary configurations as shown below: import { USE_EMULATOR as USE_AUTH_EMULATOR } from &apos ...

Vuetify - Best practices for managing click events with <v-btn>?

As a newcomer to vuetify and vue, I am currently trying to understand how to handle a click event on a <v-btn>. (Using vue 2.6.10 and vuetify 2.0.0) (I was surprised to find that I couldn't locate a single functioning code snippet, despite sear ...

Struggling with getting React to successfully fetch data from an Express API. Any suggestions on how

I am having trouble with my fetch call to the express API. Even though I receive a response status of 200, I am still getting the index.html instead of the JSON data I need. Here is an overview of my setup: package.json "version": "1.0.0&qu ...

Selenium - Firefox Unresponsive Script Issue

I have encountered an issue where I am getting multiple "Unresponsive Script" pop-ups when opening a page using Selenium. This problem does not occur when I manually open the page using Firefox without Selenium. Strangely, the issue only arises when I open ...

Saving Selected Radio button values into Jquery Array

In my HTML table, there are multiple rows with radio buttons representing the sexes in the 0th position of <td>. I am trying to store the values of sex (either 1 or 0) in an array. Below is a snippet for a table with 3 rows. HTML Code: <table> ...

Tips for automatically injecting class text in Angular using dependency injection

Is there a method to automatically add a class when the user selects, for example, a list in the text editor? I would like to inject a class into the ul tag before saving it to the database. ...

Display two elements within a single table column by utilizing an array in Vue.js

I have a requirement to display 2 items from an array in one table TD ( column ). Below is the example mock data provided: agendas: [ [ { tag: 'p', class: 'm-agenda__date', value: & ...

Bootstrap offers an improved method for arranging elements in columns and rows, especially when you need to omit certain ones

Is there a more efficient method for aligning elements using Bootstrap? Here is my current approach: <div className="row"> <div className="col-3 font-weight-bold"> Item Name ...

Transforming CSV formatted strings into arrays using AngularJS

I'm trying to figure out a way to convert the string data in $scope.fileContent, which I obtained from my CSV file, into an array. When I print $scope.fileContent, here's what it looks like: console.log($scope.fileContent) = heading1,heading2, ...

AngularJS ng-repeat: displaying a list of filtered outcomes exclusively

I currently have a ng repeat that loops through a set of results. <a class="list-group-item" href="#trip/{{trip.id}}/overview" ng-repeat="trip in trips | filter:search | limitTo:-15"> Basically, as I enter more text into my input field, the list sh ...

Multiple occurrences of trigger events were detected when loading ajax content

In a div I have embedded a paragraph and a button as shown below: <div id="my_div"> <p>This is a paragraph</p> <button class="my_btn">Click here!</a> </div> The content within the div is dynamically loaded via ...

Updating div constantly with onclick using jQuery Ajax

I've been attempting to refresh the content of a div after clicking a button, but it only happens once. I have to refresh the page in order to click the button again and update the content. Since I'm new to AJAX, I need some help resolving this i ...