App Platform is a Platform-as-a-Service (PaaS) offering that allows developers to publish code directly to DigitalOcean servers without worrying about the underlying infrastructure.You can host multiple workloads using App Platform, such as services (workloads publicly accessible via HTTP), workers (workloads not publicly accessible via HTTP), and Static Sites for hosting static web content. The App Platform can pull down your code from multiple Git providers and docker registries, then build your code on their build platform, and upload the resulting static files to their static site service. This guide will walk you through these high-level steps: 1. Create Blazor WebAssembly project 2. Commit the project to a Git repository 3. Create a new GitHub project and push the Git repository to GitHub 4. Create a new DigitalOcean App using the DigitalOcean Command Line Interface 5. Build Blazor WASM using Docker **Prerequisites**: - .NET CLI - Git - GitHub account - DigitalOcean account - DigitalOcean command-line interface (doctl) (installation instructions)
Source: DigitalOcean
You can find the source code for this guide on GitHub.
## Create Blazor WebAssembly project {#create-aspnet-core-blazor-webassembly-project no-anchor} Run the following commands to create a new Blazor WASM project:mkdir BlazorWasmDigitalOcean cd BlazorWasmDigitalOcean dotnet new blazorwasmTo give your application a try, execute `dotnet run` and browse to the URL in the output (probably [https://localhost:5001](https://localhost:5001/)):
dotnet run # Building... # info: Microsoft.Hosting.Lifetime[0] # Now listening on: https://localhost:5001 # info: Microsoft.Hosting.Lifetime[0] # Now listening on: http://localhost:5000 # info: Microsoft.Hosting.Lifetime[0] # Application started. Press Ctrl+C to shut down. # info: Microsoft.Hosting.Lifetime[0] # Hosting environment: Development # info: Microsoft.Hosting.Lifetime[0] # Content root path: C:\Users\niels\source\repos\BlazorWasmDigitalOcean # info: Microsoft.Hosting.Lifetime[0] # Application is shutting down...Optional: You can use the `dotnet publish` command to publish the project and verify the output:
dotnet publish # Microsoft (R) Build Engine version 16.8.0+126527ff1 for .NET # Copyright (C) Microsoft Corporation. All rights reserved. # # Determining projects to restore... # All projects are up-to-date for restore. # BlazorWasmDigitalOcean -> C:\Users\niels\source\repos\BlazorWasmDigitalOcean\bin\Debug\net5.0\BlazorWasmDigitalOcean.dll # BlazorWasmDigitalOcean (Blazor output) -> C:\Users\niels\source\repos\BlazorWasmDigitalOcean\bin\Debug\net5.0\wwwroot Optimizing assemblies for size, which may change the behavior of the app. Be sure to test after publishing. See: https://aka.ms/dotnet-illink # Compressing Blazor WebAssembly publish artifacts. This may take a while... # BlazorWasmDigitalOcean -> C:\Users\niels\source\repos\BlazorWasmDigitalOcean\bin\Debug\net5.0\publish\In the publish directory, you will find a web.config file and a wwwroot folder. The config file helps you host your application in IIS, but you don't need that file for static site hosts. **Everything you need will be inside of the wwwroot folder. The wwwroot folder contains the index.html, CSS, JS, and DLL files necessary to run the Blazor application**. ## Push Blazor project to GitHub {#push-blazor-project-to-github no-anchor} For this walkthrough, your application source code must be inside of a GitHub repository.
# add the gitignore file tailored for dotnet applications, this will ignore bin/obj and many other non-source code files dotnet new gitignore # create the git repository git init # track all files that are not ignore by .gitignore git add --all # commit all changes to the repository git commit -m "Initial commit"Create a new GitHub repository (instructions) and copy the commands to "push an existing repository from the command line" from the empty GitHub repository page, here's what it should look like but with a different URL:
git remote add origin https://github.com/Swimburger/BlazorWasmDigitalOcean.git git push -u origin main## Add Dockerfile to build Blazor WASM {#add-dockerfile-to-build-blazor-wasm} When you create a static site using the App Platform, you can provide a build command which will be used to build your static site before deploying it to the static site host.
FROM mcr.microsoft.com/dotnet/sdk:5.0 WORKDIR /app COPY BlazorWasmDigitalOcean.csproj BlazorWasmDigitalOcean.csproj RUN dotnet restore BlazorWasmDigitalOcean.csproj COPY . . RUN dotnet publish -c Release -o /output --no-restore --nologoFeel free to learn more about [docker and .NET at Microsoft's documentation](https://docs.microsoft.com/en-us/dotnet/core/docker/introduction), but you can keep going without knowing docker or having docker installed locally. Essentially, this docker file does the following: - A container is created from the .NET 5 SDK image provided by Microsoft. All subsequent instructions will be run inside a container containing the .NET 5 SDK. - Change the current working directory in the container to '*/app*'. - Copy the csproj-file to the container so you can restore the packages listed in the file - Run the `dotnet restore` command to restore all packages - Copy all files from the current folder '.' outside of the container to the working directory inside the container. This will copy all your source code to the '*/app*' folder inside the container. - Run the `dotnet publish` command with the following arguments: - **\-c**: Use the 'Release' configuration which will optimize the Blazor project. - **\-o**: Put the publish output in the '*/output*' folder - **\--no-restore**: Skip the restore step since the packages have been restored earlier. - **\--nologo**: Removes some unneeded output
You can restore, build, and publish all in a single command, but to optimize for Docker's caching features, the restore has been separated from the publish command.
The App Platform will look for the dockerfile in your source code, so you need to commit the file to Git and push the change to GitHub:git add --all git commit -m "Add dockerfile.build" git pushNext up, you'll create a static site app using doctl and App Platform YAML configuration. ## Create the DigitalOcean App {#create-the-digitalocean-app} Make sure you have installed the DigitalOcean command-line interface (doctl) ([installation instructions](https://www.digitalocean.com/docs/apis-clis/doctl/how-to/install/)) and authenticate using the `doctl auth init` command if you haven't already. Create a YAML file at '*.do/app.yaml*' with the following content:
name: swimburger-blazor-wasm
static_sites:
- name: site
github:
repo: Swimburger/BlazorWasmDigitalOcean
branch: main
deploy_on_push: true
dockerfile_path: Dockerfile.build
output_dir: /output/wwwroot
index_document: index.html
catchall_document: index.html
Update the properties in the YAML file:
- name: Enter a name that is unique across your account. Use your username suffixed with '-blazor-wasm'.
- static\_sites
- name: Enter a name that is unique across the different components in this file. You can have multiple "components" such as workers, services, static\_sites, etc.doctl app create --spec .do/app.yamlNavigate to the [Apps section in DigitalOcean](https://cloud.digitalocean.com/apps) and click on your new application.