I'm spoiled by great software. Really spoiled, because I've had the luxury of choosing my favorite platforms and deploying to them in my role as a Developer Advocate and indie app developer. I've become used to creating cute demos that are deployed fast in order to showcase this or that technology. To do this, I have at my disposal really, really nice software platforms, but many of my very cute apps never make it anywhere near production distribution.
Disclosure, I'm now a Microsoft employee. Apparently it's time to get serious.
I was first spoiled by Parse, and released a bunch of small apps that used its database and sweet push notification services for my web and mobile backend. Then Parse's official service was shut down in 2017* after it was acquired by Facebook.
After causing a scene that is best forgotten, I moved to Firebase. It truly was the next best thing for realtime database updates, push notifications, and analytics. Eventually it even included really cool machine learning integrations with the advent of ML Kit. And, lo and behold, Firebase offered web hosting! That was nice! I could use it both as a sweet MBaaS** AND site hosting.
Like kids in the candy store chocolate factory, developers are often attracted to these beautifully-designed platforms for their smaller apps as long as they are cost-effective, showcase well, and can get a project and running as quickly as possible.
At some point, however, you might need to scale up from your small to medium-sized personal projects. What if you're working in an environment where your projects grow beyond the resources or features offered by awesome platforms such as Firebase? In this series of tutorials, I'm going to talk about how to deploy a web project on Microsoft's robust, enterprise-friendly cloud offering, Azure. In future tutorials, I'll show you how to scale it by adding a database and more. So let's get started.
🍬🍫🍭 If you'd like to learn about Azure, take a look at its myriad offerings 🍬🍫🍭
In this article, I'm going to walk you through the easiest possible way to set up a Vue.js CLI-built web app on Azure with continuous integration via GitHub, because spoiled people like us have no time to waste.
Note, there are a lot of great tutorials on how to host static sites on Azure, like this one. This involves posting your static site files within Azure storage. I actually am not looking to host a static site; rather I want to build a Vue app using the Vue CLI and push it to GitHub, to be picked up by a build process whenever you push changes to GitHub.
Ideally, Azure-style web hosting would look less like Firebase-style web hosting which entails building locally and using the Firebase CLI to upload and deploy your content, and more like Netlify's super easy continuous deployments for Vue apps where changes are pulled from GitHub automatically, built and deployed. Once the web hosting is taken care of, I'll have a clean process for updating a web site that I can later enhance with the other tools in Azure's portfolio.
Step 1: Create an Azure account
For testing purposes and to get up and running with your new web app, you can create a free account by signing up for Azure.
Once you have signed up for Azure, you'll find the Azure portal. This is where you can manage app creation, deployment, and additional implementations like ML and database management. You can also do a lot of this management via the Azure CLI or with VS Code app extensions (described below), but the portal allows you to keep track, visually, of your apps, and I find that helpful.
Helpful tip: as you create assets in the Azure portal, pin them to your personal dashboard by clicking the pushpin icon on the top right. They'll be easier to find later.
Step 2: Build your Vue.js app and configure VS Code
The absolute easiest way to create a Vue.js app is to use the Vue UI, a GUI that helps you visualize CLI processes. Once you have the Vue CLI installed, open your terminal and type vue ui to witness this glory:
Walking through the creation process of a new Vue CLI-built app will scaffold out a basic web app that you can start working on in Visual Studio Code, or any editor that you prefer. I recommend VS Code, however, because there are some amazing Azure extensions that make your life easier as you work with Azure. If you don't have these extensions installed, I encourage you to do so. There are a bunch of them: open the Command Palette and search for Azure in the VS Code marketplace.
At the very least, install the Azure Account, Azure Tools and Azure App Service extensions. Once these are installed, You should be able to log in to your Azure account from VS Code when prompted by the editor. Once you are signed in, you have access to all the various elements created for your team in Azure; to view them, you can click on the Azure logo in the VS Code sidebar. These can come in handy as you progress.
Step 3: Get ready for deployment
Now you need to prepare your baby web app for deployment and continuous integration from GitHub. Vue apps are usually deployed from their build directories, usually /dist folders. Build your Vue app locally (npm run build or run a task in the Vue UI).
Next, make sure that your app's .gitignore file doesn't include your newly-created dist folder: remove the .gitignore's reference to /dist. Go ahead and push your codebase to a GitHub repo.
Then, go into the portal of Azure and begin creating an environment for your app.
Note: you will need a Subscription and a Resource Group for your apps. You might need to create a new Resource Group in the portal before you create your new web app.
- Click 'Create a Resource' at the top left of the portal
- Click 'Web App' in the middle panel
- In the 'Basics' tab, select which Subscription and Resource Group to which you want to add your web app. For a completely new account, you probably need to create these in the portal.
- Give your web app a name
- Choose to publish with 'Code'
- Pick your preferred version of Node in the Runtime stack dropdown.
- Pick 'Windows' in the platform (this is important because we'll create a config file used by IIS to set the default document)
- Select a location for your resource near to you
Then, save the configuration and deploy your app. Azure will create a web site at azurewebsites.net for you which you can access from the Overview tab. Without connecting it to your code, it just looks like this:
Tip: you can save this resource to your dashboard; it's a good idea to do so as it's really easy to get lost in Azure.
Step 4: Connect your Azure app to your codebase
Now, you need to tell Azure where to find your codebase. Since your baby Vue app is now safe in GitHub, head over to the Deployment Center tab in the portal and click 'GitHub'.
Note, you need to connect GitHub to your Azure account
Click 'Continue', and select the 'App Service build service'. This is Kudu, an engine that builds and deploys your code.
Click 'Continue' again, and select the appropriate area of GitHub to connect your app. When everything matches up, click 'Finish' to run your first deployment.
You can check the logs while it runs to see what's going on. This is helpful if there's a problem. You can also make sure that the build process is functioning as expected.
If you were to visit your web site now, unfortunately, you'd see that it throws an error. A glance at the logs shows you what's wrong:
Notice that "Missing server.js/app.js files, web.config is not generated" message? That's our clue that we need to add a web.config file to the app root to show Azure where to look for index.html (hint: it's dist/index.html, which we can see was copied by the build process).
All you have to do at this point is create that web.config file, with the following setup enumerated:
<?xml version="1.0" encoding="utf-8"?>
<!--
This configuration file is required if iisnode is used to run node processes behind
IIS or IIS Express. For more information, visit:
https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config
-->
<configuration>
<system.webServer>
<webSocket enabled="false" />
<rewrite>
<rules>
<!-- First we consider whether the incoming URL matches a physical file in the /dist folder -->
<rule name="StaticContent">
<action type="Rewrite" url="dist{REQUEST_URI}"/>
</rule>
</rules>
</rewrite>
<!-- 'bin' directory has no special meaning in node.js and apps can be placed in it -->
<security>
<requestFiltering>
<hiddenSegments>
<remove segment="bin"/>
</hiddenSegments>
</requestFiltering>
</security>
<!-- Make sure error responses are left untouched -->
<httpErrors existingResponse="PassThrough" />
</system.webServer>
</configuration>
Remember how we set up our hosting to be run on Windows? Using Windows opens up IIS with iisnode for routing, and this file tells IIS where to find the default index.html page. Drop this web.config file in your app's root and push it to GitHub. The app should rebuild and redeploy automatically. And, if all goes well, you will have a beautiful Vue.js starter web site on an azurewebsites.net domain!
In the next tutorial, I'll build out the website I'm working on and add a database. Spoiler alert, it's going to be called Azure cocktails, the data will be driven by my Mr. Boston Cocktails dataset, exported from Firebase and imported to Azure, and all the cocktails on the site will be blue.
And for my first trick, I will use my Mr. Boston Cocktails dataset to power a new web app, Azure Cocktails. Only featuring blue cocktails. Because. pic.twitter.com/OOj3Ebzax9
— Vx. Jen Looper (@jenlooper) May 17, 2019
Stay tuned!
*Parse lives on as an open source, community-based project, and more power to it!
**MBaaS means 'mobile backend as a service'.
Useful Links:
🕴Azure Portal
🔌Azure Extensions for VS Code
💚Getting Started with Vue.js
🎨The Vue CLI with its UI
Top comments (15)
I noticed in the log output that it says it defaulted Node to 0.10.40. Obviously (I'm assuming anyway) you can fix that and specify a Node version, but why would Azure default to such an old version of Node?
You can definitely fix it by specifying the Node version in your package.json (
"engines": {"node": "10.0"},) as the log suggests. But this is the very low default for App Service simply because upgrading is not so easy for big orgs.When I go to create the web app in Azure I'm unable to select Windows for the OS when I select Node for the runtime. Any ideas?
Hi, Preston, I think this might have to do with the Service Plan (or maybe Resource Group or Subscription) that you selected. Start there, and make sure that that plan supports Windows. As you work through the setup, you'll see that each setup step depends on the prior subscription. This caught me out as well.
Hey Jen, great post!
You mentioned getting Netlify—like CD on Azure but we're still uploading a built version of the app to the repo? Will you be addressing how to avoid doing that in your future posts?
yes, for sure. That's an optimization step. There's a way to do it, I need to test it and then explain it. For sure, it's no bueno to upload all that stuff!
Nice! Might have inspired me to show people how easy it is to setup pipelines, since you went with Kudu! :)
That's one of the many things on my list. Learning as I go here! :)
Hi Jen, I am a developer. Is there any use to get certified in both AWS and Azure. ? In a workplace anyway I will use any one cloud computing provider ?
Really fabulous premise for this post, loved it!
Thank you Ben!!
FYI, typo (and feel free to delete this comment when done :)
"Once you have the [Vue CLI installed"
got it, thanks!
wow, so much work just to launch a simple website :)
I know, but you get a lot of bang for the buck, going forward! Stay tuned!