Embarking on the journey of launching an Angular application on AWS CloudFront

I have a Laravel PHP application that functions as an API accessed by an Angular single-page app. Currently, the Angular app is situated within the public folder, but I aim to separate it so I can deploy it through Amazon CloudFront.

I came across this article on hosting static websites on CloudFront, which covers the basics. However, I haven't found any information regarding accessing an API using a CDN-served site.

I want to maintain three distinct environments - development, staging, and production - each with its own Elastic Beanstalk instances and databases. Ideally, the addresses for these would be dev.blah.com, staging.blah.com, and blah.com respectively, ensuring that each version of the Angular app interfaces correctly with the backend systems.

Is there a way to deploy the Angular app similar to how I deploy to Elastic Beanstalk, such as using "git push" commands?

Can I configure the environment so that I don't have to manually update the API endpoints in the Angular app for each environment? For example, will the dev version automatically access dev.blah.com/get/user/1, while the staging version accesses staging.blah.com/get/user/1? Do I need to take specific steps to enable this functionality, or will it happen seamlessly?

Are all of these goals achievable? I'm not looking for detailed instructions, just a general overview of the process and some guidance on where I can learn more about implementing these solutions independently since my initial searches haven't yielded much information.

javascriptangularjsamazon-web-servicesamazon-elastic-beanstalkamazon-cloudfront

Answer №1

