--- title: "Using the Angular Builder for Netlify | Netlify" description: "Realize the speed, agility and performance of a scalable, composable web architecture with Netlify. Explore the composable web platform now!" source: "https://www.netlify.com/blog/2019/09/17/using-the-angular-builder-for-netlify/" last_updated: "2026-07-11T00:00:00.000Z" --- I was stoked to try out the [`netlify-builder`](https://github.com/ngx-builders/netlify-builder) built for the Angular CLI by [Santosh Yadav](https://www.santoshyadav.dev). It’s _super_ easy to use. One thing I was hesitant 😬 about was putting my personal access token in the public `angular.json` file. Instead I made a script to deploy any project by passing in my token as an environment variable. Come code with me 🤗. ## First step: add the builder 🛠 To use the the builder we first want to add it to our Angular project with the handy `ng add` command. The [`ng add`](https://angular.io/cli/add) command from the Angular CLI will configure your project to use a published npm package library based on that library’s schematic. _code to run in the command line:_ `ng add @netlify-builder/deploy` Running this command will walk us through setting up the builder. It first asks for the project API ID or Site ID of your Netlify project. We can find this by going to the project page clicking ‘Settings’ in the top menu, then ‘Site Settings’ under the ‘General’ menu tab ([https://app.netlify.com/sites/{your](https://app.netlify.com/sites/%7Byour) site name}/settings/general#site-information) ![guide to find the site id in the settings page](/v3/img/blog/app-id.png "site id") The next step in the builder setup asks for our Personal Access Token but we don’t want to put that in a public file. If we do add it in this setup the builder adds that information to the `angular.json` file. ![an example of the angular.json deploy setting](/v3/img/blog/deploy-angular-json.png "deploy settings") We want to avoid ☠️having that sensitive information in a public file that anyone can see. Luckily, the way Santosh set up the builder we don’t have to add the Token here, [instead it will check for an environment variable](https://github.com/ngx-builders/netlify-builder/blob/master/command-builder/deploy/index.ts#L33). So, we just hit enter to skip that part. ## Second || Final Step: setting the Token 🗝 variable We want to set the token by using a `process.env` global variable. To find your Netlify Token just head to [your application’s token generating page](https://app.netlify.com/user/applications/personal) or click on your avatar, the ‘User Settings’ option, click ‘Applications’ in the left menu, then click the ‘New access token’ button under ‘Personal access tokens’. We can type anything that is a good reference for you as the description of your token and click the ‘Generate’ button. ![finding your token through the Netlify UI](/v3/img/blog/token.png "netlify access token") > NOTE: Make sure you copy the newly created token once it’s generated. You can’t view it again after you leave that page. You can always create a new one though 😎👍. Normally, we would just need to write the command `ng deploy`. With this environment variable we now write: _code to run in the command line:_ `NETLIFY_TOKEN= ng deploy` > ‼️ UPDATE: Since writing this post and creating these videos the Angular CLI team released a minor update that changes the deploy command from `ng run :deploy` to, simply, `ng deploy`. If you see this old command syntax in the video just know that the Angular CLI team has just saved you all those keystrokes 😍. ## 🌈 Way Cooler Last Step 🧜‍ Why type all that when we can make a shell command. In our `.bashrc` file we make a function of any name, in this case we’ll call it `netliLove`. In this function we can set the `NETLIFY_TOKEN` environment variable to the access token we copied earlier. We can use this token for every product so we will hardcode it here. _code to add to `~/.bashrc`:_ ``` netliLove() { NETLIFY_TOKEN= ng deploy} ``` Here’s what we’ve accomplished in this post: - added [`netlify-builder`](https://www.npmjs.com/package/@netlify-builder/deploy) to our Angular application - used it to deploy our application with an environment variable instead of adding our token to a public file - made a totally rad bash script that stores our token to be used with any project and saves us keystrokes You should be proud of yourself. I’m proud of you. Go you! ## No 🙅🏻‍ More Steps That’s it! Whichever way you decide to use the builder, I hope you had a fun time setting it up. At least, I hope you found it to be a painless process. I really appreciate Santosh putting the work into creating this builder AND making it [open source](https://github.com/ngx-builders/netlify-builder). If you’d like to contribute or check out the code you can find it [here on GitHub](https://github.com/ngx-builders/netlify-builder/) and you can learn more about Santosh [on his website](https://www.santoshyadav.dev/). Not ready for the coding fun to end? Check out these other resources: - Dive into our [docs](https://docs.netlify.com/)! - Add [Fauna DB](https://www.netlify.com/blog/2019/09/10/announcing-the-faunadb-add-on-for-netlify/) to your project. Happy coding, everyone! ### Share - [X (fka Twitter)](https://twitter.com/intent/tweet?text=Using the Angular Builder for Netlify&url=https://www.netlify.com/blog/2019/09/17/using-the-angular-builder-for-netlify//) - [LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.netlify.com%2Fblog%2F2019%2F09%2F17%2Fusing-the-angular-builder-for-netlify%2F%2F) - [Facebook](https://www.facebook.com/sharer.php?u=https://www.netlify.com/blog/2019/09/17/using-the-angular-builder-for-netlify//) - [Bluesky](https://bsky.app/intent/compose?text=Using the Angular Builder for Netlify+https://www.netlify.com/blog/2019/09/17/using-the-angular-builder-for-netlify//) * * * ### Tags - [Angular](/blog/tags/angular/) ## Keep reading ![](/_astro/3f45eb6eda4ea8814be310e3df4a7883a5bd9ba0-1200x675_ZcBDUS.webp) Guides & Tutorials May 15, 2026 [ ### How to build a real-time AI chatbot in minutes with Netlify Agent Runners (no backend) ](/blog/how-to-build-a-real-time-ai-chatbot-in-minutes-with-netlify-agent-runners-no-backend) - ![Profile picture of Nahrin Jalal](/_astro/f0e7c8f227a03fe58340c99ef5439d5a896c0733-272x272_Z23kDpD.webp) Nahrin Jalal ![](/_astro/8fe9e8a23f944c9912003233d99a2df7fee637cf-1600x900_Z1gMhmf.webp) Guides & Tutorials May 15, 2026 [ ### Tracking AI search traffic: how to use Netlify Log Drains to maximize AEO ](/blog/tracking-ai-search-traffic) - ![Profile picture of Nahrin Jalal](/_astro/f0e7c8f227a03fe58340c99ef5439d5a896c0733-272x272_Z23kDpD.webp) Nahrin Jalal ## Recent posts News & Announcements June 25, 2026 [ ### Netlify Functions, designed for Agent Experience ](/blog/netlify-functions-designed-for-agent-experience) - ![Profile picture of Eduardo Bouças](/_astro/52958f21e8450baf6d8e60302341a984e220c0cd-512x512_13VDlu.webp) Eduardo Bouças News & Announcements June 24, 2026 [ ### How we measure Netlify’s Agent Experience ](/blog/how-we-measure-netlify-agent-experience) - ![Profile picture of Sean Roberts](/_astro/bbf2243f8171dbddd80ab2103622106cef84d125-512x512_Z1d2LKE.webp) Sean Roberts Guides & Tutorials May 15, 2026 [ ### How to build a real-time AI chatbot in minutes with Netlify Agent Runners (no backend) ](/blog/how-to-build-a-real-time-ai-chatbot-in-minutes-with-netlify-agent-runners-no-backend) - ![Profile picture of Nahrin Jalal](/_astro/f0e7c8f227a03fe58340c99ef5439d5a896c0733-272x272_Z23kDpD.webp) Nahrin Jalal ![](/_astro/3f255b372fa958df35802666ee33b4609b2d71bd-1200x1586_1VtE2D.webp) ### How do the best dev and marketing teams work together? [Access the report](https://www.netlify.com/reports/2024-leadership-trend-report/access/)