Do you remember the famous quote from Steve Ballmer: “Linux is a cancer”. Microsoft was in a battle against open source. Of course, because it hurt their business. Since then, a lot of things have changed around Microsoft.

They realized that open source is the future and then heavily invested in it. Now they reached the point where you can be a full-stack developer without leaving the Microsoft ecosystem, and I’ll tell you why it is a game-changer.

The new way

I am a CTO at CodersRank and a backend, DevOps engineer. I spin up servers, create ElasticSearch clusters, optimize CI/CD pipelines and I write Go, Python code. During my work, I usually rely on many different technologies from different companies.

Imagine a scenario: your code is hosted in GitLab, the CI/CD is at CircleCI, docker images in the DockerHub registry, servers in DigitalOcean. If you are lucky there are integrations that can help to speed up the setup. If you are even luckier these integrations work, as well. Of course, this configuration requires many hours of DevOps engineering. For big teams, this time is worth the investment but for startups or for hobby projects, it is an overkill. Until now, Heroku or Google Firebase was the closest to solving this problem. Fortunately, there is a new solution from a company you would expect the least: Microsoft. 

In Azure, the Static Web App product recently became available. This is still in beta (at least the time I am writing this article) but they let you experiment for free. This allows you to deploy your backend and frontend code from a GitHub repository using the function app (Azure’s serverless solution). This was the last missing piece from Microsoft’s masterplan to be 100% full stack using only Microsoft technologies.

To spin up and develop a web application usually you need the following things:

  • Computer
  • An editor (IDE)
  • Code
  • A place to host your code
  • Server to run your code
  • CI/CD to deploy
  • Database

Microsoft has its own solution for each of them. Let’s check one by one.

Editor: Visual Studio Code. One of the most popular IDE especially for full-stack developers. Developers like it, it is cool.

Code: JavaScript and TypeScript. NPM now belongs to Microsoft and TypeScript is developed by Microsoft. Both of them are cool and TypeScript is the best thing that could have happened with JavaScript. I think C# still has a feeling of a corporate language used by enterprise companies despite being open source and the popularity of Unity.

A place to host your code: GitHub.com, basically Facebook for developers, everyone has an account, so it is cool too.

Server to run your code: Azure, especially Static Web App. It is not very popular yet but has the potential to be cool. 

CI/CD: GitHub actions, it is fast, it is free, easy to use, so of course, it’s cool

Database: CosmosDB, it supports MongoDB and MySQL API both of them are popular and cool for developers. I didn’t mention MSSQL because it is not cool. 🙂

Computer: Microsoft has its own computer and OS, is it cool? Well… I am still more like a Mac, Linux guy.

What is the point here? As a developer you are covered from top to bottom by Microsoft and most of the tools are cool and cheap/free. It is not like 10 years ago, when you wrote Visual Basic scripts to connect to an MSSQL database because the company you worked for forced you to use Microsoft technologies. 

A lot of developers are voluntarily using these tools because they make their lives easier. And Microsoft makes a lot of effort to fine tune these things together and engineer an awesome experience for the developers. 

Drawbacks

Of course, it is not perfect and there is still room for improvement.

  • Google Firebase has more features
  • You need GitHub and Azure accounts, these could be integrated better together
  • The price of the Static Web Apps can be a deal breaker too, if there was a free or very cheap tier for small/hobby projects, I am pretty sure a lot of people would sign up

It has never been this easy to deploy a website

So let’s see how complicated it is to set up a project using Microsoft solutions (except the OS).

  1. Create a new GitHub project from the existing templates: https://github.com/staticwebdev. For this project I used a Vue.js template.
  1. Deploy using Static Web Apps. First you have to have an active Azure subscription. After that here you can create a new project: https://portal.azure.com/#create/Microsoft.StaticApp
    Provide some basic information about the project.
  1. After a seamless GitHub integration, you can select the previously created GitHub repository. 
  1. I selected the Vue.js preset build configuration and use the default values. Click on the Review + Create button.
  1. You can review all the configurations and create the project. Press the Create button.
  1. After a few seconds it will be completed. Go to the resource.
  1. Here is the deployed project. Let me highlight a few things here.

It is already deployed to the a https://red-forest-02664dc03.azurestaticapps.net/ URL.

It pushed a commit to the repo with the deployment configurations. So, whenever someone pushes something to the master branch, it will be deployed automatically.

We already have the code up and running with a working deployment, valid SSL certificate, globally scalable,etc. All this, without even opening an IDE.

But I guess we want to do more than a Hello World application. So it is time to clone the project and open it in VS Code.

Create our first back-end code

  1. If you haven’t already, install Azure Tools.
  1. And install the Azure Static Web App extension too
  1. Sign in to Azure.
  1. Open the project and log in to GitHub.

5.Create a new function called ‘greeting’.

6. This created the necessary directory structure and files for your first serverless function. To try it locally, type the following to the terminal:

$ cd api

$ npm install 

$ func start

After startup you can see the link there you can try your function app. In my case it is: http://localhost:7071/api/greeting. If you want to pass a parameter: http://localhost:7071/api/greeting?name=Peter.

Now, only one thing is missing. Push your code to master and it will be deployed automatically. 

$ git add api/*

$ git commit -a

$ git push

After that, pushing the GitHub actions will start the deployment. When it is done, the changes are deployed to the live environment: https://red-forest-02664dc03.azurestaticapps.net/api/greeting?name=Peter

Summary

Microsoft really lowered the entrance bar to start a new project. All the heavy lifting is done by tools. You can focus only on the code. In 5 minutes you have a new project where you can invite your friend, colleagues and start collaborating. Google Firebase and Heroku are still powerful tools and easy to use. But if you are a developer there is a high chance you are already familiar with VS Code, GitHub, MongoDB or MySQL. The only thing you have to learn is how to use Static Web Apps, which is literally 5 clicks. This is why I think Microsoft is in a really good position to go ahead of the competition. 

Project Looo

This article was inspired by project looo (List Of Opensource Organizations). Project looo is a list of the most active open source organizations. We like experimenting and we decided to give SWA a try by creating a test project. You can check the project out here: https://www.project-looo.org/ and the source code is here: https://github.com/project-looo/looo.

It uses GitHub, GitHub actions, Static Web Apps, CosmosDB and written in JavaScript.

Author

CTO & founder of @CodersRank, the very same website you are looking at. Back-end developer, father, sports man, author of an e-book and audiobook, creator of an online interview platform. Avid gamer when time allows. | CodersRank: Our goal is supporting CODERS growth by their always up to date, professional CodersRank profile.

Write A Comment