Deploy your Angular app with GitHub and Netlify
Tags: tutorial, angular, github, netlify
Published: 2021-11-21 22:49:34

When building your own projects, it would be nice if some of them will actually see the light of the world wide web instead of sadly sinking into oblivion. However, going through the whole process of successfully deploying your website to a hosting platform somewhere may sound a bit too discouraging for some developers. 

And that’s where a developer platform like Netlify comes to the rescue. With the use of their free starter plan, you can have your own personal project running in just a few steps.

In this tutorial I’ll show you these steps:

1. Setting up the environment.
2. Creating a new project. In this example I’ll create a new Angular demo project, but you can choose any other of the popular frameworks.
3. Creating a new repository on GitHub and pushing the demo project to the repository.
4. Deploying the GitHub repository to Netlify and launching the demo project. 

![A schoolboard with the text 'Setting up the environment'](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qxz0tu77eo78atqclrit.png)
##1. Setting up the environment
Before we begin, first make sure you’ve got the Angular CLI tool installed on your machine together with a package manager (I’ll use Node Package Manager (NPM)).

To install NPM, you can [download and install the latest version of Node.js](https://nodejs.org/en/download) which contains NPM. Using your favorite command line tool (I'm using [Git Bash for Windows](https://gitforwindows.org/)), you can check if NPM is installed on your computer by running the following command:
```bash
npm -v
```
When NPM is installed, this command should give you the number of the installed version.

To install the latest version of the Angular CLI, you can then use the following NPM command: 
```bash
npm install -g @angular/cli
```
The *-g* part will install the CLI globally on your computer. To install the CLI locally, just use the same command without -g.

And again checking the Angular CLI version will tell you if the CLI is installed on your computer:
```bash
ng -v
```
We're almost there. To push our app to GitHub later in this tutorial, we need Git version control to help us out with this. If you don't have Git installed on your computer, you can [download and install the latest version from here](https://git-scm.com).

![A schoolboard with the text 'Creating a new Angular project'](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mctny9mqldvmo6f9ywl2.png)
##2. Creating a new Angular project
Now it's time to create our demo Angular app. We will create the app using the command line.
- Navigate to the folder where you want to install your app.
- Thanks to the Angular CLI, we can create a new Angular app by running the following CLI command (where 'demo-project' is the very original name I'm giving my app):
```bash
ng new demo-project
```
You can add multiple options to this command to configure your Angular app. For the purpose of this tutorial I won't go into detail about this. However, if you first want to see the list of files the CLI will create before actually creating the app, you can add *-d* (which is short for --dry-run) to the command.

After the app has been created, navigate into the app folder to check the app in the browser, by running:
```bash
ng serve -o
```
So far, so good!

![A schoolboard with the text 'Pushing the app to GitHub'](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eh9d5q44bdx1b7d3kywr.png)
##3. Pushing the app to GitHub
In order to push our new app to GitHub we need to initialize the local directory with the files as a Git repository. This can be done running the command:
```bash
git init
```
This will create an empty repository (a .git folder) with an initial branch.

Next, go to GitHub (create an account if you don't have one yet) and create a new repository using the plus icon on your dashboard.

![Screenshot of GitHubs create a new repository form](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ccqfz3sgo4ysjn1ofwaf.png)

On the Quick setup section of your created repository you can use the commands in the *…or push an existing repository from the command line* part to push the app from your local repository to GitHub.

![Screenshot of the '…or push an existing repository from the command line' section in the repository quick setup on GitHub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3xp018c8kvtmm1n7f8kt.png)

With the app successfully pushed to GitHub, it's time to deploy it with Netlify.
 
![A schoolboard with the text 'Deploying and launching the app'](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kcpvb8dwvlkjna6yg1ti.png)
##4. Deploying and launching the app
Before you can use the Netlify developer platform you need to create an account.

After the registration go to your personal dashboard and click the *New site from Git* button.

![Screenshot of a personal dashboard on Netlify](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rmjlx4l8n2mb9bt3xzil.png)

Connect to the Git provider (GitHub in our case) to find your repository on GitHub.

![Screenshot of the connect to a GitHub repository process on Netlify](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ptc2qw9cy74eruotja8n.png)

Select your repository from the list of available repositories.

Next, we need to fill in some settings for the deployment. The *Basic build settings* section is the one where you need to modify the fields as shown in the screenshot below:

![Screenshot of the basic build settings for deployment on Netlify](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/asxj7mflnzbs2jc6h97w.png)

- **Build command**: ng build
- **Publish directory**: dist/your-project

Finally click the *Deploy site* button. The *Site overview* page of the newly deployed website will open and tell you that the deployment is in progress. You can check the deploy logs by clicking on the deploy in the *Production deploys* section on the page.

When the deployment has finished you can check your site by clicking on the URL link on the page.

![Screenshot of the link with the URL of the created site](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fmg4a14qavbsfqbe74j7.png)

If you're happy with the randomly created site name you're done, but you can also choose to modify the name to something else via the *Site settings* button.

Congratulations, you've got your own site deployed and running!

Thank you for taking the time to read this tutorial. I hope you enjoyed it and if you have any questions about the subject feel free to respond.