DEV Community

Bipon Biswas
Bipon Biswas

Posted on

4 3

Deploy your Angular app to GitHub pages directly

In this tutorial we’ll see how to host an Angular web application using Github Pages. Let’s get started.

Prerequisites
You need to have Node.js, NPM and Angular CLI installed, you also need to generate a new Angular project using Angular CLI.

Step 1: ng new child-demo in Visual Studio IDE terminal

Step 2: cd child-demo

Step 3: command follow step by step

- git init
- git add .
- git commit -m "first commit"
- git remote add origin https://github.com/bipon68/child-demo.git (git remote add origin https://github.com/<username>/<repositoryname>.git)
- git push -u origin master
- npm install -g angular-cli-ghpages
- ng build --prod --base-href="https://bipon68.github.io/child-demo/" (Note: copy all file in dist folder into child-demo project folder and paste(one level up)) ($ ng build --prod --base-href "https://<YOUR_GITHUB_USER-NAME>.github.io/<YOUR_REPO_NAME>/"
)
- angular-cli-ghpages
- Your project should be available at - https://<username>.github.io/<repositoryname> (Sample example : https://bipon68.github.io/child-demo/)
Enter fullscreen mode Exit fullscreen mode

Reference
angular cli ghpages, Upload angular Project github Pages

Source Code
Github

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)

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series