Achraf Ben Alaya
No Result
View All Result
  • Home
  • News
  • Blog
    • blazor
    • c#
    • Cloud
      • Azure
    • docker
    • sql
    • xamarin
    • Dapr
    • Tricks, Tips and Fixes
  • Cloud
  • Motivation
  • General Tips & Fix
  • About
    • Resume
SUBSCRIBE
  • Home
  • News
  • Blog
    • blazor
    • c#
    • Cloud
      • Azure
    • docker
    • sql
    • xamarin
    • Dapr
    • Tricks, Tips and Fixes
  • Cloud
  • Motivation
  • General Tips & Fix
  • About
    • Resume
No Result
View All Result
Achraf Ben Alaya
No Result
View All Result
ADVERTISEMENT
Home Blog Cloud Azure

How To host an Angular app on Azure

Deploy Angular application with Azure Static Web App Service and GitHub Actions

achraf by achraf
September 29, 2020
in Azure, Blog, Cloud
5 min read
0
0
SHARES
1.1k
VIEWS
Share on FacebookShare on Twitter

In this new blog post we are going to build a simple basic Angular application , so you don’t have to know a lot about react , all we are going to build or use is a demo project .

If you want to read more about the Azure Static Web App Service follow this link .

Creating the Angular application

to build a react application we are going to use a couple of commands :

“Make sure you have a recent version of Node.js installed”

also you should have the latest version of Angular-CLI. Learn more about Angular CLI here, and find the instructions for installation.

Install Angular-cli:

npm install -g @angular/cli

Now let’s create our application using :

ng new my-app

The project will be generated automatically. Let’s go to our project using !

cd .\my-app\

to run our project we need to use this command :

ng serve

 

now before pushing our source code to GitHub , let’s build our project using :

ng build

 

now if you go back to the project , you will see a new folder have been created name : dist (The dist folder is the build folder which contains all the files and folders which can be hosted in the server)

If you check you will see that there is another folder under dist called “my-app” which is the name of our app and that’s our target folder so we need to host the folder : dist\my-app we are going to need this later .

Pushing code to GitHub

Now after building our project on our local computer ,we are now going to push it to GitHub .

For that we need to create a new repository :

Now to push our solution to GitHub we are going to use a couple of commands :

 

git add -A 
git commit -m 
"first commit" git branch -M master
 git remote add origin https://github.com/achrafbenalaya/AngularDemo.git 
git push -u origin master

 

 

 

 

 

Create Static Web App

 

If you don’t have an azure account you can create your Azure free account today and 12 months of free services from this link .

Now when you login to the portal you should look for static web app and clique on create and you will have the same as in the picture below :

azure

Now , you should fill the data with a resource group (you can create a new one by cliquing on Create new) .

You should also give your application a name and choose a region, next we are going to build a trust connection between azure and GitHub by  cliquing on Sign in with GitHub .

azureazure

A new fields will appear where you need to choose your organization , the repository that you have created for the application and the branch (in our case we only have one branch and its the Master ) .

After you fill those fields, a new field will appear were you have to choose the framework that you have worked with ,in our case it’s Angular

 

Ps : make sure to keep dist folder and to add as I mentioned earlier the folder that is under fist which is my-app

 

azure
azure

In our case , we don’t have an api  ,we are not going to consume and api we are just going to build a static web app, for that , be carful to to delete the ‘dist/my-app’ for the app artifact location .

App artifact location is the path of your build output relative to your apps location. For example, setting a value of ‘build’ when your app location is set to ‘/app’ will cause the content at ‘/app/build’ to be served.

 

azure
azure

Now when you are going to clique on ‘Create’ Azure will use GitHub actions to deploy your webpage. If you head over to the app overview tab you will notice a “Workflow File” link.

 

If you open the file, you will see it  contains the GitHub action config for CI/CD pipeline.

if you go and clique on Actions , you will see that the pipeline already started

Now let’s check the service that we have created on azure while the build continue

Now clique on the URL to navigate to our application and you will see that we have our app live !

 

Now  ,all you have to do , is to pull the project since there is a new file published , do your modifications on your source code and then push it and GitHub action will do all for you and you will see your app published on azure .

You can watch the video below for the full Demo .

 

 

ShareTweet
Previous Post

Azure Static Web App Service

Next Post

How To host a Next.js app on Azure

Related Posts

Block the default URL assigned to the azure web app using azure application gateway
Azure

Block the default URL assigned to the azure web app using azure application gateway

May 31, 2023
56
Block the default URL assigned to the azure web app
Blog

Block the default URL assigned to the azure web app

May 14, 2023
215
What if we can check the cost of Azure resources in a juts few seconds
Azure

What if we can check the cost of Azure resources in a juts few seconds

May 9, 2023
331
Part 5-A : Using Azure DevOps, Automate Your CI/CD Pipeline and Your Deployments
Azure

Part 5-C : Using Azure DevOps, Automate Your CI/CD Pipeline and Your Deployments

May 2, 2023
216
15 E-books that focus on learning Microsoft Azure Cloud
Azure

15 E-books that focus on learning Microsoft Azure Cloud

April 23, 2023
102
Part 5-A : Using Azure DevOps, Automate Your CI/CD Pipeline and Your Deployments
Cloud

Part 5-B : Using Azure DevOps, Automate Your CI/CD Pipeline and Your Deployments

April 20, 2023
123
Next Post

How To host a Next.js app on Azure

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Terraform

Certifications

Microsoft certified trainer (MCT)

Recommended

Going Dapr

Going Dapr

August 17, 2021
265
Where is my Money ! The Proper way To Shutdown Azure VM

Where is my Money ! The Proper way To Shutdown Azure VM

November 2, 2020
556
Run background tasks with WebJobs in Azure App Service

Run background tasks with WebJobs in Azure App Service

August 21, 2021
1.3k
Finally a stable version of Xamarin.Forms 4.1.0 and announcing Xamarin.Essentials 1.2

Finally a stable version of Xamarin.Forms 4.1.0 and announcing Xamarin.Essentials 1.2

April 21, 2020
428
Generating report for SSL Certificates for Websites with PowerShell

Generating report for SSL Certificates for Websites with PowerShell

April 10, 2022
686
Setting up Serilog in ASP.NET Core

Setting up Serilog in ASP.NET Core

September 15, 2020
2.1k
Facebook Twitter LinkedIn Youtube
Block the default URL assigned to the azure web app using azure application gateway

Block the default URL assigned to the azure web app using azure application gateway

May 31, 2023
Block the default URL assigned to the azure web app

Block the default URL assigned to the azure web app

May 14, 2023
What if we can check the cost of Azure resources in a juts few seconds

What if we can check the cost of Azure resources in a juts few seconds

May 9, 2023

Categories

  • Apps (1)
  • Azure (46)
  • blazor (2)
  • Blog (70)
  • c# (7)
  • Cloud (45)
  • Dapr (4)
  • docker (3)
  • Games (1)
  • General Tips & Fix (1)
  • Kubernetes Service (AKS) (1)
  • motivation (2)
  • Motivation (3)
  • News (9)
  • Resume (1)
  • sql (4)
  • Terrafrom (1)
  • Tricks, Tips and Fixes (3)
  • xamarin (5)
No Result
View All Result
  • Home
  • News
  • Blog
    • blazor
    • c#
    • Cloud
      • Azure
    • docker
    • sql
    • xamarin
    • Dapr
    • Tricks, Tips and Fixes
  • Cloud
  • Motivation
  • General Tips & Fix
  • About
    • Resume