Deploy your Angular app with GitHub and Netlify

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:

Setting up the environment.
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.
Creating a new repository on GitHub and pushing the demo project to the repository.
Deploying the GitHub repository to Netlify and launching the demo project.

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 which contains NPM. Using your favorite command line tool (I'm using Git Bash for Windows), you can check if NPM is installed on your computer by running the following command:

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:

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:

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.

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):

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:

ng serve -o

So far, so good!

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:

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.

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.

With the app successfully pushed to GitHub, it's time to deploy it with Netlify.

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.

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

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:

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.

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.