Frontent Deployment

Setup Instructions

1. Build Your Angular Application

Before deploying to Netlify, you need to build your Angular project:

1. Open your terminal in the Angular project directory.

2. Run the following command to generate the production-ready files:

   ng build --configuration=production

   This will generate a `dist` folder with optimized static files. By default, the output will be in `dist/your-project-name`.

---

2. Deploy to Netlify

2.1. Upload Your Build Files

1. Go to Netlify and sign in or create an account.
2. Click Add new site → Deploy manually.
3. Drag and drop the contents of the `dist/your-project-name/browser` folder into the upload area.
4. Netlify will upload and deploy your files, providing you with a temporary Netlify URL (e.g., `your-site.netlify.app`).

---

2.2. Deploy with GitHub (Optional)

If you prefer to connect your repository:

1. Push your Angular project to a GitHub repository.
2. In Netlify, select Add new site → Import from Git.
3. Connect your GitHub account and select your repository.
4. Set the build settings:
   • Build Command: `ng build --configuration=production`
   • Publish Directory: `dist/your-project-name`
5. Click Deploy. Netlify will handle the build and deployment automatically.

---

3. Add a Custom Domain from Hostinger

3.1. Add Your Domain in Netlify

1. Go to your Netlify project → Domain settings → Custom domains.
2. Click Add custom domain.
3. Enter your domain name (e.g., `yourdomain.com`).
4. Netlify will provide DNS configuration details.

---

3.2. Configure DNS in Hostinger

1. Log in to your Hostinger account.

2. Go to Domains → DNS Zone.

   Option 1: Use ALIAS Record (Recommended)

   • Type: ALIAS / ANAME
   • Host: `@`
   • Value: `apex-loadbalancer.netlify.com`

   Option 2: Use A Record (Fallback)

   • Type: A
   • Host: `@`
   • Value: `75.2.60.5`

3. Add a CNAME record for `www` (optional for subdomain):

   • Type: CNAME
   • Host: `www`
   • Value: `your-site.netlify.app` (replace with your Netlify site URL).

4. Save the changes.

---

3.3. Verify DNS Configuration

1. Go back to Netlify → Domain settings.
2. Click Verify DNS Configuration.
3. DNS propagation may take up to 24 hours. Use DNS Checker to confirm that records are updated globally.

---

4. Set Primary Domain

Once Netlify verifies the DNS:

1. In Domain settings, set `www.yourdomain.com` or `yourdomain.com` as the Primary domain.
2. Netlify will automatically create redirects to your primary domain.

---

5. Enable HTTPS (SSL)

Netlify automatically provides free SSL certificates via Let’s Encrypt:

1. Go to Domain settings → HTTPS.
2. Click Verify to enable the SSL certificate.

Your site will now be accessible securely via `https://yourdomain.com\`.

---

🎉 Congratulations!

Your Angular application is now live on Netlify, with a custom domain from Hostinger. Share your website and start building! 🚀

---

Troubleshooting Tips

• DNS Issues: Ensure DNS records match Netlify’s instructions and allow time for propagation.
• Angular Routing: If you use Angular Router, add a `_redirects` file in your build output folder with the following content:
  ```
  /* /index.html 200
  ```
  This ensures proper routing on Netlify.