How to upload Angular project in GitHub

GitHub is the cloud-based service that helps developers to manage their codes on the GitHub server. More than that, it helps to track and control the changes of their code.

In this article, I will help you to upload angular project to GitHub server. Regardless the title of an article, step 2 and 3 are not specific to the angular CLI project. You can utilize the same steps on other projects too.

Step 1: Create a new Angular CLI project

I assume you have already set up an environment for creating angular CLI project. So I start with creating a new angular CLI project.

ng new InMemoryWebApi-Angular

I named my project as AngularInMemoryWebApi. I am not going to dig into the project itself as I have already written an article about Angular In-Memory Web API.

If you analyze the folder structure of the recently created project, you can find the “.git” folder and “.gitignore” file that I feel worth describing. Angular CLI by default, create these two.

You can delete the “.git” folder as you will create it by yourself later on the further step.

“.gitignore”, we do not want to push everything from our local project directory to the remote git repository. So this file has the information of the folders and files that have to be ignored by git. But we have to push this file itself to the git repository so that the other users will have the same copy of git ignore file while they clone the repository.

Bonus Info:

You can create “.gitignore” file with the help of “https://www.gitignore.io“. It helps you to create the “.gitignore” file based on your project environment.

Step 2: Create a new Repository in GitHub

Now create a new repository on https://github.com/new as shown below.

I named my repository to “AngularInMemoryWebApi” and you can also write some descriptions about the project that you are going to upload.

After creating a repository, GitHub will provide you the HTTPS and SSH protocols to share your local project files with the GitHub server. Copy the HTTPS URL as shown below.

Step 3: Upload Angular project to GitHub server using the command line

Now open the command prompt on the root path of your project and follow these steps.

1. git init

This will create a brand new “.git” folder on the root path of your project. Generally, git commands are not available outside the repository and this folder helps you to run the other git commands at that path.

2. git add .

This will add all the modified and new untracked files to the directories and making them ready for the commit.

3. git commit –m “initial commit”

This will save all your changes to the local repository and make them ready to push on the remote server. The last part of the command is the commit message, you can replace that with anything descriptive.

4. git remote add origin https://github.com/dipneupane/AngularInMemoryWebApi.git

This will link your remote repository with your local directory.

5. git push –u origin master

This will push all the changes to the master branch.

So simple huh? Now if you check your GitHub repository you can see the same files (except ignore list files) that are available on your local directory.

Hope you find this article useful. Please let me know on the comment section below.

Have a great day.

About dipneupane

Dip is a passionate Software Developer based in Kathmandu, Nepal. He chew code and smash keyboard for living. Apart from that, he writes about almost everything on buzzedcode.com.

View all posts by dipneupane →

Leave a Reply

Your email address will not be published. Required fields are marked *