Deploy .NET Blazor WebAssembly Application to Amazon Amplify

{"value":"[AWS Amplify](https://aws.amazon.com/amplify/) is a set of purpose-built tools and features that lets developers quickly and easily build CI/CD Pipeline for full-stack applications on AWS.\n\nBlazor can run your client-side C# code directly in the browser, using WebAssembly. It is a .NET running on WebAssembly, and you can reuse code and libraries from the server-side parts of your application.\n\n##### **Overview of solution**\n\nIn this post, you will deploy a Blazor WebAssembly Application from git repository to [AWS Amplify](https://aws.amazon.com/amplify/). We will use .NET 6. to create a Blazor WebAssembly on local machine using [AWS Command Line Interface (AWS CLI)](https://aws.amazon.com/cli/), use GitHub as a git repository, and deploy the application to Amplify.\n\nFollow this post on: Windows 10, Windows 11/Ubuntu 20.04 LTS/macOS 10.15 “Catalina”, macOS 11.0 “Big Sur”, or macOS 12.0 “Monterey”.\n\n\n\n##### **Walkthrough**\n\nWe will walk through the following steps:\n\n- Create Blazor WebAssembly application on our local machine using AWS CLI\n- Test /run the application locally\n- Create a new repository on Github\n- Create a local repository\n- Setup Amplify\n- Test /run the application on AWS\n\n##### **Prerequisites**\n\nFor this walkthrough, you should have the following prerequisites:\n\n- AWS Account – [How to create an AWS account](https://aws.amazon.com/free)\n- Dotnet version on Windows/Linux/MacOS – [How to install Dotnet version](https://docs.microsoft.com/en-us/dotnet/core/install/)\n- Git CLI on Windows/Linux/MacOS – [How to install Git CLI](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git)\n- Github account – [How to create a github account](https://docs.microsoft.com/en-us/contribute/get-started-setup-github)\n\nLet’s start creating a Blazor WebAssembly application on our local machine using CLI:\n\n1. Open the command line interface\n2. Create a directory for your application running the following command:\n\n```mkdir BlazorWebApp```\n\n1.Change to the application directory running the following command:\n\n```cd BlazorWebApp```\n\n1.Create the Blazor WebAssembly Application running the following command:\n\n```dotnet new blazorwasm```\n\n1.Run the application:\n\n```dotnet run```\n\n1.Copy the URL after “Now listening on:”, and paste it on your browser.\nExample: http://localhost:5152 (port might be different in your CLI)\n\n\n\n1. After testing your application, go back to the terminal and press <ctrl> + c to stop the application.\\n2. Create a gitignore for your project running the following command:\\n\\n```\\ndotnet new gitignore\\n```\\n\\n1. Create a file called “amplify.yml” in the root directory of your application. The name must be exactly “amplify.yml”. This file contains the commands to build your application used by AWS CodeBuild.\\n2. Copy and paste the following code to the file amplify.yml.\\n\\n```\\nversion: 1\\n frontend:\\n phases:\\n preBuild:\\n commands:\\n - curl -sSL https://dot.net/v1/dotnet-install.sh > dotnet-install.sh\\n - chmod +x *.sh\\n - ./dotnet-install.sh -c 6.0 -InstallDir ./dotnet6\\n - ./dotnet6/dotnet --version\\n build:\\n commands:\\n - ./dotnet6/dotnet publish -c Release -o release\\n artifacts:\\n baseDirectory: /release/wwwroot\\n files:\\n - '**/*'\\n cache:\\n paths: []\\n```\\n\\n**Create a new repository on Github:**\\n\\n1.Log in to the Github website and create a new repository:\\n\\n\\n\\n1.Type a name for your repository, choose private, and add a read.me file as shown in the following screenshot:\\n\\n\\n\\n**Create a local repository for your application:**\\n\\n1.On the root folder of your application enter the following commands. Make sure that you have configured git CLI with email and user\\n\\n```\\ngit add --all\\n git commit -m “first commit”\\n git branch -M main\\n git remote add origin https://github.com/perinei/blazorToAmplify.git\\n (replace red text with your repo)\\n for ssh authentication use:\\n git remote add origin git@github.com: perinei/blazorToAmplify.git\\n git push -u origin main \\n```\\n\\n##### **Setup Amplify:**\\n\\n1. Log in to the AWS account\\n2. Go to AWS Amplify Service\\n3. On the left panel, choose All apps\\n4. Select New app as per the following screen\\n5. Select Host Web App from the dropdown list\\n\\n\\n\\n1.Choose Github\\n\\n\\n\\n1. Select Continue. If you are still logged in on your Github account, then the page will automatically authenticate you, otherwise select the Authenticate Button\\n2. Choose your repository: in my case, perinei/bazortoamplify\\n3. Branch: main\\n4. Select next\\n\\n\\n\\n1. Give your app a name\\n2. amplify.yml will be automatically detected and will be used to build the application on AWS\\n\\n\\n\\n1. Select Next to review the configuration\\n2. Select Save and Deploy\\n3. Amplify will provision, build, deploy, and verify the application\\n\\n\\n\\n1. When the process is complete, select the URL of your application and test the application.\\n\\n\\n\\n1. Congratulations! Your Blazor WebAssembly is running on Amplify.\\n\\n\\n\\n##### **Cleaning up**\\n\\nTo avoid incurring future charges, delete the resources. On Amplify, choose your app name on the left panel, select action, and then delete app.\\n\\n##### **Conclusion**\\n\\nCongratulations, you deployed your first Blazor Webassembly Application to AWS Amplify.\\n\\nIn this blog post you learned how to easily build a full CI/CD pipeline for a Blazor WebAssembly using the AWS amplify. It was only necessary to specify the repository and the commands build the application on the file amplify.yml that should be include on the root folder of repository. You can also easily add a custom domain to your application. Visit Set up custom domains on AWS Amplify Hosting\\n\\nAWS can help you to migrate .NET applications to the Cloud. [Visit .NET on AWS.](https://aws.amazon.com/developer/language/net/)\\n\\nThe [.NET on AWS YouTube playlist](https://www.youtube.com/playlist?list=PLhr1KZpdzukcZEpM1wap9dkr3zgTRdRrD) is the place to get the latest .NET on AWS videos, including AWS re:Invent sessions.\\n\\nTo learn more about how to amplify.yml to build your application, visit [Configuring build settings – AWS Amplify.](https://docs.aws.amazon.com/amplify/latest/userguide/build-settings.html)\\n\\n\\n\\n##### **Adilson Perinei**\\nAdilson Perinei is an AWS Consultant with six AWS certifications and loves to develop serverless applications using AWS infrastructure..","render":"<p><a href=\\"https://aws.amazon.com/amplify/\\" target=\\"_blank\\">AWS Amplify</a> is a set of purpose-built tools and features that lets developers quickly and easily build CI/CD Pipeline for full-stack applications on AWS.</p>\\n<p>Blazor can run your client-side C# code directly in the browser, using WebAssembly. It is a .NET running on WebAssembly, and you can reuse code and libraries from the server-side parts of your application.</p>\n<h5><a id=\\"Overview_of_solution_4\\"></a><strong>Overview of solution</strong></h5>\\n<p>In this post, you will deploy a Blazor WebAssembly Application from git repository to <a href=\\"https://aws.amazon.com/amplify/\\" target=\\"_blank\\">AWS Amplify</a>. We will use .NET 6. to create a Blazor WebAssembly on local machine using <a href=\\"https://aws.amazon.com/cli/\\" target=\\"_blank\\">AWS Command Line Interface (AWS CLI)</a>, use GitHub as a git repository, and deploy the application to Amplify.</p>\\n<p>Follow this post on: Windows 10, Windows 11/Ubuntu 20.04 LTS/macOS 10.15 “Catalina”, macOS 11.0 “Big Sur”, or macOS 12.0 “Monterey”.</p>\n<p><img src=\\"https://dev-media.amazoncloud.cn/70ed483c04354cbebcaf9cb5cfe48f49_image.png\\" alt=\\"image.png\\" /></p>\n<h5><a id=\\"Walkthrough_12\\"></a><strong>Walkthrough</strong></h5>\\n<p>We will walk through the following steps:</p>\n<ul>\\n<li>Create Blazor WebAssembly application on our local machine using AWS CLI</li>\n<li>Test /run the application locally</li>\n<li>Create a new repository on Github</li>\n<li>Create a local repository</li>\n<li>Setup Amplify</li>\n<li>Test /run the application on AWS</li>\n</ul>\\n<h5><a id=\\"Prerequisites_23\\"></a><strong>Prerequisites</strong></h5>\\n<p>For this walkthrough, you should have the following prerequisites:</p>\n<ul>\\n<li>AWS Account – <a href=\\"https://aws.amazon.com/free\\" target=\\"_blank\\">How to create an AWS account</a></li>\\n<li>Dotnet version on Windows/Linux/MacOS – <a href=\\"https://docs.microsoft.com/en-us/dotnet/core/install/\\" target=\\"_blank\\">How to install Dotnet version</a></li>\\n<li>Git CLI on Windows/Linux/MacOS – <a href=\\"https://git-scm.com/book/en/v2/Getting-Started-Installing-Git\\" target=\\"_blank\\">How to install Git CLI</a></li>\\n<li>Github account – <a href=\\"https://docs.microsoft.com/en-us/contribute/get-started-setup-github\\" target=\\"_blank\\">How to create a github account</a></li>\\n</ul>\n<p>Let’s start creating a Blazor WebAssembly application on our local machine using CLI:</p>\n<ol>\\n<li>Open the command line interface</li>\n<li>Create a directory for your application running the following command:</li>\n</ol>\\n<p><code>mkdir BlazorWebApp</code></p>\\n<p>1.Change to the application directory running the following command:</p>\n<p><code>cd BlazorWebApp</code></p>\\n<p>1.Create the Blazor WebAssembly Application running the following command:</p>\n<p><code>dotnet new blazorwasm</code></p>\\n<p>1.Run the application:</p>\n<p><code>dotnet run</code></p>\\n<p>1.Copy the URL after “Now listening on:”, and paste it on your browser.<br />\\nExample: http://localhost:5152 (port might be different in your CLI)</p>\n<p><img src=\\"https://dev-media.amazoncloud.cn/99ef39800bc444ef964c11a156386de5_image.png\\" alt=\\"image.png\\" /></p>\n<ol>\\n<li>After testing your application, go back to the terminal and press &lt;ctrl&gt; + c to stop the application.</li>\n<li>Create a gitignore for your project running the following command:</li>\n</ol>\\n<pre><code class=\\"lang-\\">dotnet new gitignore\\n</code></pre>\\n<ol>\\n<li>Create a file called “amplify.yml” in the root directory of your application. The name must be exactly “amplify.yml”. This file contains the commands to build your application used by AWS CodeBuild.</li>\n<li>Copy and paste the following code to the file amplify.yml.</li>\n</ol>\\n<pre><code class=\\"lang-\\">version: 1\\n frontend:\\n phases:\\n preBuild:\\n commands:\\n - curl -sSL https://dot.net/v1/dotnet-install.sh &gt; dotnet-install.sh\\n - chmod +x *.sh\\n - ./dotnet-install.sh -c 6.0 -InstallDir ./dotnet6\\n - ./dotnet6/dotnet --version\\n build:\\n commands:\\n - ./dotnet6/dotnet publish -c Release -o release\\n artifacts:\\n baseDirectory: /release/wwwroot\\n files:\\n - '**/*'\\n cache:\\n paths: []\\n</code></pre>\\n<p><strong>Create a new repository on Github:</strong></p>\\n<p>1.Log in to the Github website and create a new repository:</p>\n<p><img src=\\"https://dev-media.amazoncloud.cn/1e13a2ef9ea0445aa9e63ca412917c71_image.png\\" alt=\\"image.png\\" /></p>\n<p>1.Type a name for your repository, choose private, and add a read.me file as shown in the following screenshot:</p>\n<p><img src=\\"https://dev-media.amazoncloud.cn/05d943349e604872a974d53697bf46ad_image.png\\" alt=\\"image.png\\" /></p>\n<p><strong>Create a local repository for your application:</strong></p>\\n<p>1.On the root folder of your application enter the following commands. Make sure that you have configured git CLI with email and user</p>\n<pre><code class=\\"lang-\\">git add --all\\n git commit -m “first commit”\\n git branch -M main\\n git remote add origin https://github.com/perinei/blazorToAmplify.git\\n (replace red text with your repo)\\n for ssh authentication use:\\n git remote add origin git@github.com: perinei/blazorToAmplify.git\\n git push -u origin main \\n</code></pre>\\n<h5><a id=\\"Setup_Amplify_112\\"></a><strong>Setup Amplify:</strong></h5>\\n<ol>\\n<li>Log in to the AWS account</li>\n<li>Go to AWS Amplify Service</li>\n<li>On the left panel, choose All apps</li>\n<li>Select New app as per the following screen</li>\n<li>Select Host Web App from the dropdown list</li>\n</ol>\\n<p><img src=\\"https://dev-media.amazoncloud.cn/e5ca495acdcf4c4d8c5574427517fcbc_image.png\\" alt=\\"image.png\\" /></p>\n<p>1.Choose Github</p>\n<p><img src=\\"https://dev-media.amazoncloud.cn/38d445305e914ff48a7e071432362aec_image.png\\" alt=\\"image.png\\" /></p>\n<ol>\\n<li>Select Continue. If you are still logged in on your Github account, then the page will automatically authenticate you, otherwise select the Authenticate Button</li>\n<li>Choose your repository: in my case, perinei/bazortoamplify</li>\n<li>Branch: main</li>\n<li>Select next</li>\n</ol>\\n<p><img src=\\"https://dev-media.amazoncloud.cn/0552d9b1d1804bce9d2dec0d975db114_image.png\\" alt=\\"image.png\\" /></p>\n<ol>\\n<li>Give your app a name</li>\n<li>amplify.yml will be automatically detected and will be used to build the application on AWS</li>\n</ol>\\n<p><img src=\\"https://dev-media.amazoncloud.cn/ddb00e368c8b466bbf96e803bee206ef_image.png\\" alt=\\"image.png\\" /></p>\n<ol>\\n<li>Select Next to review the configuration</li>\n<li>Select Save and Deploy</li>\n<li>Amplify will provision, build, deploy, and verify the application</li>\n</ol>\\n<p><img src=\\"https://dev-media.amazoncloud.cn/688d9f58b1644abeb909239315170031_image.png\\" alt=\\"image.png\\" /></p>\n<ol>\\n<li>When the process is complete, select the URL of your application and test the application.</li>\n</ol>\\n<p><img src=\\"https://dev-media.amazoncloud.cn/009207a683bf4b638c87226c7ed6167d_image.png\\" alt=\\"image.png\\" /></p>\n<ol>\\n<li>Congratulations! Your Blazor WebAssembly is running on Amplify.</li>\n</ol>\\n<p><img src=\\"https://dev-media.amazoncloud.cn/af0da34dd43c4a5799f50d54f8ed32d7_image.png\\" alt=\\"image.png\\" /></p>\n<h5><a id=\\"Cleaning_up_152\\"></a><strong>Cleaning up</strong></h5>\\n<p>To avoid incurring future charges, delete the resources. On Amplify, choose your app name on the left panel, select action, and then delete app.</p>\n<h5><a id=\\"Conclusion_156\\"></a><strong>Conclusion</strong></h5>\\n<p>Congratulations, you deployed your first Blazor Webassembly Application to AWS Amplify.</p>\n<p>In this blog post you learned how to easily build a full CI/CD pipeline for a Blazor WebAssembly using the AWS amplify. It was only necessary to specify the repository and the commands build the application on the file amplify.yml that should be include on the root folder of repository. You can also easily add a custom domain to your application. Visit Set up custom domains on AWS Amplify Hosting</p>\n<p>AWS can help you to migrate .NET applications to the Cloud. <a href=\\"https://aws.amazon.com/developer/language/net/\\" target=\\"_blank\\">Visit .NET on AWS.</a></p>\\n<p>The <a href=\\"https://www.youtube.com/playlist?list=PLhr1KZpdzukcZEpM1wap9dkr3zgTRdRrD\\" target=\\"_blank\\">.NET on AWS YouTube playlist</a> is the place to get the latest .NET on AWS videos, including AWS re:Invent sessions.</p>\\n<p>To learn more about how to amplify.yml to build your application, visit <a href=\\"https://docs.aws.amazon.com/amplify/latest/userguide/build-settings.html\\" target=\\"_blank\\">Configuring build settings – AWS Amplify.</a></p>\\n<p><img src=\\"https://dev-media.amazoncloud.cn/7cff42e31d644cbbb1326ee93540bfb5_image.png\\" alt=\\"image.png\\" /></p>\n<h5><a id=\\"Adilson_Perinei_170\\"></a><strong>Adilson Perinei</strong></h5>\\n<p>Adilson Perinei is an AWS Consultant with six AWS certifications and loves to develop serverless applications using AWS infrastructure…</p>\n"}