Cost effective SPA hosting in Azure

Static sites is ClientSide code meaning HTML, CSS and JavaScript without server side. These days most static sites are some form of single page application built with Angular, React or Vue. There are mutiple ways to hosts these apps and I will share few cost effective options which costs less than 1000 rupees per month.

Option 1: Azure Blob Storage

The most straightforward way to have site running is Azure Blob storage since it's specifically designed to serve files as quickly as possible and static sites are just files. I didn't try setting Custom domain and binding SSL certificate, but based on recent update and documentation it seems supported. I will share another post on that subject if I get some time.

To start hosting your web application on Azure Storage, Create a GPv2 storage account in the Azure Portal or use an existing GPv2 account and click on static website and Click Enabled.

$web and $log container will be created.

Upload your web assets to the $web container that was created as a part of static website. You can do this directly in Azure Portal, or you can take advantage of Microsoft Azure Storage explorer. And if you need to set up continuous deployment you can used Azure File Copy task as below –

How it works?

When you enable static websites on your storage account, a new web service endpoint is created of the form

<account-name>.<zone-name>.web.core.windows.net.

The web service endpoint always allows anonymous read access, returns formatted HTML pages in response to service errors, and allows only object read operations. The web service endpoint returns the index document in the requested directory for both the root and all subdirectories. When the storage service returns a 404 error, the web endpoint returns a custom error document if you configured it.

Option 2: Serve App by Node Server (App Service on Linux)

We will create a Node server and this node server will be responsible to run our react app using the command “node server.js”. Now you can have same App service plan to host both backend and frontend app hosted as Node App on Linux. Your can host upto 8-10 Web app in a single app service plan and on Linux this will cost rupees 1000 per month. I prefer this approach than hosting on Windows as App Service plan on windows will cost you somewhere rupees 5000 per month.

Create a file “server.js” in the “root” directory and write the below code:

const express = require('express');
const app = express();
const path = require('path');
const port = process.env.PORT
app.use(express.static(path.join(__dirname, '')));
app.get('/', function (req, res) {
    res.sendFile(path.join(__dirname, '', 'index.html'))
});
var server  = app.listen(port, () =\> console.log('Api listening on ', server.address().port));
module.exports = server

express_package.json

{  
  "scripts": {
    "start": "node server.js"
  }  
}

File structure will look like this.

Writing CI/CD pipeline is interesting if it’s Single page app say React. React App already contains package.json with the script support to start, build, test. And We need another package.json needed for node app hosting. Trick here is – We save package file as express_package.json in the root folder. First, we build the React App. Then we copy server.js and express_package.json as package.json to the build folder created during build script. Once again we execute npm run build to package node app containing react app as deployable component.

CI/CD pipeline:

Option 3: App Service on Linux using serve package

When you set up a new App Service instance, you can choose underlying OS App Service, Deploying to windows is straight forward due to build in IIS (Web server support). But it becomes complex you select to publish your static site to Linux as it does not come with a baked-in web server. So you can’t just copy your static site in there. To fix that, we need to send a web server up with our files. A simple way to do this is to use
the serve package from npm.

We can leverage the fact that Azure bakes pm2 into every NodeJS app in App Service. pm2 is a process manager for Node, and you can start apps with it. That means that if we include the right kind of file in our project, Azure will see it and use pm2 to start our project. The file pm2 looks for is called ecoysystem.config.js. In that file, tell pm2 to start “serve”.
Passing the -s flag makes “serve” route every request it can’t find back to index.html. We want that because we have a SPA and we are handling all the routing on the client.

module.exports = {
  apps: [
  {
      script: "npx serve -s"
  }
 ]
};

App Service’s ability to build your project for you saves time and effort when deploying 'Kudu' will use the 'workers' built-in images. Request hits front-end role which calculates the appropriate worker (Docker host).

1. Web Apps on Linux is built on top of Docker technology,  two different containers (App and Kudu Container) per app that share the same storage volume.

2. Request would routed to App container which uses PM2 to manager nodeJS