Configuration details for deploying your first Express JS API on Azure Web App
Key aspects and configurations, step-by-step. Let’s go!
Hey there! It’s time we go through the nuances simple steps to deploy a JS API to a cloud platform.
We will be focusing on the KISS principles for this one! The goal is that you manage to deploy a simple Express JS API, understanding what should be modified if you desire to change any file name or structure, and manage to comprehend how straightforward it can be if you get the hang of it.
This article comes after days and days of hard struggle due to simple configuration variables and filename settings that were “hidden” or differently explained throughout the web, which caused our team to get a little confused, but we managed, and you will too!
What you need to know how to do:
Scaffold a simple Express JS API using npm.
What we will help you with:
How to add every configuration needed and set up an environment on Microsoft Azure to deploy your API.
Configuration Files
And those other details no one really tells you.
Assuming you are using a Windows OS to host your API (we’ll talk about this later) —
You need to add a file at the root of your project, which should be called web.config, that is used to tell the cloud service how to interpret requests that reach out looking for your resource! Find it below:
Kindly note lines 15, 21 and 34, where there is an app.js written. This is the filename of your entry point! Sometimes it will be found as server.js and derivatives, so make sure to keep it updated.
And guess what? That’s basically it! (For your code, of course)
Putting our heads in the clouds
Time to deploy it to Microsoft Azure! We’ll be using Web App for this one, but feel free to explore the possibilities. MS Azure has a lot to offer!
Let’s create a Web App. It can be found at MS Azure Portal:
Below you can find some examples of a filled creation form for a Web App, but it’s really all about your environment. Just make sure to use the Windows OS!
And finally… The Secrets!
First secret exposed: Node Version!
This might change based on the version you’re using, but you can specify which node version should be active at the server when you deploy your application! This is very important since the default one might not be able to run your application. Most of the versions will be installed in the server, but the active one might have to be changed.
Let’s do it! Inside your resource page, click Application Settings on the left-side menu. After it is open, scroll down until you find the Application Settings section.
Now all you should do is click Add new setting and input the following:
App Setting Name:WEBSITE_NODE_DEFAULT_VERSION
Value: <desired_node_version>
Find an example below:
You can use the az webapp list-runtimes command from the Azure Command Line tool to identify all the available versions. Don’t forget to hit Save at the top of the App Settings window!
Second (and final) secret exposed: package.json!
With the same purpose above, and mostly to make sure everything will work out, you can also specify the node version in the project’s package.json. It’s very simple, and you can and should use the same version specified in the step above.
We simply have to add an engines property! Let’s see an example below (check line 6):
And we are done! To wrap it up, we will be deploying the solution to the service using the good and old zip deploy method.
The magnificent ZipDeploy
As simple as it sounds, we will be deploying a zip to the cloud resource we’ve created.
First, check your app URL at the Overview menu of the resource page.
Sample: https://express-back-end.azurewebsites.net
Now, to access the ZipDeploy interface, simply add an scm between the App name and the azurewebsites section, while also adding a /ZipDeployUI to the end of the URL. It should now look like the following:
Sample: https://express-back-end.scm.azurewebsites.net/ZipDeployUI
Finally, simply zip your whole project and drag it to the page for a faster-than-light deployment.
All good! As soon as the deployment logs get updated on the section below the file structure, you are set!
At last but not least, let’s test our application!
Congratulations! Everything is now running smoothly on the cloud.
We hope this helps you solve common deployment issues, and guides you on how simple it can be to deploy even the most complex solutions to Azure.
