Intro To Azure Static Web Apps - Free Hosting, SSL, Global Distribution, and More

[@soucianceeqdamrashti8175]

The coolest part besides the service itself is the built-in CI/CD workflow. To have that created automatically is just a nice feature of the dev workflow. Awesome!

[@tomthelestaff-iamtimcorey7597]

Thanks for watching and being an engaged part of Tim's community.

[@mouhcineoussama5532]

Thank you so much man for your unconditional sharing, and making this world a better World. Best mentor ever ❤️❤️

[@IAmTimCorey]

You are welcome.

[@markhartkemeyer8259]

Nice video! I just set up my own portfolio site using this.

[@IAmTimCorey]

Awesome!

[@PomboRuanito]

Excelent video as always Tim, congratulations and thank you for sharing your knowledge !!!

[@IAmTimCorey]

You are welcome.

[@pascalsegoete1706]

This the best tutorial Keep up the good work Tim

[@IAmTimCorey]

Thank you!

[@rahulhadgal]

Wonderful video and fantastic service by Microsoft Azure!

[@IAmTimCorey]

Thank you!

[@ultroai]

Great video! A lot of useful topics here. More Azure, please

[@IAmTimCorey]

Thanks for your vote.

[@iliyanangelov]

Amazing video yet again!

[@IAmTimCorey]

Thank you!

[@vahidshoeibynia5784]

So can we use "static web app" for frontend and "web app"/"virtual machine" for backend? and can we call API in the frontend that is hosted in "static web app"?

[@golodiassaid4879]

Would have been game changer if for example they enable receiving emails or notification so that visitors reach out to me. Having said that, this is awesome service and thanks azure for providing

[@IAmTimCorey]

The only problem with adding those types of features is that you start to expand the feature set and increase the complexity. Sometimes the best thing you can do is not add a feature. In this case, there are a lot of third-party services you could use to get messages from your site.

[@axelgrefslie97]

Great Video! More Azure please

[@IAmTimCorey]

More is coming. I also have a full course on Azure: www.iamtimcorey.com/p/getting-started-with-azure

[@SoftwareTechnicalMentor]

Thank you for your kind workm I really appreciate your work. Keep uploading more stuff

[@tomthelestaff-iamtimcorey7597]

Tim has a passion to help folks so I know he plans for the videos to keep coming! Sales of his courses is what funds these videos.

[@NavySturmGewehr]

Question: Have you ever done a video on how to manage responsibilities between classes? I've used a lot of your youtube content to help self teach myself c#. I'm starting to struggle with how to visualize and then organize the division of responsibilities between classes. Ie one class is dependent on another to have some of its properties filled out, which class should have the methods to fill those properties? Thank you very much for your content Tim. You have been the single best resource in my journey.

[@delw1138]

Another great video!

[@IAmTimCorey]

Thanks!

[@stylem8132]

Great content as always! A question: Can we host a blazor web assembly with prerendering and lazy load using this method?

[@peterkerekes2691]

Thanks! Perfect Video!

[@IAmTimCorey]

You are welcome.

[@davidbrown100]

Great tutorial, thank you.. Only issue I have is that the GitHub workflow requires a file index.html which is not included in the standard blazor web app template. I have added an index.html file to the wwwroot folder and the workflow now works successfully, however I dont seem to be able to view anything other than this index file, ie. the root of my application always defaults/redirects to the index.html. Do you have any suggestions.

[@IAmTimCorey]

Blazor Web Apps cannot be hosted in as Static Web Apps. They aren't static apps. They have server-side code that executes. A Static web app needs to be something that can fully run on the client's browser and that doesn't rely on the server to do processing (although they did add the ability to call an Azure Function). That means Blazor WebAssembly can run as a static web app, but Blazor Web Apps cannot.

[@webluke]

So if you host your API on Azure App Service and Azure SQL and then have a Blazor Client App in Azure Static Web Apps, it should work? If you can do that, it would make your client available from anywhere and lower hosting costs.

[@IAmTimCorey]

Yep, that's one way to do it (and it will work well).

[@jeyaprakasha8735]

Super this one is very helpful for me

[@IAmTimCorey]

Great!

[@SireComplexity]

