In this part, we’ll go over deplying our
Angular 5 application to
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 5 application to it.
I’m going to deploy the application We created in the 2 previous articles, so you have to check them first!
- Creating Angular 5 application with Angular-cli
- Deploy Angular 5 Application to Netlify (You are here)
PWAwith Angular 5 App
- Build Dynamic themes for
FlexLayoutwith Angular 5
Final Demo here
Deploy our application to github
First we need to deploy our application to our github account. You have to create new repository from here
After creating your repository you should see a page like this but the name of the repo would be different
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
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 firstname.lastname@example.org:your-username-here/your-repo-name-here.git
your-repo-name-here in the previous code to yours first.
Now let’s push our changes:
git push -u origin master
Netlify is one of the most beautiful things I’ve seen lately, Actually I hope that I knew it before. It’s offer a lot of amazing features.
I deployed my own Portfolio on it. you can check it from here wb.gy.
It offers hosting for
Front-End Projects with many options. I can’t count them in this article you have to check them yourself.
Deploying to Netlify
Let’s back to our deployment, you have to create an account on
Netlify first using [Github, Gitlab, Bitbucket or Email] Choose what you want.
After that you’ll be redirected to create your site
New site from Git
Github, if you’re using another git system choose it.
Next, choose your repo. I’ll deploy a repo named
Next we have to set some settings for our deployment.
- For branch choose
master, If you’re using different branch choose it.
- For Build command type
ng build system --prodThis command I’ll explain it later in our series
- For Publish directory, type:
distexactly, it’s the directory angular creates when you run
ng buildso it’s our application’s directory.
It’ll take a minute to deploy our site and give us the
Here’s my deployment
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 with us.
In the next article we’ll use our deployed application to turn it into a
PWA. It’s amazing right?
Hi, my name is Ahmed Abdelsalam. I've turned down every offer for advertisements or sponsored
on this website. I write free resources that have helped thousands of people successfully
transition into a web development career.
If you enjoy my content, please consider supporting what I do.