Getting Started with Azure Free Website Hosting

Azure Free Website Hosting is a great way to get started with web development, and it's completely free. You can host a static website or a small dynamic website with a free plan.

To get started, you'll need to sign up for an Azure account, which only takes a few minutes. This will give you access to a free tier of services, including website hosting.

The free plan includes 10 GB of storage, which is plenty for a small website or a portfolio site. You can also host a website with up to 100,000 monthly visits.

To get started with Azure free website hosting, create a Static Web App resource in the Azure Portal. Give your app a name and select the Free plan type.

Select "Other" as the deployment details, as it's where Azure DevOps is categorized now.

Observe that the location is set to Global, which is suitable since your app will be served from a globally distributed CDN.

You'll also notice the option to manage deployment tokens, which you'll use later to set up Azure DevOps.

To provision an Azure Static Web App, start by signing in to the Azure Portal and creating a new resource group. Give it a name, such as Studentportifolio, and choose the region where you want the app to be deployed, like West Europe.

You'll also need to provide the name of your Static Web App and select the deployment source, which in this case is GitHub. Allow Azure to access your GitHub account and select the repository where your code is stored, for example, MLSAMentorshipPortfolio.

Here's a step-by-step guide to provisioning an Azure Static Web App:

Alternatively, you can use the Azure SWA CLI to host your project. First, install the @azure/static-web-apps-cli package as a dev dependency. Then, deploy the application with the build folder using the Azure SWA CLI command. If your application uses an API, pass the api folder location as a flag to the command.

To add a Function App, start by opening the command pallet using the F1 key. Type and choose Azure Function: Create New Project… to get started.

Select the api folder and choose C# as the language. You can also choose other supported languages, but C# is a popular choice.

Select .NET Core 3 as the runtime, and then choose HttpTrigger as the template for your function. Give your function a name and namespace, and select Anonymous as the authentication method.

At this point, your basic code setup is complete.

To host your project, you can choose from three main options: Azure Portal, Azure CLI, and GitHub. You can provision an Azure Static Web App through the Azure Portal by visiting Azure Portal and signing in, if you don’t have an account, you can activate Azure for students.

To create a new resource group, click on the "Create new" button and give it a name, such as "Studentportifolio". You'll also need to provide the name of your Static Web App and select the region you want it to be deployed to, like West Europe.

If this caught your attention, see: Free Website with Hosting

Selecting the deployment source is the next step, and for GitHub, you'll need to allow Azure to access your GitHub repository. You can do this by selecting your GitHub organization and repository, such as "MLSAMentorshipPortfolio" and the branch "master".

Alternatively, you can host your project with Azure SWA CLI by installing the @azure/static-web-apps-cli package as a dev dependency. If you're using pnpm as a package manager, run the command to install the package.

To deploy the application, run the command to deploy it to Azure SWA, including the build folder. If your application uses an API, you'll need to pass the api folder location as a flag to the command.

You can also host your project with Azure Portal GUI by searching for Azure Static Web App in the Azure portal and clicking on "Create". You'll need to set up the configurations, including creating a resource group and naming your web application. If your project is hosted on GitHub, choose GitHub as the option and select the repository from the dropdown menu.

Related reading: Windows Azure Hosting Plans

To provision an Azure Static Web App, start by visiting the Azure Portal and signing in. If you don't have an account, click here to activate Azure for students.

To deploy your Static Web App, follow these steps:

Testing the app is easy, just hit the application URL, and if it returns a JSON response, you're good to go.

Continuous deployment is a game-changer for developers, allowing them to automate the process of deploying code changes to production. In the context of Azure Static Web App, continuous deployment is made possible through Azure DevOps.

To set up continuous deployment, you need to create a build pipeline in Azure DevOps. You can start with the Starter pipeline and copy the provided code into your pipeline definition file. This code requires you to specify the location of your Angular code, Azure Function code, and the output location of your Angular code build folder.

The pipeline will automatically run every time you push changes to the repository. However, you might want to control this behavior and only deploy after specific commits. Unfortunately, there isn't a standard template for Static Web App deployment in Azure DevOps yet, so you'll have to create a pipeline variable with a deployment token.

To connect your pipeline to the Azure Static Web App resource, you'll need to create a pipeline variable called deployment_token and paste the Deployment token from the Azure portal into the Value section. This will allow your pipeline to push your Angular Code and Azure Function code to the Static Web App resource on a successful run.

Here are the steps to provision an Azure Static Web App:

By following these steps, you can automate the deployment of your code changes to the Azure Static Web App. This is especially useful when using GitHub CI/CD, which automatically deploys changes to the Static Web App when made in GitHub using GitHub codespaces.

A different take: Free Static Site Hosting