Angular application parametrization

My application consists of an Angular front-end, an app layer, and a DB layer. The architecture can be seen in this image.

To serve the JS front-end bits to the client and proxy requests from the client to the app layer, I am using an nginx instance. If I deploy this nginx on a cloud VM with IP 18.1.1.1, I can point my browser to that IP, allowing the client to download the JS code. The JS code is configured to set the app server ip/fqdn to the same ip/fqdn as the one used for downloading the UI. The nginx proxy configuration then forwards all /api requests made by the JS code to a specific FQDN, which is currently set to 'http://yelb-appserver:4567/api' due to deploying these components as containers.

Now, I want to explore additional deployment methods. Specifically, I aim to host the Angular bits on an S3 bucket or another web server, and have the JS point directly to different endpoints such as an API GW, a separate EC2 instance, or a cloud load balancer. This means I cannot use the current configuration where the app server environment is based on window.location.host.

I am looking to create a dynamic and repeatable deployment workflow, possibly using cloud formation. I am exploring if it's possible to work with a single compiled JavaScript artifact that can parametrize the Angular code to point to the /api endpoint created at deployment time, instead of manually customizing and rebuilding the Angular app for each deployment.

Thank you.

javascriptangulartypescript

Answer №1

Utilize environment variables stored in a configuration file (such as "environment.prod.ts") that can be passed to a node process while running your build. Your Angular JavaScript code can then access these variables, such as using process.env.API_ENDPOINT for defining API endpoints. To set these variables, you can simply do something like 

API_ENDPOINT='/api' npm run build
, or for a more advanced approach, consider using Docker.

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

Is it possible to execute a function upon exiting my Node application?

Currently, I'm developing a project for my school using Node.js on a Raspberry Pi. The script I have created will be running for extended periods of time to control LEDs. Is there a method that allows me to execute a function upon exiting the program ...

javascriptnode.jsraspberry-pi

Utilize existing *.resx translation files within a hybrid application combining AngularJS and Angular 5

