Deploying Angular app with Netlify in 3 steps

Netlify is a great platform to build/deploy any kind of web applications (not just Angular). It’s very useful when you need to deploy your app fast and easy.

I found it handy to have demos or examples running when writing posts or when I need to have some coding working and live (not just local), but Netlify is not just for that, it is a very powerful platform.

We can deploy our Angular app following these steps: 1. Create your angular project on github (could also be on bitbucket/gitlab) 2. Log in into Netlify, look for your repo and setup the build options 3. Deploy the new web site created!

Let’s start

1. Create you angular project on github (could also be on bitbucket/gitlab)

ng new my-angular-app

Create a repo on github and push your code.

2. Log in into Netlify, look for your repo and setup the build options

  • Log in https://www.netlify.com/
  • Clic on New site from Git Alt Text
  • Select Github as provider Alt Text
  • After authorization, we will see the list of available repositories to pick. Alt Text

If my-angular-app repo is not on the list, we need to provide access from github. (If you see your repo, you can skip this step).

Alt Text Clic on the highlighted link “Configure the Netlify app on GitHub”. We will be redirected to github to look for our missing repository

Alt Text

  • Now we can see my-angular-app Alt Text

  • As part of build options setup, this is what we need:

    1. build command: we build our code in prod mode
    2. publish directory: location of build files (UPDATE: add /browser to publish directory) Alt Text

3. Deploy the new web site created

After clic on Deploy site, the first build is triggered and deploy is in progress Alt Text

Finally, we have our site running Alt Text

Let’s go to the site list to see one we have just created Alt Text

Clic on our site, and then on the url provided by Netlify Alt Text

That’s all! site deployed and running!

Alt Text

Conclusions

Netlify provides a lot of cool features and tools, this post is just to demo how to deploy fast with Angular but there is a lot more to work with. Other Netlify features

  • Custom domains
  • Functions with AWS Lambda
  • Identity
  • Forms
  • Large Media
  • Split Testing
  • Analytics

References