Hey Tim I think you should add another record in the Custom Domain for the domain itself and then add a CNAME/ALIAS for @

[@TheSjoerd]

Thanks for the video. I would like to have heard that it is not for mvc, api etc at the beginning though.

[@IAmTimCorey]

Understood. I said it was for Blazor WebAssembly and other client-side application, but I could have been clearer that it wasn't for server-side languages (such as API, MVC, etc.)

[@cissemy]

Great. How fast is azure Static Web apps with blazor wasm ? About blazor wasm download time ? Thanks

[@IAmTimCorey]

It is one of the fastest ways to host Blazor WebAssembly.

[@cissemy]

@@IAmTimCorey I mean the performance and the download ,

[@Allnewseas]

Does Azure Static Web Apps support next.js server side rendering?

[@IAmTimCorey]

Yep, here you go: docs.microsoft.com/en-us/azure/static-web-apps/deploy-nextjs

[@portraitstonelabs]

Thank you Tim for clarifying. Hopefully I can figure out how the razor files in the Blazor WebAssembly App are different. Your tutorials are great!

[@IAmTimCorey]

Check out my Blazor intro videos. They cover the Razor components (which are Blazor pages).

[@southafricanmedia5397]

@@IAmTimCorey Hi, is there a limit on the number of websites you can host at the same time in azure static web app?

[@yuusource831]

At 9:23 I though Mr. Corey was about to teach us how to "dig" some REALY secret code. lol

[@clickdraw9762]

This is pretty great!

[@IAmTimCorey]

Thanks!

[@FellTheSky]

Hey Tim. Why do you think asp/blazor are surviving in this day where everything seems to be angular/react/vue ? What benefits do you have on blazor vs modern client side frameworks?

[@IAmTimCorey]

Couple of things to think through here. First, while Angular/React/Vue are popular, they are not the most common way to build a website. Whenever you see how popular they are, they are comparing them to other JavaScript frameworks. They aren't comparing them to other options (like PHP, C#, Wordpress, etc.) In that realm, JavaScript frameworks are a small percentage. Second, those three frameworks require heavy knowledge of JavaScript and the given framework (which rapidly changes). Blazor runs on C#, which is already being used in the Enterprise space. So, if you are already heavily invested in C#, why should you change to JavaScript and lose all of your advantages you have built up in C#? You can stick with C# and move forward faster.

[@theumairtahir1]

Great and Helpful content! One more thing can you please tell? Can we host a Wordpress site using Azure?

[@IAmTimCorey]

Yes, but not using static web apps.

[@Microgen86]

did you upgrade your mic?

[@IAmTimCorey]

No but I changed where I record. We are still working on making it sound good. You like it so far?

[@Microgen86]

@@IAmTimCorey yes i noticed immediately the sound has more depth and warmth. keep it up. im an audio guy if u need help ping me

[@Microgen86]

@@IAmTimCorey i do recommend shure mv7 for your type of voice or the blue dragonfly which is over expensive but will certainly take your audio to the ultimate level especially in your new treated room.

[@matthewsmith1500]

Tim I really think you should be on Spotify with your own podcast.

[@IAmTimCorey]

You mean like this: open.spotify.com/show/17OuTS0Fo5iVNeZdkGXhI0

[@matthewsmith1500]

@@IAmTimCorey awesome

[@sunnypatel1045]

Can we have more Azure stuff please :D

[@IAmTimCorey]

There will be more Azure stuff coming. I also have a full course on Azure: www.iamtimcorey.com/p/getting-started-with-azure

[@portraitstonelabs]

Great course Tim. I set up a new domain and it is running on the web, but the razor pages won't render online. You did mention azure static web hosting does not work with razor pages, but in this tutorial your site did deploy with razor pages. Is there an azure set up to add razor capability?

[@IAmTimCorey]

Razor pages are server-side rendered so no you can't use those on a static web app. My site didn't have razor pages, it had razor components, which are Blazor pages. Yes, that is confusing.

[@andrewlai3598]

would a static web app works with a typical C# MVC web site? Thanks,

[@IAmTimCorey]

No, MVC requires server-side processing. You need a fully client-side system like Blazor WebAssembly, basic HTML/CSS/JavaScript, or a client-side framework like Angular/React/Vue.

