Deploy Angular 6 Application to Netlify
Tags: angular, angular4, angular6
Published: 2019-07-17 15:52:19

---
title: Deploy Angular 6 Application to Netlify
published: true
tags: angular,angular-4,angularjs,angular-6
canonical_url: 
---

![](https://cdn-images-1.medium.com/max/1024/1*ByAhY7BtpARVPzkgM6yV1Q.png)<figcaption><strong>Deploy Angular 6 Application to Netlify</strong></figcaption>

This is the fourth part in an n-part [series](https://dev.to/geeksamu/angular-6-article-series-2n26-temp-slug-5101921) about the JavaScript framework, Angular 6.  
In this part, we'll go over deplying our Angular 6 application to Netlify.

This is not intended to be a complete guide, but rather an overview of the basics to get you up and running so you can get to know Deployment on Netlify and how to deploy your Angular 6 application to it.  
I'm going to deploy the application We created in the 3 previous articles, so you have to check them first!

> _Before we begin, English is not my first language, so if you see something weird, please, calmly point it out in the comment section or_ [_email me_](mailto:i@wb.gy)_, there’s no need for violence :)_

### Article Series

1. [Angular 6 Article Series](https://dev.to/geeksamu/angular-6-article-series-2n26-temp-slug-5101921)
2. [Building Angular 6 Application](https://dev.to/geeksamu/building-angular-6-application-bf9-temp-slug-3458718)
3. [Using Angular Material with Angular 6](https://dev.to/geeksamu/using-angular-material-with-angular-6-lob-temp-slug-9844819)
4. Deploy Angular 6 Application to Netlify ( **You’re here** )
5. Creating PWA with Angular 6 ( **Soon** )
6. Dynamic themes in Angular 6 Material ( **Soon** )
7. Angular 6 with GSAP ( **Soon** )
8. Angular 6 with Firebase ( **Soon** )

### Deploy our application to github

First we need to deploy our application to our github account.  
You have to create new repository from [here](https://github.com/new)

![](https://cdn-images-1.medium.com/max/1024/0*iTC5Dl8vgTIubNWR.png)

After creating your repository you should see a page like this but the name of the repo would be different

![](https://cdn-images-1.medium.com/max/1024/0*GAAQJ2B3uWbGn-BZ.png)

Now open you terminal and change your current directory to our app’s directory.  
and run the next lines of code but you have to change the repo name to your repo's name.  
To add all our changes:

```
git add -A
```

then we have to commit these changes:

```
git commit -m "First commit before deployment"
```

You can change the commit title as you want.  
Next we have to run:  
==but please don’t forget to change the repo-name and the username ==

```
git remote add origin git@github.com:your-username-here/your-repo-name-here.git
```

~ Change your-username-here and your-repo-name-here in the previous code to yours first.  
Now let's push our changes:

```
git push -u origin master
```

### Netlify

Netlify is one of the most beautiful things I’ve seen lately. Actually, I wish that I had used it before. It offers a lot of amazing features.

I have deployed my own [Portfolio](https://wb.gy) on it. you can check it out from here [wb.gy](https://wb.gy).

It offers hosting for **Front-end** projects with many options. I can’t count them in this article, so you will have to check them for yourself.

### Deploying to Netlify

Let’s back to our deployment, you have to create an account on [Netlify](https://app.netlify.com/) first using [Github, Gitlab, Bitbucket or Email] Choose what you want.  
After that you'll be redirected to create your site

![](https://cdn-images-1.medium.com/max/1024/0*zazFtXyv83YSkKrW.png)

Click on New site from Git

![](https://cdn-images-1.medium.com/max/1024/0*sBifB82JSbM2qUrG.png)

Now choose Github, if you're using another git system choose it.

Next, choose your repo. I’ll deploy a repo named angular-6-article-series

![](https://cdn-images-1.medium.com/max/1024/0*XWiOncSYjX9EGZCl.png)

Next we have to set some settings for our deployment.

1. For branch choose master, If you're using different branch choose it.
2. For Build command type

```
ng build --prod
```

This command I’ll explain it later in our series

For Publish directory, type: dist/your-application-name

Don’t forget to replace your-application-name with the name of your application here my application name is angular-6-series

In Angular previous version it was just the ‘dist’ directory but now the CLI will create new folder into dist with the name of your application  
Why dist exactly, it's the directory angular creates when you run ng build so it's our application's directory.

![](https://cdn-images-1.medium.com/max/1024/0*UYyvLr7AdS0iT_nS.png)

Then click Deploy site  
It'll take a minute to deploy our site and give us the URL.

> I solved the next problem!

This should work and your application will be deployed successfully, But mines does not work. I don’t know why! I see no errors. No problems. So I tried to deploy it using any method  
If your application gives you 404 page. You can deploy your final dist folder only to Nelify.  
Just run:

```
ng build --prod
```

It’ll create dist folder. Just drag it and drop it on this part of page in `Netlify

![](https://cdn-images-1.medium.com/max/1024/0*wwzeBi2SWTSIVFvM.png)

This solution will work but it’s not the best. We won’t be able to use Netlify's continuous deployment

Here’s my deployment URL [https://angular6-series.netlify.com](https://angular6-series.netlify.com/)

I know that the explanation with images in this article might be silly, but I really wanted it to be understood, so the next articles would be more simple and anyone with little experience would be able to build the final application.

Next: Creating PWA with Angular 6 ( **Soon** )

### If you liked this article, hit that clap button below 👏. check out other articles I’ve written [here](https://blog.wb.gy). And If you find this story useful. As I don’t use Medium Partner Program. Buy me a coffee :)

[Buy Ahmed Abdelsalam a Coffee. ko-fi.com/geeksamu](https://ko-fi.com/geeksamu)

If you have any question comment it below or You can find me on Twitter [@geeksamu](https://twitter.com/geeksamu)

[Ahmed ⚯͛ (@geeksamu) | Twitter](https://twitter.com/geeksamu)