AWS S3 static website hosting - AniketDani/Amazon-Web-Services GitHub Wiki

Hosting an Angular project as a static website on AWS S3 is a common and efficient way to deploy front-end applications. Here's a step-by-step guide:

✅ Step-by-Step: Hosting Angular on AWS S3

  1. Build Your Angular Project In your Angular project directory, run:

This will generate a dist/ folder with your compiled static files.

  1. Create an S3 Bucket Go to the AWS S3 Console. Click “Create bucket”. Choose a globally unique name (e.g., my-angular-app-prod). Select the appropriate region. Uncheck “Block all public access” (you’ll configure permissions later). Click Create bucket.

  2. Upload Angular Build Files Navigate to your bucket. Click “Upload” → “Add files” and “Add folder”. Upload everything inside the dist// folder.

  3. Enable Static Website Hosting Go to the Properties tab of your bucket. Scroll to Static website hosting. Enable it and set: Index document: index.html Error document: index.html (for Angular routing)

  4. Set Bucket Policy for Public Access Go to the Permissions tab → Bucket Policy, and paste:

Replace your-bucket-name with your actual bucket name.

  1. Access Your Website Go back to Properties → Static website hosting. Copy the Endpoint URL. Open it in your browser — your Angular app should be live!

🚀 Optional Enhancements Use CloudFront for CDN and HTTPS. Add a custom domain via Route 53. Automate deployment using GitHub Actions or AWS CodePipeline.