Skip to main content

Angular Netlify Deployment

Introduction​

Deploying your Angular application to a production environment is a crucial step in the development process. Netlify offers a straightforward, developer-friendly platform that makes deployment simple with features like continuous deployment, custom domains, and HTTPS by default.

In this tutorial, you'll learn how to deploy your Angular application to Netlify, configure the deployment settings, and set up continuous deployment from your Git repository.

What is Netlify?​

Netlify is a modern web hosting and automation platform that specializes in static site hosting and serverless functions. It offers:

  • Continuous deployment directly from Git repositories
  • Global CDN for fast content delivery
  • Automatic HTTPS with Let's Encrypt
  • Form handling, identity management, and serverless functions
  • Branch-based previews for testing changes

Prerequisites​

Before you begin, make sure you have:

  1. An Angular project ready for deployment
  2. A GitHub, GitLab, or Bitbucket account with your project code
  3. A Netlify account (you can sign up for free at netlify.com)

Preparing Your Angular Application for Netlify​

Step 1: Add a Netlify Configuration File​

Create a file named netlify.toml in the root of your Angular project:

toml
[build]
  publish = "dist/your-project-name"
  command = "ng build"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

This configuration tells Netlify:

  • How to build your application (ng build)
  • Where to find the built files (dist/your-project-name)
  • To redirect all routes to index.html, which is necessary for Angular's client-side routing

Step 2: Ensure You Have a Production Build Configuration​

Make sure your angular.json file has a proper production configuration:

json
"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ],
    "optimization": true,
    "outputHashing": "all",
    "sourceMap": false,
    "extractCss": true,
    "namedChunks": false,
    "aot": true,
    "extractLicenses": true,
    "vendorChunk": false,
    "buildOptimizer": true,
    "budgets": [
      {
        "type": "initial",
        "maximumWarning": "2mb",
        "maximumError": "5mb"
      }
    ]
  }
}

Deploying to Netlify​

This method enables continuous deployment - Netlify will automatically rebuild your site whenever you push changes to your repository.

  1. Login to Netlify:

    Go to Netlify and log in with your account.

  2. Create a New Site:

    Click on the "New site from Git" button.

  3. Connect to Your Git Provider:

    Select your Git provider (GitHub, GitLab, or Bitbucket) and authorize Netlify to access your repositories.

  4. Select Your Repository:

    Choose the repository containing your Angular project.

  5. Configure Build Settings:

    Enter the following settings:

    • Build command: ng build --prod (or npm run build if you use npm scripts)
    • Publish directory: dist/your-project-name (replace with your actual project name)

  6. Deploy the Site:

    Click "Deploy site" to start the deployment process.

Method 2: Manual Deployment​

If you prefer to deploy manually or want to test a specific build:

  1. Build Your Angular Application:

    Run the build command locally:

    bash
    ng build --prod

  2. Deploy via Netlify UI:

    • Go to the Netlify dashboard
    • Drag and drop your dist/your-project-name folder onto the designated area
    • Netlify will automatically detect and deploy your site

Method 3: Using Netlify CLI​

You can also use Netlify's command-line interface for deployments:

  1. Install Netlify CLI:

    bash
    npm install -g netlify-cli

  2. Login to Netlify:

    bash
    netlify login

  3. Initialize Netlify in Your Project:

    bash
    netlify init

  4. Deploy to Netlify:

    bash
    netlify deploy

    For production deployment:

    bash
    netlify deploy --prod

Customizing Your Netlify Deployment​

Custom Domain Setup​

  1. In your Netlify dashboard, go to "Site settings" > "Domain management"
  2. Click "Add custom domain"
  3. Follow the instructions to set up DNS records with your domain provider

Environment Variables​

For configuration values that shouldn't be in your code:

  1. Go to "Site settings" > "Build & deploy" > "Environment"
  2. Add your variables (like API keys) that can be accessed via your Angular environment files

Deploy Previews for Pull Requests​

Netlify automatically creates preview deployments for pull requests, allowing you to test changes before merging:

  1. Make sure your repository is connected to Netlify
  2. Create a pull request in your Git repository
  3. Netlify will comment on the PR with a link to the preview

Real-World Example: Deploying an Angular Blog​

Let's walk through deploying a simple Angular blog application to Netlify with continuous deployment from GitHub.

1. Project Structure​

my-angular-blog/
├── src/
│   ├── app/
│   ├── assets/
│   ├── environments/
│   │   ├── environment.ts
│   │   └── environment.prod.ts
│   └── ...
├── angular.json
├── package.json
└── netlify.toml

2. Configure environment.prod.ts for Production Settings​

typescript
export const environment = {
  production: true,
  apiUrl: 'https://api.yourblog.com/v1'
};

3. Set Up netlify.toml​

toml
[build]
  publish = "dist/my-angular-blog"
  command = "ng build --configuration production"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

[context.production.environment]
  ANGULAR_ENV = "production"

[context.deploy-preview.environment]
  ANGULAR_ENV = "staging"

4. Create a Build Script in package.json​

json
"scripts": {
  "start": "ng serve",
  "build": "ng build --configuration production",
  "deploy:netlify": "ng build --configuration production && netlify deploy --prod"
}

5. Connecting to GitHub and Deploying​

  1. Push your code to GitHub
  2. Connect your repository to Netlify as described earlier
  3. Configure build settings:
    • Build command: npm run build
    • Publish directory: dist/my-angular-blog
  4. Deploy the site

6. Set Up Environment Variables​

For our blog API key that shouldn't be in the code:

  1. Go to Site settings > Environment variables
  2. Add a variable: API_KEY with your secret key
  3. Access it in your Angular application through a serverless function

Troubleshooting Common Issues​

1. Routing Issues​

Problem: 404 errors when refreshing pages with Angular routes

Solution: Ensure you have the correct redirect rule in your netlify.toml:

toml
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

2. Build Failures​

Problem: The build fails on Netlify but works locally

Solution:

  • Check Netlify logs for specific errors
  • Verify your Node.js version in a .nvmrc file:
14.17.0

3. Environment Variables Not Working​

Problem: Your application can't access environment variables

Solution:

  • Remember that environment variables are only available during build time
  • Use Netlify functions for secrets that need to be accessed during runtime

Summary​

In this tutorial, you've learned how to deploy an Angular application to Netlify using different methods, including:

  1. Continuous deployment from Git repositories
  2. Manual deployments for quick testing
  3. Using Netlify CLI for more control

You've also learned how to:

  • Configure your Angular application for production deployment
  • Set up environment variables and custom domains
  • Handle common routing issues with single-page applications
  • Create preview deployments for testing changes

Netlify provides an excellent platform for hosting Angular applications with minimal configuration and powerful features like continuous deployment, HTTPS by default, and serverless functions.

Additional Resources​

Exercises​

  1. Deploy a simple Angular application to Netlify using the Git repository method.
  2. Set up a custom domain for your deployed Angular application.
  3. Create a form in your Angular application and configure it to work with Netlify Forms.
  4. Implement a serverless function using Netlify Functions to securely access an API from your Angular application.
  5. Set up branch deployments to have separate development, staging, and production environments.

If you spot any mistakes on this website, please let me know at [email protected]. I’d greatly appreciate your feedback! :)