I have been spending some time working with Azure static websites and it got me thinking I should do a post about them. The more I have been working with the Azure static websites, the more I like them.
So I decided to dust off an old post, Static Bootstrap website converted to Blazor. In this old post, I took a common Bootstrap-themed static website and "Blazorized" it.
In the original project, I created components, removed as much of the javascript as I could, and used Blazor. This was done back in Nov of 2019 as a server-side application. This was right around the time Blazor server-side went GA and the Web Assembly was still at least 6 months left to go in development.
For this post, I will be creating a Blazor Web Assembly version of the project that is built for Azure Static Websites and that actually works. I hope to document as many of the changes as I can.
Once I fired up the old project, the project did not even compile anymore. Not too surprising, but still disappointing. So I have some work just to get it to compile.
For this project, here are the steps I will be following:
1. Create a New Azure Website Web Assembly project
2. Migrate the code from the old project over to the new project
3. Run and Test the basic project
4. Change from using services to using API functions
5. Check my changes in Git
6. Set Up an Azure Website
7. Deploy the new website and test
8. Add a custom domain
Create a New Azure Website Web Assembly project
Since this will be a web assembly project for the Azure Static Website we will need to use a different project template. This is surprisingly easy to do now with GitHub. You can go to the Static web dev repro and they have it set up to use Blazor-stater as a template. It holds the solution layout that is needed. It will even create a new repro in your account.
The one downside is you can not rename the solution until after it is created.
1. Go to staticwebdev/blaror-starter in Github
a. This is the project template we will be using.
b. The project layout is made to work very easily with the Azure static website
c. There are 3 projects
i. API => holds the functions we will be using
ii. Client => holds the web assembly code
iii. Share => holds the transfer modals we will be sharing
2. Click on "Use this template"
3. Enter the name of the new project in YOUR GitHub account
4. Click "Create repository from template". That's it.
You now have your new web assembly project in GitHub. You can access it just like any other GitHub project you have.
Migrate the code from the old project over to the new project
This is where the fun starts, sort of. The original project is very old and a lot of work is needed to update it to the most recent packages.
1. Copy over the components
When I created the first project I broke each section of the website into components such as header, footer, contact us, portfolio, etc. For this step, I just copy over the component files
Make sure to include the CSS and images.
2. Update Index.razor
I simply replaced the HTML code in the default index file with the HTML from the project
3. Update Index.html
I needed to remove the default style sheets and links and add the links for the project files.
Since there still is no support for clicking on anchor tags within the same page, we will need to use the JavaScript workaround. I moved the javascript code from the js file and just put it in a script block within the index.html file.
4. Remove old projects
In the original project, I included the actual project for both the Blazored Modal and Blazored Toast. For the new project, I am going to just use the NuGet packages. The NuGet packages were not available back when I did the original project.
This ended up being more work than I had expected. Both components had changed. The modal is more so than the toast component.
For the toast component, I just had to change the icon information in the main layout.
For the modal component, it totally changes. It changed to using cascading parameters and more generics.
With these changes, both components are a lot better and easier to use. See the link at the bottom for more information.
Run and Test the basic project
For this step, simply compile and run the application. Make sure the following works as designed:
1. The page anchor tags work when clicked.
a. this is the nav menu in the upper right of the app
b. When clicked, they should take you to the reference on the same page
2. Porifilo details display when clicking on the image.
3. Validation on the contact us will work.
4. All sections are displayed
a. Header
b. Nav menu
c. Footer
d. Portifilo list
Change from using services to using API functions
This is the meat of what we want to do to take advantage of the changes. We will set up several functions in the API to replace the portfolio and contact me services methods.
1. Portifilo service
a. We add a function for each method in the service
b. Each function is a "Get" that returns a modal of data
2. Contact Me Service
a. This function is actually a post that requires a little bit more work.
b. We will need to get the data modal pass on the API call from the body of the request.
dynamic person = await req.Content.ReadAsAsync<ContactMeModel>();
c. We changed from simply saving the contact information to the file system to using SendGrid to send the request to a company employee.
Check my changes in Git
This is the easiest step. Just check your changes to Git once you are sure everything is working correctly.
Set Up an Azure Website
Now the real fun part!
You will need an Azure account, I don't want to sound like a sales guy, but you can get a free one with a ton of services
[here].
Once you have your account set up the Static Website:
1. Go to resources and search for Static website
2. Click the "Create" button
3. Fill in the information about the site
4. Click the "Sign in with GitHub"
5. Authorize Azure to access your repository
6. Fill out the repro information
a. You select the repro name
b. You select what branch to use
c. For the build presets you need to select "Blazor" so the service knows it is a Blazor application
d. App Location: If you remember the structure of the new project template, this is where the web assembly is located. The service needs to know that.
e. Output location: you put in wwwroot. This is where your index.html file is located.
7. Click the "Create" button
8. This process will actually create a GitHub action for your repro that will run each time you check code in.
9. Once the service has created the website, click the "Go to resource" button
a. Notice the message stating your content is not ready. This is because Github is building it.
10. Go to your GitHub repository => Actions tab
a. Notice the yellow indicator. That shows the deployment is building.
11. Wait until you get the green indicator. That means the build is done and deployed.
12. Go to the website, and notice the funny name. You should be able to run and test from here.
Add a custom domain
So you most likely noticed that during the setup Azure gave my website a rather funny name, "icy-dune-011435a1e.azurestaticapps.net". Most likely you will not want that type of name for your website. Static Websites make it very easy to add your own custom domain, right from the Azure portal.
Select your Static website in the portal. Using the left side menu, click on "Custom domains".
On the left, you can see what domains are already assigned if any. Click the "Add" button to set up your custom domain. Then follow the prompts.
1. Enter your custom domain
2. Click the "Next" button
3. Depending on the service provider of your domain, some of the steps from here may vary. You will basically create a CNAME record in your DNS service that points to your static website. It seems like each provider, Google, Go, Daddy, NameCheap, etc. does it just a little differently in their management tools.
Why choose Azure Static Website over just using Blob storage
I have done both of these deployment options and I have to admit, I like the static websites better. Currently, both options are free as well. But with Static Websites in "Preview", they could start charging.
Both can support custom domains and SSL certs. With static websites, you have Github actions created for you to help with your CI/CD. You can do the same thing with an application in blog storage with a separate repro for the published files, but that seems like extra work.
Summary
This project turned out to be more work than I had accounted for. Resulting in a much longer blog post than normal. I do believe it was worth it. I have several other web assembly projects I plan on deploying via Azure static websites.
NuGet Packages Used
This comment has been removed by a blog administrator.
ReplyDeleteGreat article. Yes, please keep updating and thanks a million for this
ReplyDeleteYes, thanks for all your useful and helpful posts!
ReplyDelete