Ngh Could Not Read From Remote Repository

How to deploy an Angular App

FrontEnd: Angular & GitHub

I recently worked on a fun personal projection, creating a web-based tool for client management and build my front-end app with athwart. Now, if you are new to Angular like I was, It'due south quite disruptive and in that location aren't many directives on how to get your application out there for other people to use (taking an athwart app from dev surroundings to a live environment that users can access and apply).

So for the purpose of this article, We'll explore how to deploy or publish an Angular app on GitHub pages .

I'll assume that you have already created an angular app or are currently working on one and are familiar with angular CLI, Git, and Github. The Angular CLI makes it like shooting fish in a barrel to create an application that already works, right out of the box. It already follows our all-time practices. If you don't have it installed, I would highly recommend that you do.

• Angular CLI installation

          npm install -k @athwart/cli        

If yous don't have an angular project to deploy, you can simple create a demo project and follow along by running the command "ng new" followed by your awarding proper name. I decided to named mine "my-app-demo", yours will have a different name or you can name it any you wish:

          ng new my-app-demo        

Once it'southward created, change working directory to your app directory and run it to make sure everything is working correctly:

          cd my-app-demo
ng serve --open        

Ng "serve" follow by " — open" flag volition automatically launch and open up the web browser. if you simply typed "ng serve" and once your app is upward and running, visit the page http://localhost:4200 to brand sure everything works fine. My app demo looks like this:

screenshot of terminal — mac

The next step is making sure you have ghpages package installed on your figurer. The ghpages parcel is used to deploy your build file to GitHub pages. run the following control to install it globally:

          npm install -one thousand angular-cli-ghpages        

• Create a GitHub repository

• Push content to your GitHub repository

Follow the quick setup up steps beneath. When setting upward a remote repository, brand sure you replace the path with the correct path to your remote repository:

          repeat "# my-app-demo" >> README.physician
git init
git add .
git commit -one thousand "first commit"
git remote add origin https://github.com/githubusername/reponame.git
git button -u origin main        

Now, running "ng build" create a distribution folder which contains all the files necessary for your projects to run in a production environs or server host.

          ng build --prod        

Adding the production flag " — prod" to ng build reduce significantly the size of your bundle files. If your app doesn't integrate whatsoever type of dorsum-terminate, yous can simply take the content of your dist folder and upload them to a server via FTP and your app will work just fine.

You can too specify the base reference of your build files with the following command:

          ng build --prod --base-href //urlOfYourSubfolderDomain        

Deploy your app to Github pages

In order to deploy to Github pages, we need to run "ng build" with the base-href flag and information technology looks like this:

          ng build --prod --base-href https://yourGithub-username.github.io/reponame/        

Make sure to put your Github username and the name of the remote repository you lot associated with the local repository of your angular app. Mine looks similar this:

Screenshot of terminal — mac

It's very of import to add the slash "/" after the repository proper noun at the terminate of the path otherwise it would non work.

At present, one time it's washed, you tin run ngh to invoke the hgpage command line interface tool nosotros installed earlier.

Turns out Angular 6 changed angular.json 'south "outputPath": "dist/" into "outputPath": "dist/[PROJECTNAME]" , which placed everything in the dist folder in a subfolder, which breaks ngh's functionality.

          ngh        

if yous are using Agular 6 and higher up, run:

          ngh             --dir dist/[PROJECTNAME]        

Here is the screenshot when I ran ngh later ruining ng build on my project demo:

Hither is the screenshot when I ran ngh on a project that was built recently with Athwart 6 version:

After successfully publishing, simply go ahead and visit that URL you specified on you base-href flag to come across your deploy and publish athwart app running. here is my screenshot:

And so, that'due south it! now you can get ahead and make changes on your app, simply repeat the build and deploy processes whenever you desire to share it with others in your organization or if you lot merely desire to put it out there.

If you enjoyed this article, yous might besides like " How to build a bidirectional app for Cyberspace of Things/Conversation with Python "

Cheers!!!

Besides, Read

• Best Crypto APIs for Developers
• The Best Crypto Trading Bots
• The Best Bitcoin Hardware wallet
• The All-time Crypto Tax Software
• All-time Crypto Trading Platforms
• Best Wallet for Uniswap
• Best Crypto Lending Platforms
• Top DeFi Projects
• Bitsgap review — A Crypto Trading Bot That Makes Easy Money
• Quadency Review- A Crypto Trading Bot Made For Professionals
• 3commas Review | An Excellent Crypto Trading Bot
• 3Commas vs Cryptohopper
• The Idiots Guide to Margin Trading on Bitmex
• The Definitive Guide to Crypto Swing Trading
• Bitmex Advanced Margin Trading Guide
• Crypto arbitrage guide: How to make coin as a beginner
• Summit Bitcoin Node Providers
• Best Crypto Charting Tool

Become Best Software Deals Directly In Your Inbox

johnsonjusin1984.blogspot.com

Source: https://medium.com/coinmonks/how-to-deploy-an-angular-app-8db1af39f8c1

Share this post