Azure and .NET Programming for Dummies, Part 1

Are you moving into the Microsoft world of developing software? Is it something that you avoided somehow in life, and now you’re in the thick of it? Well, you’re in luck! This is a simple guide to navigating the world of Azure and .NET for dummies. That means dummies like me. Not you, of course.

.NET knowledge that may help you ….

  • ASP refers to the old-world era of IIS (Internet Information Services) and back when Active Server Pages may have been the way that every Web backend would have been written.
  • .NET is the software development platform that is Microsoft-y in nature and lets you go across the entire Microsoft world of devices and clouds — BUT it’s not the only way to do that.
  • “ASP.NET” and “ASP.NET Core” refer to two different technologies for a .NET backend. The former is old and only runs on Windows. The latter is new and runs on Win/Mac/Linux.
  • If you see the “LTS” acronym near a .NET version it stands for “Long Term Support” — which means that it doesn’t include anything experimental and has prioritized stability.

What’s Blazor?

Blazor lets you make server-side and client-side things in the .NET universe with C#. Keep in mind that .NET is *not* limited to C# and is a giant library of stuff which which you can build things. Blazor, however, is focused on C# for folks who grew up with it and want to build things for the Web and not have to wrestle with Javascript. Is that possible? Well, if there’s a hammer and set of nails to get build in devlandia, it’s gonna happen. I’ve been trying it out and it’s pretty neat!

Is there a simple way to just get a website up and running?

Great question! This is what I was scratching my head figuring out how to do for the last few months. And that’s hopefully why you’re here too because it can get awfully complicated real fast. There’s an awful lot of services you can plug into in the Azure land just like with AWS or GCP. Navigating which ones you’ll need for super basic stuff is not a trivial task. I’ve been watching a lot of YouTube videos and reading tons of docs to come to the conclusion that there’s a little subset of Azure that can get you going a little faster. So welcome! There’s a cool project that visualizes all the various Azure pieces that might make your head spin — but in a good way because there’s nothing like having so many tools available in your toolbox, right?

Here’s a simple recipe to getting started, in pictures. The full source material is here.

0/ Get an Azure paid subscription set up

You might see subscription at the top if you’ve been using it recently.

Be sure to not miss the “+” sign over near the top to set up a subscription.

1/ Clone the starter repo on GH

2/ Clone the project locally from GH

3/ Install Azure Static Web Apps extension in VS Code

4/ Let’s get it up onto the Web

In VS Code, hit “F1” and select Azure Static Web Apps: Create Static Web App

Select a subscription to use (sorry, this will cost you).

Give it a name with no spaces or symbols.

Select a region near you.

Choose React near the top.

Enter “/” for step 4 and “build” for 5.

You’ll see a spinning wheel and eventually the beautiful word: succeeded.

On the left hand navigation, click on the subscription to find the Static Web Apps section.

Right-click or ^-click on Mac to select Browse Site

You should see this in your browser.

Want to see it running locally?

To run the site locally open the integrated terminal.

Change the code a little bit where it says “World” and give it some spice.

And at the cursor enter:

% npm install
% npm start

In case there’s an error message

And if it breaks with an error message like Error: error:0308010C:digital envelope routines::unsupported, then do this

% export NODE_OPTIONS=--openssl-legacy-provider

Now, modify the package.json file at the root directory:

  "scripts": {
    "start": "export SET NODE_OPTIONS=--openssl-legacy-provider && react-scripts start",
    "build": "export SET NODE_OPTIONS=--openssl-legacy-provider && react-scripts build", 
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

Now go and try again

% npm start

Back to the regularly scheduled program …

Go ahead and browse the site locally.

In the event that you had to change the package.json file to get it to run locally, revert to the original settings to get it to work on the remote network:

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build", 
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

Now commit the changes to GitHub …

Browse your site on the network.

And it’s there!

Congratulations 🎉

For more Azure Static Web App examples visit the code sample gallery here. And if you’re trying to do more than just host a web app with an api or two, you’re going to want to use Azure App Service instead.

Please note that I’ve done no .NET or Blazor here yet. But I will be doing so in the future posts. Thanks for visiting!

Related Posts