Effortlessly Host Your Angular Web site – DZone – Uplaza

Angular is a number one framework for constructing internet purposes and numerous firms use it of their enterprise software program constructing. This makes the power to showcase your Angular utility fairly profitable. It isn’t at all times easy although to showcase your Angular abilities to others. Perhaps you’re employed for an utility that’s inside to your organization solely, or it’s behind a pay subscription or you might be an aspiring pupil who has not but labored on a real-world utility. 

It may be very pricey to host your pattern internet utility on on-line cloud internet hosting platforms or can grow to be exhausting to take care of in the event you resolve to host it in your native machine. GitHub pages provide a really cost-effective option to host, and with Angular’s GitHub web page integration, it turns into a breeze to host your app. 

Let’s discover step-by-step how we are able to create, construct, and host our Angular app on GitHub pages. The whole code for this text is offered right here.

Stipulations

• Data of Angular and GIT
• GitHub account
• NodeJS and NPM put in in your machine

Organising the Angular Venture

Let’s create a enjoyable Angular venture, the place we could have a sq. field on the left and some coloration buttons on the suitable. Clicking on buttons will change the colour of the sq. block.

• Confirm NodeJS and NPM are put in. Instructions to confirm:  node -v  and npm -v

• Set up Angular CLI. Command to take action: npm set up -g @angular/cli@18
• Create a brand new Angular app utilizing ng new color-box
• Whereas creating the app, let’s choose SCSS for our styling

• As soon as the app is created go to our app utilizing cd color-box
• Let’s begin our Angular utility with ng serve
• Navigate to the localhost within the browser of your selection. You must see your app loaded.
  

Including Options to Our App

Now we’re able to make adjustments to our Angular app and add our use case of color-box.

• Open the newly created venture within the Code Editor of your selection. I’ve used Visible Studio Code.
• Let’s create our color-box part with ng generate part elements/color-box
• It will create a part contained in the src/app/elements path in your venture.
• Replace code in part file, SCSS file, and HTML file as per under to incorporate our logic.

/*color-box.part.ts*/
import { Part } from '@angular/core';

@Part({
  selector: 'app-color-box',
  templateUrl: './color-box.part.html',
  styleUrl: './color-box.part.scss'
})
export class ColorBoxComponent {
  colours: string[] = ['red', 'green', 'blue', 'yellow', 'purple'];
  currentColor: string = 'purple';

  changeColor(coloration: string) {
    this.currentColor = coloration;
  }
}

// color-box.part.scss
:host {
    .container {
        show: flex;
        align-items: middle;
        hole: 2vw;
      }
      
      .color-box {
        width: 200px;
        peak: 200px;
        transition: background-color 0.5s ease;
      }
      
      .button-group {
        show: flex;
        flex-direction: column;
      }
      
      button {
        width: 100px;
        peak: 50px;
        margin-bottom: 10px;
        border: none;
        coloration: #000;
        font-size: 16px;
        cursor: pointer;
        transition: background-color 0.3s ease;
        text-transform: capitalize;
      }
      
      button:hover {
        opacity: 0.8;
      }      
}

• Let’s create a brand new file alongside app.part.ts and title it app.module.ts and modify its code to be as under.

/* app.module.ts*/
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.part';
import { ColorBoxComponent } from '../app/elements/color-box/color-box.part';


@NgModule({
  declarations: [AppComponent, ColorBoxComponent],
  imports: [
    BrowserModule 
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

• Replace our app.part part and its HTML file as per under to incorporate our color-box part.

/* app.part.ts */
import { Part } from '@angular/core';

@Part({
  selector: 'app-root',
  templateUrl: './app.part.html',
  styleUrl: './app.part.scss'
})
export class AppComponent {
  title="color-box";
}

• Lastly, let’s modify the principle.ts file within the root of the venture to bootstrap the newly created app.module file. 

/* major.ts */
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module'

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

• Navigate once more to the localhost to see the up to date app, it’s possible you’ll must restart the app once more utilizing ng serve

Organising the GitHub Repository

We’re prepared to maneuver to the subsequent section — internet hosting our app. 

• Go to your GitHub and create a brand new repository.

• Return to the terminal and comply with the under steps to push your code to GitHub

git commit -am "detailed commit message"
git department -M major
git distant add origin https://github.com//.git
git push -u origin major

• As soon as pushed confirm your code is current in GitHub by navigating to the brand new repo web page.

Internet hosting With GitHub Pages

Let’s construct our app and host it.

• Construct the app utilizing command ng construct  --configuration=manufacturing --base-href "https://.github.io//" e.g. ng construct  --configuration=manufacturing --base-href "https://anujkumartech.github.io/ColorBoxGHPages/" 
• Angular ecosystem has a neat software to host pages on GitHub pages. Set up it globally utilizing npm set up -g angular-cli-ghpages
• angular-cli-ghpages  has some added advantages examine to internet hosting it manually.
  • angular-cli-ghpages automates the creation and administration of the gh-pages department in your repository. This department is particularly used for internet hosting static websites on GitHub Pages, making certain that your major codebase stays unaffected by deployment recordsdata.
  • The software means that you can specify a customized base URL in your utility utilizing the --base-href flag through the construct course of. That is significantly helpful for making certain that your Angular app works accurately when served from a subdirectory on GitHub Pages.
  • angular-cli-ghpages might be simply built-in into CI/CD pipelines, enabling steady deployment of your Angular app. By together with the deployment command in your pipeline configuration, you’ll be able to mechanically deploy updates to GitHub Pages each time adjustments are pushed to your repository.
• Deploy the app to GitHub pages utilizing npx angular-cli-ghpages --dir=dist//browser . Instance npx angular-cli-ghpages --dir=dist/color-box/browser
• Congrats, your app is dwell. Navigate right here to view your app. For instance.

Troubleshooting

• If you’re unable to push your code,  guarantee you will have arrange GitHub correctly. Seek advice from articles comparable to this one.
• In the event you see your app code not updating, test the terminal to see if any Angular compilation errors are there.
• In the event you don’t see new updates to code not seen on GitHub pages, redo the construct and deploy as described within the earlier part.
• Guarantee your Angular CLI is model 18 in the event you see build-related points. Verify utilizing ng model

Conclusion

Angular ecosystem gives the suitable software to create, construct, and host our app on GitHub pages, and this makes the complete course of tremendous easy. If you’re feeling excited and wish to enhance your venture deployment extra, search for doing steady integration utilizing GitHub actions. You may also use customized domains and private URLs for a greater showcase of the venture.