[@jasoncrawford3445]

Hi Tim, what VS Code extension are you using to commit & sync Git changes?

[@IAmTimCorey]

That's just the built-in git options in VSCode.

[@codefoxtrot]

Thanks!

[@IAmTimCorey]

Thank you!

[@sofianebm7492]

can I use this method to deploy a single-page application?

[@IAmTimCorey]

Yep.

[@davidtugyi4536]

Hi Tim, this is a nice video as always. I am just wondering, how could I manag to have a stagin page with a new Ui, and prod page, with the ol version. Should I use two static app?

[@IAmTimCorey]

You can have up to three deployment slots on a static web app, so you could use the two others as staging/dev sites.

[@davidtugyi4536]

@@IAmTimCorey Thank you Tim! :)

[@andywalter7426]

I have a question about doing a portfolio with azure static web app. The only problem I can see is how would the static site access files (like from database). Is there a way to have a portfolio site that does not require any database access?

[@drma-tech]

have the option to access data through the azure function, but it is paid. but it's pretty cheap and 100% scalable.

[@IAmTimCorey]

Yep, you use an API. But your portfolio doesn't need to access a database. It can be just a static webpage. For instance, the www.csharpmastercourse.com site is all static content. I'm not pulling any data from a database, even though I could. By just having static content, it loads faster, gets higher SEO ranking, and is cheaper. Not everything needs to come from a database.

[@phillipkatete634]

Is there a way around the over 8MB initial download (even reducing the size) for azure static web apps seeing it is only static content?

[@IAmTimCorey]

When the files are called "static", that just means they aren't generated on the server (like PHP or ASP.NET Core apps are - for instance, an MVC site is powered by C#, but the client only receives HTML and CSS, not the C#). The sites can still be dynamic in the content they display (like Angular, React, Vue, or Blazor WebAssembly). The difference is that the content is all downloaded to the content and then the pages are rendered on the client side. So in this case, we are downloading a Blazor WebAssembly project, which includes the .NET runtime. That's what the 8MB is for. You wouldn't use this for a simple website, but you would use it for a full web application. In that case, the 8MB is justified (and it is actually more like 3 or less when you actually build it for production).

[@phillipkatete634]

@@IAmTimCorey Thanks for the response, it makes it clearer. One final query: how do I actually build it for production? Is there a flag I need to set in Azure?

[@Dabayare]

What do ppl who provide multiple websites to different clients do these days. Are they paying loads of money to these services?

[@IAmTimCorey]

I'm not sure what you mean. If you wanted to host multiple websites for multiple clients, you could do that on Azure for a reasonable amount. For instance, you could pay $70/month for an Azure Web App and host 20+ websites on it with all of the great features Azure has to offer. Or, if they were just HTML/JavaScript sites, you could host them on Azure Static Web Apps like I'm demonstrating here for free.

[@happie88]

is it free? or how much monthlt?

[@IAmTimCorey]

They are free or $9/month, depending on if you want additional features or not. You can run a full website with custom domain, SSL, and even deployment slots for free.

[@andywalter7426]

The only warning about static sites is if you have any class libraries that are not from nuget that are not in your solution, it will fail on static sites but not with azure web app.

[@Surindersd57]

Are Static Web Apps same as Single Page Applications???

[@IAmTimCorey]

No. A Single Page App (SPA) can be a Static Web App but a Static Web App doesn't have to be a SPA. For instance, a Static Web App could be just a simple HTML/CSS site.

[@andywalter7426]

There is one part you mentioned in the video I am guessing that is not free even though it was advertised that everything is free. I am guessing that custom domains are not free. What if a person does not even have a domain. It would be great if there was an option to create a free domain name. Otherwise, a person would have to use the randomly generated url.

[@fokkedeboer2342]

Getting a domain name always costs you money. Also a domain name is kinda separated from hosting. This is just free hosting

[@IAmTimCorey]

Custom domains aren't free. I understand you would love to have everything be free, but the free content I show off is usually for development purposes. Once you get to production, you are going to have to pay for most things (and you should). Domain names are production items. If you want to use the free version, which I showed in this video, you use the domain name they give you. That's your free domain name. You don't get to pick it, but it allows you to have a domain name unique to you.

