https://blog.lonfo.fr/categories/angular/Recent content in Angular on Lonfo BlogHugoen-USSat, 17 Jan 2026 09:42:26 +0100https://blog.lonfo.fr/posts/angular-deployment-on-aws-the-ultimate-s3--cloudfront-guide-with-cdk/Sat, 17 Jan 2026 09:42:26 +0100https://blog.lonfo.fr/posts/angular-deployment-on-aws-the-ultimate-s3--cloudfront-guide-with-cdk/<h1 id="angular-deployment-on-aws-the-ultimate-s3--cloudfront-guide-with-cdk">Angular Deployment on AWS: The Ultimate S3 + CloudFront Guide with CDK</h1> <p>Deploying an Angular Single Page Application (SPA) on AWS doesn&rsquo;t have to be complicated. Forget manual console configuration; we are going to build a Serverless infrastructure, secured by OAC and optimized by CloudFront, all without depending on Route 53.</p> <div class="alert alert-warning my-6 overflow-hidden rounded-lg border-l-4 transition-all duration-200 ease-out hover:-translate-y-0.5 hover:shadow-md" style="background-color: color-mix(in srgb, var(--color-warning) 10%, transparent); border-left-color: var(--color-warning); --hover-bg: color-mix(in srgb, var(--color-warning) 15%, transparent);" onmouseover="this.style.backgroundColor = this.style.getPropertyValue('--hover-bg')" onmouseout="this.style.backgroundColor = 'color-mix(in srgb, var(--color-warning) 10%, transparent)'" role="alert" aria-labelledby="alert-0-title"> <div class=" cursor-pointer flex items-center justify-between p-4" onclick="toggleAlert('alert-0')" role="button" tabindex="0" aria-expanded="true" aria-controls="alert-0-content" onkeydown="if(event.key==='Enter'||event.key===' '){toggleAlert('alert-0');event.preventDefault();}" > <div class="flex items-center gap-3"> <div class="flex-shrink-0" style="color: var(--color-warning);"> <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.732-.833-2.464 0L4.34 16.5c-.77.833.192 2.5 1.732 2.5z" /> </svg> </div> <h4 id="alert-0-title" class="m-0 font-semibold" style="color: var(--color-warning);"> Tutorial Objectives </h4> </div> <div class="flex-shrink-0 transition-transform duration-200" style="color: var(--color-warning);" id="alert-0-chevron"> <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> </svg> </div> </div> <div id="alert-0-content" class="alert-content px-4 pb-4"> <div class="prose prose-sm text-foreground/90 max-w-none"> <ol> <li>Organize a global project structure (Frontend + Infra).</li> <li>Create a private S3 bucket for storage.</li> <li>CConfigure CloudFront for HTTPS and Angular routing.</li> <li>Deploy everything with a single command.</li> </ol> </div> </div> </div> <script> function toggleAlert(alertId) { const content = document.getElementById(alertId + "-content"); const chevron = document.getElementById(alertId + "-chevron"); const header = content.previousElementSibling; if (content.classList.contains("hidden")) { content.classList.remove("hidden"); chevron.style.transform = "rotate(180deg)"; header.setAttribute("aria-expanded", "true"); } else { content.classList.add("hidden"); chevron.style.transform = "rotate(0deg)"; header.setAttribute("aria-expanded", "false"); } } </script> <h2 id="prerequisites">Prerequisites</h2> <p>Before starting, you will need:</p>