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

Integration of AngularJS with PHP for Seamless User Authentication

As a newcomer to angularjs, I find the Login Process a bit confusing. Every time I log in, I'm automatically redirected to a specific page that is already set in the code. I just want a simple check to see if the user is logged in. If they are, then ...

phpangularjslogin-control

Node.js - Error: JSON.Parse and JSON.Stringify are not recognized as functions

Is it possible to convert a string to JSON and vice versa without any additional npm packages? I am currently using JSON.Stringfy in my router.js file. Are there any specific npm modules that need to be added to the project in order to use the JSON.Stringf ...

javascriptjsonnode.jsexpressnpm

Break down the key:value objects into individual arrays

I'm currently working on an ionic project that involves handling an incoming array composed of key:value objects such as the one shown in the image below: https://i.stack.imgur.com/qrZiM.png My question is, can these values be separated into three d ...

angularjsangularionic-framework

Meta tag information from Next.js not displaying properly on social media posts

After implementing meta tags using Next.js's built-in Head component, I encountered an issue where the meta tag details were not showing when sharing my link on Facebook. Below is the code snippet I used: I included the following meta tags in my inde ...

javascriptreactjsnext.jsmeta-tags

What is the process for verifying a Bootstrap form?

I have created a form using Bootstrap (Form component in ReactJS), but when I attempt to click on the submit button without entering any input, the form is still submitted. How can I implement form validation so that it only submits when all input fields a ...

javascripttwitter-bootstrapreactjs

When clearInterval is used to stop a setInterval, it will not automatically restart if reset with setInterval

I am facing an issue with a countdown timer that I have created using setInterval in JavaScript. The timer is supposed to countdown from one minute at one second intervals. However, when I click the "start" button, it starts the countdown but if I click an ...

javascriptjquery

Sleek descending motion effect

I have created a simple function, but it is not animating smoothly and seems to lag... I am using it for a div sized at 1600x700 pixels on page load $(document).ready(function(){ $('#slider').slideDown(500); }); Is there any way to ensure s ...

javascriptjquery

I encounter an error message stating "Cannot read property 'push' of undefined" when trying to add an item to a property within an interface

I have a model defined like this : export interface AddAlbumeModel { name: string; gener: string; signer: string; albumeProfile:any; albumPoster:any; tracks:TrackMode[]; } export interface TrackMode { trackNumber: number; ...

javascriptangulartypescript

Is it possible to rearrange the node_modules directory?

Within the node_modules directory, there exists a large and extensive collection of modules. These modules are often duplicated in various sub-folders throughout the directory, with some containing identical versions while others differ by minor versions. ...

javascriptnode.jsnpm

Arranging elements using the ng-repeat directive in AngularJS

My question pertains to an array I am working with: $scope.answers=["","","",""] This array contains several empty elements. <li ng-repeat="item in answers "><input type="text" ng-model="item"/></li> When running this code, an error i ...

javascriptangularjssortingangular-uiangular-ui-bootstrap

Having trouble retrieving the value from the input field with Angular.js

I am having trouble retrieving the value from an input field using Angular.js. Below is the code explanation. Here is my controller code: $scope.shipping=0; $scope.addProductInfoData=function(billdata){ console.log('valid',$scope.shippi ...

javascriptangularjs

Is there a way to use JavaScript to modify the position of a div element

Can we adjust the div position using CSS (absolute or relative) with JavaScript? Here's an example code snippet: <div id="podpis" style="margin-top: 2rem;"> <div class="invoice-signature"> <span><?=$xml->sanitiz ...

javascript

Exploring React and finding the way to a specific item

I have a list of users displayed in a table. When a user clicks on a row, I want to navigate to a different component to show the details. <tbody> {this.state.clients.map(client => ( <tr className="tableRow" onClick={() => this. ...

javascriptreactjs

Arranging array elements by both date and alphabetical order using Javascript

Is there a way to sort the data by both date and alphabet at the same time? Alphabetical order seems fine, but the date sorting isn't working correctly. Thank you for any solutions. Data structure : [{ productId: 21, title: "Huawei P40 L ...

javascriptarrayssortingdatealphabetical

I am attempting to swap values within table cells using AngularJS. Would it be recommended to utilize ngBind or ngModel, or is there another approach that would

How can I make a table cell clickable in AngularJS to switch the contents from one cell to another, creating a basic chess game? I want to use angular.element to access the clicked elements and set the second clicked square equal to the first clicked using ...

javascripthtmlangularjs

Encountered an error with rootscope:infdig when utilizing ng repeat loop

I have been working on this issue for a while now but I can't seem to find a solution. Within an ng-repeat loop, I am calling a function parseBug. This function is supposed to modify two fields and convert them into an array. However, I encountered a ...

angularjs

clear JavaScript array of elements

I've been grappling with this issue for hours now, and it seemed so straightforward at first; My goal with JavaScript is to iterate through an array, retrieve the current index value, and then remove that value from the array. I've read that spl ...

javascriptunsetsplice

Unlimited scrolling gallery with multiple rows

I am looking for a way to create a multi-row infinite loop scrolling gallery using html, css, and javascript. Can anyone help me with this? ...

javascriptjqueryhtmlgalleryinfinite

Tips for modifying the max length value in Angular

I'm just starting out with Angular and I'm trying to alter the maxlength property from 300 to 140 upon clicking a button. The buttons are generated using ng-repeat and only the first one should change the value to 140, while the others should rem ...

angularjsmaxlength

How is it possible that this event listener is able to capture an event that was already sent before it was

I am facing an issue with my Vue JS code. When I click on the account <a> tag, it triggers the toggle method. The toggle method adds an event listener to the document. However, as soon as the toggle method is executed, the event listener fires and ...

javascriptvue.js