How I hosted Angular website and API for free

I am using Angular 9 and AWS lambda and running the website with Zero cost for minimum use.

To Create An Angular Application

Setup Your Angular Workspace

You’ll need Angular CLI installed. Such a setup is beyond the scope of this article. Go here and follow instructions.

From there, create the Angular workspace:

ng new CIDApp --routing

After the Application is created

This will create the standard Angular application architecture which includes the node_modules, a default component, a routing module, and some other Angular specific files. Let’s make sure everything setup correctly. Switch to your my-app directory and run the app:

cd CIDApp
ng serve

You’ll see something like this:

Point your favorite browser to localhost:4200 to see the application running:

This ensures your app is running fine locally. You are prepared to move to the next step- Deployment.

You need to create a git repository for this application and navigate to https://pages.github.com/ To get more details on Git Hub pages.

In order to add Git hub pages to angular application add this package

npm install -g angular-cli-ghpages
ng build --configuration=production
ng deploy --base-href=“https://cloudindetail.com"

Once installed properly we need to build our application by using the below command which would create a production build and copy it to dist folder

Make sure you give trailing “/” for href

Here I am using custom domain as I am going to walk through how to link custom domains in Git Hub pages.

Next you need to run the below command to push the website to git hub pages

ngh — dir dist/CIDApp

Once this command runs successfully you could see the below in your git.

Now I would show

How to map custom domain In Git Hub Pages

1. point to your branch as my branch is “Home” in Repository Name

2. Now you need to map as shown in below and once ready you could see the message “Your site is published”

3. Add a CNAME file in ghpages repository by clicking on new file and

file should contain text of your domain name. for me it has

“cloudindetail.com”

Now you need to go to your domain manager, where you purchased domain to add DNS

This should all work and give a day for things to reflect some times.

I would continue with API, lambda in my next article…