Hello Guys, this is my first ever post in the DEV community. In this post I am going to explain how to deploy an angular application on Netlify.
What is Netlify
As per the docs
Netlify is an all-in-one platform for automating modern web projects. Replace your hosting infrastructure, continuous integration, and deployment pipeline with a single workflow. Integrate dynamic functionality like serverless functions, user authentication, and form handling as your projects grow.
But for me netlify is a platform, which can deploy and host web apps.
Create an Angular app from the CLI
Browse to your required directory and run the following commands to create an angular app
ng new angular-netlify
ng serve
The first command is to create an angular app in your directory and the second command will make sure your app is up and running in the localhost.
You can view your angular app in the browser at http://localhost/4200 address
Changes to Angular app to deploy on Netlify
- Create a file named _redirects in the src folder and insert the below line.
/* /index.html 200
More about the _redirects
- In the angular.json file goto projects.architect.build.options.assets and add the following
{
"glob": "_redirects",
"input": "src",
"output": "/"
}
Deploy app into Netlify
First of all, you need an account with Netlify. If you don't have it please use this Netlify Signup
We can deploy our app either by uploading the files or by connecting git repository to the Netlify account. I prefer connecting git repo with netlify, because it has certain advantages which, we will discuss in the later posts.
Connecting git repo to netlify
After successful signup and login to netlify account, you will see a dash board which looks similar to this
Click in the New site from Git. A new screen will pop-up asking you login through Github/Gitlab/Bitbucket.
After successful login you have to Authorize netlify on behalf of yourself to access the repo's.
Next, select corresponding repo and proceed through next steps, where you will need to configure the build settings.
Make sure, you have selected proper branch, where the code is located.
And also make sure, the publish directory to dist/[your app name], in my case it is as shown in the below pic.
Now, you are good to HIT the deploy site button. It will take a few minutes to deploy your app and it will give you an URL, from where you can access your deployed app.
Next
We will add Authentication using Firebase in the next post.
Top comments (0)