In a previous two-part blog series I wrote about building a home automation recipe and automating its deployment with a Pulumi app. That was written in TypeScript. Now that Pulumi supports DotNet Core 3.0 with Pulumi CLI 1.5.0+, I ported over the infrastructure to C# as well, and added it as a C# project to my existing Solution.
A C# app and a C# infrastructure app. Nice. It was worth the wait.
What do you think would have happened when I ran pulumi up in the C# version of the same infrastructure? You wouldn’t expect any changes since the infrastructure wasn’t changed — just the language that it was written in, right? Well, that’s exactly what happened (or didn’t happen, depending on how you look at it.) Nothing changed when I ran a pulumi preview after I completed porting over the application.
That, my friends, is the power of programming languages…and proper infrastructure as code.
This is the fifth and last part of a series of posts I am writing about building a static site with VueJS. In this post, I will walk-through how you could use Functions-as-a-Service for your next project…or your current too.
Static sites typically don’t get all of the infrastructure attention, that other stuff does. Many developers still think that SPAs, whether static sites or not, need to be hosted with an always-running server infrastructure. It is unnecessary. With the advent of ServiceWorkers and the Progressive Web App movement, you really don’t need a server running all of the time.
Most devs are familiar with using a CMS like WordPress and then buying a domain to serve a website. Most websites don’t need all of that infrastructure. The price is a modest $4/mo according to their pricing page, you just get the basic with the paid plan. Not a big deal, though. But if you wanted to do SEO, custom analytics etc., you are looking at the next pricing tier or perhaps the most expensive one, at $25/mo, if you are looking for a few more knobs/levers to turn.
This is the architecture I used for Net Your Problem.
Fig.1 – A simple cloud architecture for SPAs.
I have automated the part where I build the VueJS app and upload it to the Azure Storage account using a PowerShell script (see this gist), which is purely based on the AzureRM PS module.
Great. Now, let’s talk about how these infrastructure systems talk to each other, to cohesively power your next project.
The inner details
A CDN works by aggressively caching static resources (JS, CSS, HTML, PNGs etc.). You can also give a hint to a CDN service to cache additional mime-types by setting the Cache-Control header attribute. A typical CDN service has “edge” nodes all over the world. When you provision a CDN service from any of the cloud providers, you are not choosing the edge nodes in a particular region. CDN services are globally distributed, by default. Each CDN service does their billing differently. For example, I know that the Azure CDN service offers a tiered pricing model based on a group of countries in each tier. So traffic from different countries will be billed at different rates, based on the amount of data transferred from the CDN to the clients (browsers).
As shown in fig.1, the CDN is connect to the Function App, meaning that the CDN will source the static assets from the Function App. But the Function App in turn is connected to a storage account. Technically, all of these can be services from any of the 3 major cloud providers (Azure, AWS, GCP). It doesn’t make sense, though, to create individual services in multiple clouds. You would be charged more for inter-data center data transfer. So it is best to co-locate all of these, except of course, the CDN, which is always global, regardless of whose CDN service you end up using.
The connection between the CDN and the Function App is pretty simple, as it is just a matter of specifying the origin settings for the CDN. The connection between the Function App and the Storage Account requires a little bit more than just specifying the URL. We have to detect the incoming request at the Function and proxy it to the storage account, to let the storage account serve the static asset. Essentially, the Function App serves as a reverse-proxy here for some URL patterns, and for others, as a service that may or may not return a response, i.e., if there is an actual function that can handle the request.
Bonus! Let’s talk about automation
Let’s introduce a CI/CD pipeline into the mix. Azure has a really good all-in-one Ops platform called Azure DevOps, previously known as Visual Studio Team Services or VSTS, and even before that, Visual Studio Online. Anyway, the point of the platform is like Bitbucket or GitHub, where you have everything in one place. CI/CD pipeline integrations, release management, project planning (Kanban as well as sprint-based, whichever you are into), private/public repos, wikis, and also a private feed for your Nuget (.Net packages), npm or maven packages too!
Don’t take my word for it, though. After all, I am just some random programmer on the internet. People say a lot of things. But seriously, you should check it out.
Here’s the screenshot of the pipelines page showing you the CI and PROD build pipelines for Net Your Problem.
The pipeline is simple. Run npm ci –> npm install –> npm run build –> upload to Az Storage –> store artifacts. That’s it. I have a trigger for this pipeline, which would kick-off this build every time a branch is updated through a merge.
Admittedly, all of this may look like overkill. Trust me, it is not. I spend about a minute to run the build and then to upload the files to the Azure Storage. Then, sometimes, I have to purge the CDN cache, because, well, it works too well sometimes :). Overall, I could spend anywhere between 1-10 mins, and on average ~5 mins, deploying some changes. Now, repeat this several times as I am actively developing something or want to see how things look in Dev, or I want to show something to my ahem client (my girlfriend), the time investment adds-up really quickly. This setup allows me to focus just on the coding part and push up my changes for a quick review on the dev site, before I create a release for the PROD and have approved changes go to the live site immediately. All of this is a pleasant experience for me. To my girlfriend, it makes no difference, and that’s a good thing. She just sees the dev site and the live site. That’s it.
You see, the delays in development, often affects our customers. When I have a pipeline, that works well, my customer doesn’t get affected by it. They just see what they need to see. To them, in the end, it matters if they are able to see what they want and if it works. If the process gets in their way, they simply won’t get it. If I could use the overused automobile world for an analogy. This experience would be akin to taking our car to a shop for an oil change. At the end of it, we just want to drive our car out of the shop with a new oil filter, and fresh oil. We don’t care and most of us don’t want to know how they were able to do an oil change without an appointment. On the other hand, if the oil change took too long, then we want an explanation and all of the shop’s fancy equipment and ISO certifications wouldn’t save them from our negative experience.
This post is the first part of a series of articles. The project that I will focus on will be the site I recently developed for Net Your Problem; a company that connects fishermen with companies that recycle old and worn-out nets, in order to produce plastic pellets, which can be turned into new plastic products. If you are a fisherman, or a company that recycles nets, I highly recommend contacting Net Your Problem. I am not just recommending them, because I have a personal connection with the founder of the company. I truly believe in what they are doing.
I should also mention that since the time I built the site, the creator of VueJS announced a new framework, called VuePress, specifically for building static sites using VueJS. You should check it out to decide if it fits your needs. But this is out of scope for my series and I will not be discussing the differences or its features in this series.
Now that we got that out-of-the way. Here’s what I have planned for this series:
For a small site that sees little traffic, with not a lot of functionality, I couldn’t justify wanting to use a heavier framework such as Angular or React. I realize React isn’t a framework but a library. In fact, VueJS borrows concepts from both of those technologies. The core team behind Vue has written this article to compare with other frameworks/libraries. I realize that I cannot do justice to every single framework out there. So let me put this out there. If you feel that I have not mentioned a framework that you are using, feel free to comment on this post and I’ll be happy to explore it. I love learning new things.
You should decide the best technology for yourself (or your team) based on what you think works for you, and the problem that you are solving. I am not recommending that you use VueJS for everything, but you should carefully evaluate them and understand why they exist. Here are some pointers for choosing a technology for your next project:
Do you already know how to use it?
Have you evaluated other frameworks with a small proof-of-concept?
How much time did it take to build the proof-of-concept?
Can you come up with a reason (or several reasons) as to why you should not use a particular technology?
Does the rest of your team know how to use it?
Does the
I spent a lot of time looking at a class of micro-frameworks. I even built the first version of the site using nothing but just plain HTML and used Parcel as my build tool. It worked great to start-off. But I quickly found myself wanting to do things outside of the boundaries of Parcel. Instead of fighting the framework, I made the decision to spend the time and switch to something else. As an alternative, I looked at Svelte, Stimulus, and even Hyperapp. These two are very different frameworks. I won’t go deep into how they work but they take a different approach to building web-apps than the big three (that I know), i.e., React, Angular, and Vue.
I had already used VueJS for a prior project. Although, that prior project was not a static site. It was a fully-dynamic web application and I loved using VueJS. Everything just fell into place when I used the framework. So with that good prior experience, I decided to use VueJS. I knew it will serve the purpose extremely well, and also have plenty of room for growth, should there be a need for it. Here’s why I enjoy using Vue:
Single-file components.
Component-scoped SCSS (although many frameworks offer this).
Automatic webpack build config (again, many frameworks offer this).
Easy-to-learn, (and re-learn when you are away from it for a long time) concepts.
Does not force some choices on you.
For example, there is no HTTP client available in Vue. The most popular one to use is axios. There is also vue-resource but, it has since been deprecated in favor of axios.
Easy bi-directional communication between parent and child components.
With that said, VueJS was an obvious next choice for me. Personally, I think VueJS could be used in a lot of situations but I understand that a variety of factors can influence one to choose another framework. So if you have any thoughts about it, I’d love to hear from you. Especially if VueJS hasn’t worked for you in some situation, I’d love to know why. It is good to know some of the bad things others may have experienced with Vue, when all I have had is a positive experience.
And there I was, thinking that I was done with AzureStorageExplorer for Android v1.0.0. But, nope. In my last round of testing, I couldn’t even login using my work account. The Sign In button didn’t do anything. I went back a few versions to see if the Android update for WebView could have done something to break it. That wasn’t it. The OAuth client library I was using had the recommended code for enabling Javascript in the WebView client so I knew that wasn’t it. I was able to login through the Azure OAuth flow using my personal Azure account. So, I knew there was something about the enterprise account login screen, which could have changed recently that ended up breaking the authentication in the app. It turns out that it did. Read on to know how I found out.
The first step was to prove that something was indeed broken in the login screen for enterprise accounts in Azure in embedded WebViews. To do this, I looked up Chrome’s remote debugging options and found this page describing how to remotely debug WebViews in mobile apps. So, I enabled the setting as recommended by Google, which required adding this piece of code in my activity’s onCreate(Bundle) method.
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
WebView.setWebContentsDebuggingEnabled(true);
}
I ran the app, launched Chrome’s Developer Tools, and connected to the app’s WebView. This is what I found..
After finding this, it was easy to know where I needed to make the fix. So, I set out to fork the source repo of the OAuth library I was using, made the necessary changes and created a pull request. If you are using the same library and have run into this issue, you could clone my repo and build the project to produce the patched .jar (or an .aar), which you can use in your project directly until the author of the library can get to my pull request (if at all!).
That last error in the console is what was logged when I pressed the Sign In button after entering my work account credentials for Azure. It turns out that the page’s JS now has code to store something in the browser’s localStorage. The reason this isn’t a problem, if you were logging into Azure through a desktop or even a mobile browser, is because localStorage is enabled for every site by default in the non-embedded browser view. But for a WebView in an Android app you need to explicitly enable the DOM storage, just like you need to enable JS through the WebSettings class.
Cloudy 
You must be logged in to post a comment.