Lightning-Talks

What is App Service❓ What are Web Apps❓

App Service

:::::::::::::: {.columns} ::: {.column width=”50%”}

::: ::: {.column width=”50%”}

::: ::::::::::::::

::: notes

App services supports many languages natively and can automatically build the code as part of the deployment process

Scale up and out can happen both manually and automatically making it easier to achieve global scale

Code is ran in a fully-managed production environment with automatic OS and framework patching

:::

Code-based Web Apps

:::::::::::::: {.columns} ::: {.column width=”50%”}

::: ::: {.column width=”50%”}

Deploy code to Web Apps

::: ::::::::::::::

::: notes

This was the original way to deploy to App Service Web Apps (using Kudu)

When you deploy code, Oryx will detect the framework using built-in rules, and then perform a build

It’s trivial to configure automated deployment processes and deploy to slots other than your production slot

:::

Container-based Web Apps

:::::::::::::: {.columns} ::: {.column width=”50%”}

::: ::: {.column width=”50%”}

Use Docker containers with Web Apps

::: ::::::::::::::

::: notes

If you already are invested in Docker, this is the far easier path

You can isolate your application and dependencies from the software stack running in the Web App

This is a great way to try out new programming frameworks prior to their typical availability

This is also a great way to lock your application to a specific older framework

:::

Demo: Deploying an App Service Web App from a container

::: notes

  1. Use this link to generate a new GitHub repository using the github.com/msusdev/example-next-web-app template: github.com/msusdev/example-next-web-app/generate.
  2. Use the Azure Portal to open the “Create Web App” wizard.
  3. In the Basics tab, perform the following actions:
    1. Select any subscription, region, and resource group.
    2. Give you web app an easily memorized unique name.
    3. In the Publish section, select Docker Container.
    4. In the Operating System section, select Linux.
    5. Select a region that you will use for both demos in this presentation.
    6. Leave the App Service Plan set to it’s default option.
    7. Select Next: Docker.
  4. In the Docker tab, perform the following actions:
    1. In the Options list, select Single Container.
    2. In the Image Source list, select Docker Hub.
    3. In the Access Type list, select Public.
    4. In the Image and tag box, enter msusdev/webnext:20
    5. Select Review + create.
  5. In the Review + create tab, select Create to deploy the new Web App.
  6. Wait for the deployment process to finish, then select Go to resource.
  7. In the resource blade, select Browse.
  8. Observe the deployed web application.

:::

That’s cool, how about the new Azure Static Web Apps❓

Azure Static Web Apps

:::::::::::::: {.columns} ::: {.column width=”50%”}

Build and host static web applications

::: ::: {.column width=”50%”}

::: ::::::::::::::

::: notes

New service focused on the specific needs of JavaScript-based static web applications

Ideal for frameworks like Angular, React, Svelte, Vue, or Blazor

Typically, these frameworks often required a server-side app to serve content

Build process is powered by Oryx

Integrated authentication with flexible roles

API endpoints are serverless and powered by Azure Functions

:::

Static Web App breakdown

::: notes

Workflow modeled after common daily workflow for developers

Workflow focused on typical GitHub interactions

Upon creation, Azure Static Web Apps creates a GitHub Actions workflow

YAML file is added to .github/workflows folder

Application is built and deployed to Azure on commits and pull requests to watched branches

:::

Github Action

:::::::::::::: {.columns} ::: {.column width=”50%”}

Static Web Apps Deploy GitHub Action

::: ::: {.column width=”50%”}

::: ::::::::::::::

Example Github Actions workflow YAML

- uses: "Azure/static-web-apps-deploy@v0.0.1-preview"
  with:
    azure_static_web_apps_api_token: "$"
    repo_token: "$"
    action: "upload"
    app_location: "/"
    api_location: "api"
    app_artifact_location: "out"

::: notes

GitHub action is still in preview

Action uses a token that’s automatically saved to the repo to connect to Static Web Apps

Action specifies the location of the build artifacts, application root, and API

:::

Demo: Deploying an Azure Static Web App from code on GitHub

::: notes

  1. Use the Azure Portal to open the “Create Static Web App (Preview)” wizard.
  2. In the Basics tab, perform the following actions:
    1. Select any subscription.
    2. Select the same resource group as you used for the previous demo.
    3. Give you static web app an easily memorized unique name.
    4. Select any region.
    5. Sign in to GitHub using the same account that you use to generate your new repository. Authorize permission to access your account and organization[s].
    6. Select the Organization and Repository list options that match where you generated your new repo.
    7. Select the main branch.
    8. In the Build Presets list, select Custom.
    9. In the App location box, enter /.
    10. In the Api location box, enter api.
    11. In the App artifact location box, enter out.
    12. Select Review + create.
  3. In the Review + create tab, select Create to deploy the new Web App.
  4. Wait for the deployment process to finish, then select Go to resource.
  5. In the resource blade, select Browse.
  6. Observe the deployed web application.

:::

Wrapping up

Review

App Service

Static Web Apps

::: notes

Emphasize the difference between Web Apps and Static Web Apps

Talk about some of the things you saw in the demos

:::

Deck

Links

::: notes

The deck is open-source and attendees are welcome to view the deck to get images, links, and other content they may have missed

:::

This site is open source. Improve this page.