How Angular calls CORS enabled Netlify Function

Reading Time: 3 minutes

 177 total views,  1 views today

Introduction

In previous post (article), I created a Netlify function to return menu data in JSON format. In this post, I will show how to deploy the Netlify function to production environment and call the endpoint in the Angular Spanish Menu app from Github Page

show me, don't tell me

Enable CORS in Netlify function

Github page and Netlify have different domain names, we must enable CORS in our Netlify function to ensure that it accepts HTTP request from any domain.

First, we modify netlify.toml to add HTTP header, Access-Control-Allow-Origin to specify allowed origins.

[[headers]]
  # Define which paths this specific [[headers]] block will cover.
  for = "/*"
  [headers.values]
    Access-Control-Allow-Origin = "*"

Deploy Netlify function to production

Second, we will deploy the function to production site such that our Angular app can access it in Github page.

  1. Login Netlify site
  2. Choose the site, navigate to Deploys menu and click Trigger deploy button to deploy the function manually
deploy netlify function to production

Update Angular environment variable

Third, we will update menuUrl variable in environment.prod.ts to point to the function at netlify.app.

export const environment = {
  production: true,
  menuUrl: 'https://<site name>.netlify.app/.netlify/functions/menu',
}

Deploy Angular to Github page

Next, we deploy our Angular app to Github page to verify integration with Netlify function actually works.

  • Install angular-cli-ghpages.
ng add angular-cli-ghpages
  • Add ng deploy configuration in angular.json
"deploy": {
   "builder": "angular-cli-ghpages:deploy",
   "options": {
       "baseHref": "https://railsstudent.github.io/ng-spanish-menu/",
       "name": "<user name>",
       "email": "<user email>",
       "message": "<github commit message>",
       "repo": "https://github.com/railsstudent/ng-spanish-menu.git",
       "noSilent": true
   }
}
  • Simplify deployment of our app by auhoring a new npm script
"github-page-deploy": "ng deploy"

npm run github-page-deploy deploys our app to Github page on our behalf

Finally, we can browse our application to verify integration with the production Netlify function.

amost there

Verify integration

Browse https://railsstudent.github.io/ng-spanish-menu/food

browser angular app in github page

Open Network tab to verify that our application calls menu function successfully. It is made possible because the value of access-control-allow-origin response header is “*”.

result of http response

The result of the HTTP response is a valid JSON object containing our food menu.

Conclusion

We made few configuration changes and our Angular application can load data from the Netlify function.

This is the end of the post and I hope you find this article useful and consider to use serverless function to prototype Angular application.

Good bye!

we made it to the end of the blog post

Resources:

  1. Repo: https://github.com/railsstudent/ng-spanish-menu
  2. Github Page: https://railsstudent.github.io/ng-spanish-menu/food
  3. Access-Control-Allow-Origin Policy – https://answers.netlify.com/t/access-control-allow-origin-policy/1813/6
  4. https://www.netlify.com/blog/2021/01/25/getting-started-with-netlify-functions-for-angular/

Use github action to deploy vue app to github page

Reading Time: < 1 minutes

 152 total views

  • Generate a personal access token and create ACCESS_TOKEN variable under Settings -> Secrets.
  • Keep the personal access token in a safe place and do not lose it
  • Go to Actions tab of the github repo
  • Create main.yml under .github/workflow
 name: Deploy to github pages
 on:
   push:
    branches:
     - master
 jobs:
    build:
      name: Deploying to gh-pages
      runs-on: ubuntu-latest
      steps:
        - name: Setup Node.js for use with actions
          uses: actions/setup-node@v1.1.0
          with:
            version:  12.x
        - name: Checkout branch
          uses: actions/checkout@v2

        - name: Clean install dependencies
          run: npm ci

        - name: Build app
          run: npm run build
        
        - name: deploy
          uses: peaceiris/actions-gh-pages@v3
          with:
           github_token: ${{ secrets.ACCESS_TOKEN }}
           publish_dir: ./dist

There is no need to write custom deployment script and travis configuration file to automate the CI/CD process. Github does it for you when latest changes are pushed to master to start the build process and copy the contents of output folder to gh-pages branch.

References:

Use Github Action to deploy Angular app to github page

Reading Time: < 1 minutes

 136 total views

  • Generate a personal access token and create ACCESS_TOKEN variable in Settings -> Secrets.
  • Keep the personal access token in a safe place and do not lose it
  • Go to Actions tab of the github repo
  • Create main.yml under .github/workflow
name: CI
on:
  push:
    branches:
      - master
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2
        with:
          persist-credentials: false

      - name: Install
        run: |
          npm install
          npm run github-page-deploy
      - name: Build and Deploy Repo
        uses: JamesIves/github-pages-deploy-action@releases/v3
        with:
          ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
          BASE_BRANCH: master
          BRANCH: gh-pages
          CLEAN: true
          GIT_CONFIG_NAME: <author name>
          GIT_CONFIG_EMAIL: <email address>
          FOLDER: dist/<repo name>

References: