How to deploy angular app on GitHub Pages for free

In this blog post, we are going to discuss about “how we can deploy an angular app on GitHub Pages for free”

To discuss further, lets create a angular application using the Angular CLI. You can checkout one of our detailed post on how to create angular app using CLI here.

Create an angular application using angular CLI

The flow is we are going to generate an angular app using angular CLI. The CLI will generate us a sample application and we will push that boilerplate into GitHub with a new repo.

And then we will look into the steps to deploy that application in github pages.

Create GitHub Repository

I’m going to create an repository with a name “angular-hosting-demo”

Github Repo

Once I create repo, I’m going to push all codes here.

https://github.com/PandiyanCool/angular-hosting-demo

New application using Angular CLI

By generating following after installing all the necessary tools.

ng new <name> [options]

ng new angular-hosting-demo

It will generate an application with following folder structure.

File structure

Verify whether application is building and showing output using following command

ng serve

And it will show us the following output

localhost app

Now into action

For this we are going to install an npm package.

https://www.npmjs.com/package/angular-cli-ghpages

Add angular-cli-ghpages to your project

Run the following command to add angular-cli-ghpages

ng add angular-cli-ghpages

You have run the above from the home directory or root directory of your project.

It will update the angular.json file in your repository.

Now commit all your changes to remote branch.

Deploy your project to GitHub pages

Deploy your project to GitHub pages with all default settings. Your project will be automatically built in production mode.

ng deploy --base-href=/<repositoryname>/

Please be aware of the –base-href option. It is necessary when your project will be deployed to a non-root folder.

In our case, we will run the following command to deploy the application with repo name as bas-href value

ng deploy --base-href=angular-hosting-demo

And this built code will uploaded into separate branch called gh-pages

https://github.com/PandiyanCool/angular-hosting-demo/tree/gh-pages

And it will have runtime files as below

deployed code

And base-href would have details of repository name

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularHostingDemo</title>
  <base href="angular-hosting-demo">  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.09e2c710755c8867a460.css"></head>
<body>
  <app-root></app-root>
<script src="runtime-es2015.0dae8cbc97194c7caed4.js" type="module"></script><script src="runtime-es5.0dae8cbc97194c7caed4.js" nomodule defer></script><script src="polyfills-es5.177e85a9724683782539.js" nomodule defer></script><script src="polyfills-es2015.f332a089ad1600448873.js" type="module"></script><script src="main-es2015.48f00976eb36d615f1e8.js" type="module"></script><script src="main-es5.48f00976eb36d615f1e8.js" nomodule defer></script></body>
</html>

https://github.com/PandiyanCool/angular-hosting-demo/blob/gh-pages/index.html

Access deployed site

To get the URL, you can visit the settings page. It will provide the details of hosted application under github pages tab

Now, we can access the deployed site in the following URL

https://pandiyancool.github.io/angular-hosting-demo/

Thats it!

Give it a try, and leave your feedbacks in comment section below.

Bootstrap 5 alpha is released!

Bootstrap 5 alpha is released!!!

The official documentation of Bootstrap 5 is available here.

Bootstrap is one of my favorite open-source CSS frameworks.

What is Bootstrap?

Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains CSS- and JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.

The journey

Bootstrap 4 is released in Jan 2018. For Bootstrap 5, the team is currently the team working on various aspects like CSS variables, faster javascript, fewer dependencies, and better APIs.

We will get a clear picture of the entire breaking changes details and future list once the beta version released. Now the alpha version available to play around.

Bootstrap 5 alpha no longer depends on jQuery

jQuery played major roles in the earlier versions of bootstrap (let’s say up to 4.x).

Similarly, From Bootstrap version 5, we no longer need jQuery help to use the bootstrap components. Example: maintaining a toggle state, etc.

Now, Bootstrap includes its javascript to do those operations.

We can see the full list of JS related changes in the first bootstrap 5 alpha project on GitHub.

Note: Bootstrap dropped jQuery dependency doesn’t mean you can’t use jQuery at all. You can collaborate with jQuery if your project really needs it. It’s just dropped from its official packages to improve the codebase and various aspects.

Bootstrap 5 alpha CDN

Since we have discussed javascript and jQuery, let’s discuss the CDN that needs to be used in boilerplate code.

In Bootstrap 4, we need to import popper.js, jQuery slim, then bootstrap js.

From bootstrap 5, we can simply import only popper.js and bootstrap.js like below

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>

And it should be imported or included in same order.

Bootstrap 5 drops support for Internet Explorer

CSS Custom Properties

Bootstrap 5 begun use CSS Custom Properties in table component. They currently experimenting to include in various component like buttons, etc.

Vaious local variables are included in bootstrap to achieve variants in table.

Example

@mixin table-variant($state, $background) {
  .table-#{$state} {
    $color: color-contrast(opaque($body-bg, $background));
    $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
    $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
    $active-bg: mix($color, $background, percentage($table-active-bg-factor));

    --bs-table-bg: #{$background};
    --bs-table-striped-bg: #{$striped-bg};
    --bs-table-striped-color: #{color-contrast($striped-bg)};
    --bs-table-active-bg: #{$active-bg};
    --bs-table-active-color: #{color-contrast($active-bg)};
    --bs-table-hover-bg: #{$hover-bg};
    --bs-table-hover-color: #{color-contrast($hover-bg)};

    color: $color;
    border-color: mix($color, $background, percentage($table-border-factor));
  }
}

Improved grid system

  • The team added a new grid tier! Say hello to xxl.
  • .gutter classes have been replaced with .g* utilities, much like our margin/padding utilities. Team also added options to your grid gutter spacing that matches the spacing utilities you’re already familiar with.

Bootstrap includes six default breakpoints, sometimes referred to as grid tiers, for building responsively. These breakpoints can be customized if you’re using our source Sass files.

BreakpointClass infixDimensions
X-SmallNone0–576px
Smallsm≥576px
Mediummd≥768px
Largelg≥992px
Extra largexl≥1200px
Extra extra largexxl≥1400px

These breakpoints are customizable via Sass—you’ll find them in a Sass map in our _variables.scss stylesheet.

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

Take a look at the redesigned and restructured Layout docs to learn more.

RTL support is coming soon!

Bootstrap icons

Meanwhile, bootstrap has its own icon library to support its components.

You can take a look at Bootstrap icons here.

Bootstrap icons can be used as Embedded HTML, External image or custom CSS.

Bootstrap Icons are published to npm, but they can also be manually downloaded if needed.

npm

Install Bootstrap Icons via command line with npm.

npm install bootstrap-icons

Conclusion

In conclusion, We can have a detailed blog once the beta version is released with realtime examples.