Static Bootstrap website to Blazor - Updated


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




Comments

  1. bestdesigninfotechMay 3, 2021 at 5:24 AM

    This comment has been removed by a blog administrator.

    ReplyDelete
  2. AnonymousJune 1, 2021 at 3:31 AM

    Great article. Yes, please keep updating and thanks a million for this

    ReplyDelete
  3. Cary Grant AndersonSeptember 4, 2021 at 4:41 PM

    Yes, thanks for all your useful and helpful posts!

    ReplyDelete

Post a Comment

Popular posts from this blog

Yes, Blazor Server can scale!

Image
From the very beginning of the release of Blazor Server naysayers have incorrectly stated that Blazor Server can not scale.  They usually state that the limit is 5,000 concurrent users. There are several misconceptions and wrong assumptions about their statement.  Let's break it down and get a better understanding of Blazor server-side scaling. What is the "limit" for users When Microsoft talks about the need to scale an application, what they are saying is that when a normal response for any concurrent user is taking longer than 200 ms, the system is not performant and needs to scale. We will accept that definition: If any normal user response is taking longer than 200 ms, the system needs to scale for concurrent users. By a normal response, we are referring to a page get, a post, etc.  Large database access requests would not be included in this measurement. What is scaling There are 2 common ways to scale, scale, out horizontally, and scale-up, up vertically. In our di...
Read more

Blazor - Cool Blur Loading Page

Image
  I was working on a project and wanted an original way of showing the user the application was loading besides using the normal "Loading...." text.  I came across a website page and thought I could refactor that into what I was looking for. When my application starts, it displays a full-screen image with a count down while the page loads.  As a special effect, I want to unblur the image the closer it gets to the applicaiton finishing loading.  Once the teh count down is done, we pause for 1 sec, for effect, then proceed to the application.  I think it turned out pretty cool.  See the demo here . I used the server side Blazor project template in my example, but the code should work on any Blazor template. Template changes 1. Rename the original Index.razor page to "home".  Besure to change the routing at the top of the page as well.      @page "/home" 2. Create a new Index.razor page     a. Add routing      ...
Read more

Blazor new and improved Search Box

 Back in March, I posted a new Blazor data grid with a search box ( see post ).  Since then I have found a new and improved search box that I wanted to implement.  The search part is implemented the same.  What I added was the ability for the user to narrow down the search by selecting which field they wanted to search on.  This will help the user find what they are looking for and in a large collection, the search will end up being faster. The goal of making the change was to make the search box a new component and have it handle the UI functionality part. Prep Work Here is the prep work I did before adding the search box: Started with the source code from the post listed above. Upgraded the project to .Net 5 Upgraded the Nuget packages that were out of date. Ensured every build and run. Change to a Component I wanted to create a component for the search box so I could use it in other applications.   1. Create a Folder under UIControls called "SearchB...
Read more