When configuring CloudFront, make sure to utilize the "behaviors" tab in your distribution settings to assign specific paths to each origin. For instance, you may opt to redirect /* requests to an S3 bucket containing static resources while directing /api/* requests to your API backend.

In terms of managing dev/staging/prod environments, it's advisable to set up separate distributions for each environment. These distributions can either share the same origins or have different ones assigned.

For more insights on leveraging CloudFront for whole site delivery, check out "Whole Site Delivery with CloudFront"

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

I am unable to achieve negative X degree rotation of the image while using mousemove to rotate it

I need assistance with moving a picture in 3D. I want the offsetX of the mouse to be positive when it's past half of the picture, and negative otherwise. How can I achieve this effect for rotation degrees? This is what I have tried: $('#img ...

javascriptjquery

Check if any element from the first array exists in any nested array of the second array and return a Boolean

Having two distinct types of arrays, firstArrayObject = [{name: "sample", number: 23}, {name: "sample2", number: 25}]. The second object takes the form of secondObject = {someAttribute: bla, numbers: [23, 26, 27, 28} My goal is to det ...

javascriptsearchecmascript-6filter

Struggling to iterate through the response.data as intended

Assume that the response.data I have is: { "data": { "person1": [ { "name": .... "age": xx } ], "person2": [ { ...

javascriptarraysapivue.js

Do global variables in a node.js server apply across the entire server or exclusively to individual sessions or users?

I have a question that may seem basic, so I apologize in advance - are global variables in node.js applicable server-wide or is their scope limited to the session or user? For example, if I create a global boolean variable in a routes.js file to track whet ...

javascriptnode.jsexpress

The Angular Material dialog fails to display content when triggered within an event listener in Google Maps

Within my project, I am utilizing Angular 6.0.6 and Angular Material 6.3.0. One issue I have encountered is with a dialog component that I have added to the entryComponents in the app module. Strangely, when I attempt to open this dialog within the rightcl ...

javascriptangulargoogle-mapsdialogangular-material

When transitioning between views in Angular App, it freezes due to the large data response from an HTTP request

I am encountering an issue with my Angular 9.1.11 application where it freezes after navigating from one page to another (which belongs to a different module with lazy loading). Here is the scenario: There is an action button called View Report that re ...

javascriptangularangular-router

Editable content <div>: Cursor position begins prior to the placeholder

Having an issue with a contenteditable div where the placeholder text starts behind the cursor instead of at the cursor position. Any suggestions on how to correct this? <div id="input_box" contenteditable="true" autofocus="autofocus" autocomplete="o ...

javascripthtmlcss

Retrieve error message from 400 error in AngularJS and WebAPI

Why am I having trouble reading the error message in AngularJS from this code snippet? ModelState.AddModelError("field", "error"); return BadRequest(ModelState); Alternatively, return BadRequest("error message"); return Content(System.Net.HttpStatusCod ...

javascriptangularjsasp.net-web-api

Utilizing Vuetify 2 skeleton-loader to customize loading states through Vuex store manipulation

Utilizing the Vuetify v-skeleton-loader component to wrap a v-data-table component. The server-side pagination and sorting in the data-table component are set up. To enable server-side pagination, the documentation recommends monitoring the options objec ...

javascriptvue.jsvuejs2vuexvuetify.js

What is the best way to explain the concept of type indexing in TypeScript using its own keys?

I'm still learning TypeScript, so please bear with me if my question sounds basic. Is there a way to specify the index for this type so that it utilizes its own keys rather than just being an object? export type TypeAbCreationModal = { [index: stri ...

javascripttypescript

Retrieve only the items from a JavaScript array where the index is below a specified value

My goal is to filter out all the items from the initialItems list that have an index lower than the current item. For example, if the current item is CM, I want to display QS, IT, and AB in a draggable dropdown menu. However, I'm unsure of how to prop ...

javascriptreactjsantd

Applying CSS to select a different element style within a webpage

I was thinking about the possibility of linking one style to another using events like :focus or :hover in CSS alone, without the need for JavaScript. For instance, can the class "hitArea" change the background attribute of "changeArea" when it is in foc ...

javascriptcsshtmlweb-applicationsanimation

Visual Studio Code unable to locate source maps for typescript debugging

Looking for some help debugging a basic Hello World TypeScript file. Whenever I try to set a breakpoint, it seems like VS Code is having trouble locating the source map, even though it's saved in the same directory. I'm using Chrome as my browser ...

javascripttypescriptvisual-studio-code

How come jQuery is retaining the original DOM element classes even after I have modified them using jQuery?

Here is the code snippet I am working on: $(".drop-down-arrow-open i").click(function(){ console.log("The click function for .drop-down-arrow-open is triggered even when it is closed"); let thisParent = $(this).closest(".projects-container").find(".need ...

javascriptjqueryhtml

Sanity.io's selection of schema field types for efficient and convenient

Hey there, guys! I recently started using Sanity.io and I'm curious whether there's a way to enhance my code efficiency and reuse certain fields across different schemas. I had an idea that goes something like this: cars.ts: export default { ...

javascripttypescriptsanity

Issue with AngularJS 1.6.x: Unable to access property 'entry' as it is undefined

Check out my Plunker demo here After updating Angular from version 1.3.x to 1.6.x, I'm getting an error that says read property 'entry' of undefined I've attempted to define 'entry' as var entry = {}; and also tried using de ...

angularjs

Steps for Filling a List Box (combo box) with Data from a Multi-Dimensional Array

As a student learning JavaScript, I have an assignment due tonight and am facing challenges with populating a List Box (combo box) from a Multi-Dimensional Array. After working on the code multiple times, I managed to create a multi-dimensional array that ...

javascriptarrays

Using HTML5 Canvas to draw intersecting polygons

Recently, I came across a polygon drawing function that caught my attention: Polygon.prototype.draw = function(ctx) { ctx.save(); ctx.beginPath(); var v = this.vertices[0] ctx.moveTo(this.position.x + v.x, this.position.y + v.y); var i ...

javascripthtmlcanvasdrawingrendering

Resetting ajax success message when modal is closed

Currently utilizing w3.css and its modal feature, I am encountering an issue with clearing the message displayed after a successful ajax call once the window is closed. Even though I have implemented code to clear the message upon closing the window (by cl ...

javascriptjqueryajax

Styling the content within Template Strings is not supported by VSCode

Recently, I've noticed that there are two scenarios in which my VSCode doesn't properly style the content within my template strings. One is when I'm writing CSS in a JavaScript file, and the other is when I'm fetching data from GraphQL ...

javascriptcssreactjsvisual-studio-codegraphql