Greetings! I currently have an AngularJS application that utilizes $translateProvider for internalization and WebResources.resx files: angular.module('app') .config(['$translateProvider', 'sysSettings', 'ngDialogProv ...

angularjsangularinternationalizationangular-i18nangular-hybrid

What is the sequence in which middleware and callback functions are executed in Node.js?

I'm just starting out with node.js, and I have a file called app.js that references another file named xmlParser.js. The purpose of this is to parse an input xml file using the xml2js node module. Here's a snippet from app.js: //Require modules ...

javascriptjsonnode.jsexpress

Are mutations in Vuex guaranteed to be atomic?

I'm currently investigating the atomicity of mutations in Vuex. The code snippet I'm reviewing has me questioning whether the CHANGE_A mutation could potentially be triggered while CHANGE_B is still in progress: const mutations = { [CHANGE_A]( ...

javascriptvue.jsvuexmutationvuex-modules

Designing templates for websites and applications using node.js

Simplified Question: As I delve into improving my skills with node.js, I'm exploring the concept of templating. How would using node to serve one HTML file and loading page-specific information through AJAX/sockets impact performance and design princ ...

javascripthtmlmodel-view-controllernode.js

Modifying the name of a key in ng-multiselect-dropdown

this is the example data I am working with id: 5 isAchievementEnabled: false isTargetFormEnabled: true name: "NFSM - Pulse" odiyaName: "Pulse or" when using ng-multiselect-dropdown, it currently displays the "name" key. However, I want ...

angulartypescriptangular8

Trouble with Angular 7: Form field not displaying touched status

I am encountering an issue while trying to input data into a form, as it is not registering the touched status. Consequently, an error always occurs when attempting to send a message back to the user. In my TypeScript file, I am utilizing FormBuilder to c ...

htmlangulartypescripterror-handlingruntime-error

The method piSession.buildPageInteractionSession is not valid

Hey there! I am facing an issue with a simple AJAX call to a PHP file. The request should be sent to the server and return back in an HTML input field. Unfortunately, I have not been able to resolve this error so far. Below is the code snippet: HTML: ...

javascriptphpajaxapiserver

Tips for retrieving items from <ng-template>:

When the loader is set to false, I am trying to access an element by ID that is located inside the <ng-template>. In the subscribe function, after the loader changes to false and my content is rendered, I attempt to access the 'gif-html' el ...

javascriptangulartypescript

When attempting to incorporate a video using Sencha, an error occurs stating that the resource is being interpreted as an image but is being

While attempting to incorporate a sample into Sencha, I encountered an error stating "Resource interpreted as Image but transferred with MIME type text/css". Ext.define('MyApp.view.Newpage', { extend: 'Ext.Video', xtype: ' ...

javascripthtmlextjs

Print out the data on the webpage that was sent via AJAX

I am currently working on a project where I need to create a web page that takes a number as input and searches for its corresponding name in the database. The challenge is to display the name on the page without reloading it. However, the problem is tha ...

javascriptphpjqueryajax

Encountered an issue when attempting to utilize `npm start` within a React JS project following

https://i.stack.imgur.com/yII3C.png Whenever I attempt to run npm start in the vsCode terminal, an error pops up as shown in the image above. In the picture provided, you can see that my package.json only contains a start script. Can anyone offer assistan ...

javascriptnode.jsreactjsnpmnpm-start

Encountering the error message "Unable to access properties of null (specifically 'useState')" while trying to utilize a component from my custom library

After developing a personalized UI library and style guide to standardize components in my application, all was running smoothly until I incorporated a component utilizing the useState hook. An error consistently surfaces whenever I attempt to use a compo ...

reactjstypescriptnext.jsrollupjs

A guide to implementing infinite scrolling with vue-infinite-loading in Nuxt.js (Vue.js)

Currently, I am working on developing a web application using Nuxt.js (Vue.js). Initially, to set up the project, I used the command: vue init nuxt/express MyProject ~page/help.vue <template> <div> <p v-for="item in list"> ...

javascriptnode.jsvue.jsnuxt.jsserver-side-rendering

MUI - Material-table/core - Checkbox selection malfunctioning on click event

UPDATE : The matter also pertains to Material Ui's Data table. I attempted to replicate the issue using the provided example in the documentation but encountered the same problem. I have been struggling with an issue related to the selection feature ...

javascriptreactjsmaterial-uimaterial-table

Swap out the old nested array for a fresh array

Currently, I am dealing with an array nested inside another array. The structure looks like this: Structure: First Array [ { Second Array [ { } ] } ] I am attempting to replace all instances of Second Array with a new array that I have cr ...

javascriptvue.jsvuejs2

Tips for displaying the response next to the corresponding table data (td) cell

When I click the fourth button, the response is showing on the first td. I want to show the response next to the respective td. Below is my code, can someone help me? Thanks. (i.e., here I am getting the $status using a query, but I want this status to di ...

javascriptphpjqueryajax

What is the best way to insert an HTML attribute into a dynamically generated build script within Angular?

After running the ng build --prod command, Angular creates 4 scripts. One of these is called main.js. I am wondering if there is a way to dynamically add an HTML attribute to this script tag in the index.html file once the build process is complete. I nee ...

javascriptangular

Version 4 of Typescript is experiencing crashes when spreading optional arguments

Previously with TypeScript 3.9+, this setup was functioning perfectly: type keys = | 'one' | 'another' | 'yet_another'; type variables = { 'another': { count: number } 'yet_another': { ...

typescript

Updating information dynamically in a controller based on an ng-repeat from a different controller in AngularJS

To enhance comprehension, I've created a straightforward example. For this scenario, ng-repeat is used to call a template that has its own controller. However, the controller of the template requires injected data from a service for each ng-repeat it ...

javascriptangularjscontrollerangularjs-ng-repeat