Static Web hosting with Azure + Angular + Github + DNS

We are going to setup an Angular static web site in Azure using Github. The domain provider is a separate vendor. Follow the easy steps to do the things.

1. Install Angular and write you basic app
2. Commit the changes to github repo
3. Create an Azure account if you don't have and enable free subscription(Trial) 
4. Create a static web app in Azure
1. Create a new Resource Group
2. Set Deployment details as GitHub
3. Attach your Github Account and give the repo and branch details
4. Review and Create
5. Once you saved GitHub Action will start to run and deploy the latest code in the selection branch (Sometimes this may failed as you don't have the build folder in the angular project path.So please create in this error occurred).

        

5. Now you have almost complete with the deployment. Next you have to link with the domain which you already purchased.

 

6. Go to the static web app custom domain and get the alias. After that go to your domain provider and link with (You can use CNAME or A Record according to the type of t he domain).

Enable SSL in Your Angular App to resolve most of native OS issues (IOS/Android)

Today we are talking about an issue which is more painful to developers when we are doing the deployments to outside of localhost(To your local ip address with a port) in Angular.

If you are targeting IOS/Android operating system to launch you angular app, this will probably a good tip.

Enable SSL in your angular app by using a certificate. Create below file and keep inside your folder path and name it as certificate.cnf.

[req]

default_bits = 2048

prompt = no

default_md = sha256

x509_extensions = v3_req

distinguished_name = dn

[dn]

C = BE

ST = digem

L = brussels

O = EY

OU = PAS

emailAddress = lahiru.dhananjaya@randomsoftware.net

CN = <serving address>

[v3_req]

subjectAltName = @alt_names

[alt_names]

DNS.1 = <serving address>

Then you have to run this command to create the certificate in your terminal.

openssl req -new -x509 -newkey rsa:2048 -sha256 -nodes -keyout localhost-remote.key -days 3560 -out localhost-remote.crt -config certificate.cnf

You can try below command in the terminal inside your angular project path

ng serve --host 192.168.x.x  --port 4200 --ssl --ssl-key <key-path> --ssl-cert <cert-path>

or you can add this to .angular-cli.json

{

    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",

    "defaults": {

        "serve": {

            "sslKey": "<relative path from .angular-cli.json>/server.key",

            "sslCert": "<relative path from .angular-cli.json>/server.crt",

            ...

        }, ...

    }, ...

}

After following the steps , you will get the change to smoothly use https over your ip and do debugging easily.This will enable most native features which Chrome/Safari has (Such as settings for the page camera etc)