DEV Community

Cover image for Deploying Angular App On GitHub Pages In 4 Steps.
Youssef Zidan
Youssef Zidan

Posted on • Edited on

3 1

Deploying Angular App On GitHub Pages In 4 Steps.

Show your Angular App to the world for FREE Using GitHub Pages in 4 Easy Steps.

1. Create a Repository

Create a Public GitHub Repository for your Angular App You need to create a GitHub account first.

Alt Text

2. Make a note of your "Owner Name" and "Repository Name" in GitHub.

Alt Text

3. Run this command in the terminal of your Project

ng build --prod --output-path docs --base-href https://<owner-
name>.github.io/<repo-name>/
Enter fullscreen mode Exit fullscreen mode

For the previous example my command will be:

ng build --prod --output-path docs --base-href 
https://YoussefZidan.github.io/Repo-Name/
Enter fullscreen mode Exit fullscreen mode

You will see a Docs Folder has been created inside your App Folder:

Alt Text

Make a copy of the index.html and rename it 404.html then Push this folder (Docs Folder) to the created Repository.

4. change GitHub pages to the master branch/docs folder.

Alt Text

Now wait a few minutes and you will see your app published in a URL like this:

https://youssefzidan.github.io/youtube-api

Enter fullscreen mode Exit fullscreen mode


LinkedIn

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay