Skip to main content

How deploy your angular project on GitHub Pages

By

Step 1:- Create Repository on github
Note :- Open terminal and goto your project direcoty then run following command which you got after created repository.
Step 2:- git init
Step 3:- git add .
Step 4:- git commit -m "first commit"
Step 5:- git branch -M main
Step 6:- git remote add origin https://github.com/rahuldrupal5788/DevR9angular.git
Step 7:- git push -u origin main

Step 8:- We need to build our code in production mode for that we will create deployment files that will be deployed on GitHub Pages.

By default, this deployment code is generated in the /dist/<ProdectName> folder under the angular project folder, but we need to generate this in the "docs" folder under the angular project folder.

So, we need to make a small change in the angular.json file and change the outputpath value to "docs/".

Step 9:- Run the following command with the baseHref  option in the git bash window to generate deployment files in the docs folder.

ng build --prod --baseHref="https://username.github.io/repositoryName/"

Example in my case :- ng build --prod --baseHref="https://rahuldrupal5788.github.io/DevR9angular/"

Note :- Here, username and repositoryName will be your GitHub username and repository name.

Go to your angular project folder and check that the docs folder is created and contains all of the deployment files.



Step 10:- Now commit this folder and push it into the GitHub repository from the following commands in the git bash window.

git add .
git commit -m "upload deployment files"
git push -u origin main

Step 11:- Configure GitHub Repository for publish angular project on GitHub Pages

Now, open the GitHub Pages URL of your deployed angular project in the browser.
Exp :- https://rahuldrupal5788.github.io/DevR9angular/


Comments

Post a Comment

Popular posts from this blog

How to configure memcache with drupal 8 on ubuntu for reduce page load?

By
Memcache is an in-memory (RAM). It store data in Key-Value Format. Memcached server automatically stores all the content (data) in allocated RAM on the server. After configure memcache, it increase Drupal Site performance by moving standard caches out of the database. Drupal does not come with memcache by default if we want to install it then we have to install it on server. There are many steps that how to install memcache on the server and how to configure it with drupal 8 for reducing the load on the database with every page request. Step1 :- Open terminal of your machine and run following commands :- a. sudo apt-get update b. sudo apt install memcached c. sudo apt install php-memcached Step2 :- Check that Memcache daemon is working by using the following command : a. "ps aus | grep memcached" Step3 :- Also, check Memcache extension is configured in PHP. For that you have create a file phpinfo.php then write below code. <?php phpinfo(); ?> or sudo vi /var/www/html...
Post a Comment
Read more

What is Docker? How to create Dockerfile, Volumes? How to manage container with Port Mapping?

By
What is Docker? Docker is an open source centerlized Platform designed to Create, Deploy and run applications. Docker use container on the host OS to run applications. It allows application to use the same linux Kernal as a System on the host computer, rather than creating a whole virtual OS. We can install docker on any OS but Docker engine run natively on linux distribution. Docker written in 'go' language. Docker is a tool that perform OS level virtualization, also known as Containerization. Before Docker, many users faces the problem that a particular Code is running in  the developer's system but not in the User's System. Docker was first Release in March 2013. It is developed by Soloman Hykes and Sebastion Pahl. Docker is a set of Platform as a service that uses OS level Virtualization whereas VMware uses Hardware level Virtualization. We can say that Docker is a tools which create the VM. Advantages of Docker :- There are following advantage of Docker : No pre-a...
2 comments
Read more