Azure_Hosting_Guidline.md

Note:

There are 2 ways to host your website using Azure Static Web Apps Service.

Guidlines:

👉Technique # 1:

• First, ensure that your repository has been created and that your code has been pushed to GitHub's Main branch.
• As a second step, go to Azure.com
• Sign In with your credentials
• Select "Static Web Apps" icon

• And select "+ Create" option.

• Enter your Static Web App's Name:

• Select your nearest Region from the drop down and authorize it with your Github Account.

• Then enter your "GitHub Username" to the "Organization"
• Choose your "Repository name" from the drop down menu.
• Select your "branch".
• And nput your Build Details by selecting Build Presets from the dropdown menu.

• Finally, hit "Review & Create" button to start deployment.✨

👉Technique # 2:

• First, ensure that your repository has been created and that your code has been pushed to GitHub's Master branch.
• As a second step, go to Azure.com
• Sign In with your credentials
• Select "Create a Resource"
  

• Search "Web App" in the Search bar
  

• You will find the "Web App" like this:
  

• Select "Create" option.

• And you will be redirected to a page like this:

• Select your preferable Subscription from the drop down menu:

• Give a new name to your Resource Group according to your project/website:

• Add a name here, according to your project:

Like this:

• Then select Node 16 LTS for the Runtime Stack
• Choose Windows for Operating System, if you are a Windows user.
• And choose the nearest Region around you from the drop down menu.

- Now, you can give any name to your Plan. But, make sure that it is "Free F1". Here, I'm using te default one!

• Go to the "Deployment" tab and Enable the options:

• Ten "Sign In with and Authorize" with your Github Account. Like this:

• Then enter your "GitHub Username" to the "Organization"
• Choose your "Repository name" from the drop down menu.
• Select your "branch".

• Now, go to the "Tag" tab and enter a "Value name" according to your Project. Like this:

• Then Hit "Review + Create" from the bottom:

• Recheck the Details and hit "Create":

  

• Then it will take some time and start Deployment

-Once Deployment is completed...

• Select Go to Resources button...

• You will be redirect to a page like this:

  

• Then check your "GitHub Repository", you will find one action In Progress

• Then go to the Actions tab and select the running Workflow.

  

• This workflow process will consume enormous amount of time! To reduce the time consumption, we need to modify the workflow file. For that, we will cancel the current Workflow :

  

• After cancelling the workflow, select "View workflow file" option from the top right corner:

  

• Then start editing the file using Pen icon:

  

• Scroll down to this section of your code and add a comment : "Zip the build directory"

• Then search "zip" in the side search bar and select "Zip Release".

  

• Copy the code like this and paste it below your comment.

• Then remove the select unnecessary code, like this:

• Then select and modify the path, like this:

Original	Modified

• Then select and modify the filename, like this:

Original	Modified

• It will finally look like this:

  

• Scroll down your code a bit, modify the path and write release.zip, like this:

Original	Modified

• Scroll down a bit more, modify the package and write release.zip, like this:

Original	Modified

• Then, hit "Start Commit" button and Commit Changes.

  

• Now, go to the "Actions" tab and check.
• It will take few minutes to complete the deployment.

• Onece the deployment is completed, Go back to your Azure account, and copy/open your URL to the new tab

• Finally, your website is Hosted! Congratulation!!!🎉