[@kevman2296]

Apparently you can't use the completely free tier without having a credit card on the Azure portal. I tried to create a static web app, but Azure told me to upgrade my subscription. For Azure functions this is not necessary

[@IAmTimCorey]

Interesting. I thought you needed to have a credit card on file to even get a free Azure subscription.

[@kevman2296]

@@IAmTimCorey Hm maybe it's because my account was linked to my student account I had in university. We didn't need a credit card for that.

[@phillipkatete634]

You do not need a 'free subscription' in order to run static web apps for free. Use your existing account and create a static web app (you may need to search for it) then enroll for the 'Pay As You Go' subscription and when finalizing the creation, select the free hosting plan.

[@The00Rex]

Azure is so scary... I won't start using it for my purposes because I'm afraid that there are 500 licensing nuances and hidden costs based on 1000 other things that I'll pay a fortune for even hosting a website. Sure you can set your limits but it's still so complicated that you can't really estimate the price.

[@000Cotton000]

My intention is certainly not to come across as rude, but you’re simply misinformed. Microsoft is super transparent with the pricing for their Azure resources. Hell, they even provide budgeting and estimated future cost reports to prevent unexpected bills. Seriously, it’s pretty difficult to get blindsided by runaway costs. Many of the Azure resources are basically free or super inexpensive just as Tim has shown in this video about static websites. I think what’s scary to most is that it sounds too good to be true.

[@drma-tech]

a few years ago, I already had a charge that went over 1000 dollars and microsoft canceled it because it understood that I had set it wrong. today it's very simple to understand what you're doing. I don't pay more than $1 per month for apps to work.

[@The00Rex]

You guys are probably right. It's been a while since I used it, couple years actually. Might wanna give it another try.

[@IAmTimCorey]

I have a full course on Getting Started with Azure ( www.iamtimcorey.com/p/getting-started-with-azure ) that covers how to use it safely and without risking major bills. I demonstrate a TON of features, including some very expensive ones, and the total bill for everything I did in the course (including time off between recording) was $5, and that was covered by the free credit you get for signing up. Azure is really clear about pricing, but there are ways to put speedbumps in place as well to protect yourself from making expensive mistakes. That course goes deep into how to ensure you are safe when using Azure.

[@williamsworkshop8624]

How would SEO be handled for static Blazor WASM apps? It's my understanding that you would need a server if you wanted to enable pre-rendering and it isn't an option with Azure Static web apps. I know that Google's crawlers will execute JS for crawling SPA sites but many other search engines don't. With the CSharp Master Course website, are you just ignoring that issue and only relying on Google's indexing or is there another way to help with SEO that you're employing? Thanks!

[@lastidea4925]

I can't use that for my ASP.NET MVC 5 project right?

[@StijnHommes]

A globally distributed website used to be hard? Seriously?

[@IAmTimCorey]

Data-driven sites, yes. For instance, if you had any type of state that meant your visitors could not be moved off to a new server so a simple round-robin wouldn't work. Plus, getting a site hosted in five different countries and keeping those in sync was difficult. Even now, try hosting a website in multiple locations around the globe without using a cloud platform. Figure out how to handle DNS, load balancing, and more. That isn't easy.

[@Blr046]

Excelent video!!! I have a question. www.timcoenterprise.com/ -> Working timcoenterprise.com/ -> Not Working How to achieve redirection or how to make it work if the user is not putting "www."

[@IAmTimCorey]

That was just my oversite. I didn't add the apex domain (without the www) to the list of approved URLs in Azure. Just add an additional record for the apex domain and you are set. If you want it to redirect to one or the other, you could use your DNS provider to do that or Azure Front Door.

[@edrobinson8248]

Excellent video as usual but I think it would help not to make a deliberate mistake ;-) setting app location as Client instead of TimCoEnterprise? Beginners (like me) beware.

[@davidknight5331]

I struggled for two days with this but Tim's video helped me out. Here is what I had to do to mine to deploy properly: app_location: "/" api_location: "" output_location: "wwwroot" I am not sure why the default template for a Blazor project puts app_location: "Client"