Azure create the most basic App Service to serve static files with or without Node through the Portal

Question

I am very confused about how App Service works internally. I was exploring it and wanted to create a simple App Service through the portal to serve static files but only found a tutorial that uses a shell, not the Azure portal, that also requires services such as storage I don't need.

Here's what I've tried:

1. Got a subscription and created a resource attached to the free trial subscription
2. Create an App Service, basic (free) on Linux, using a new linux service plan and code (not container). I cannot choose any stack or runtime with only a static web server, so I select Node (LTS). I leave the startup command blank (later I'll expand on this). Http version 1.1 or 2 does not seem to make a difference. FTP enabled.
3. The resource is properly created, I can see the typical hosting start web
4. I connect to SFTP and I can see I have a path site/wwwroot with a single file hostingstart.html that looks exactly like the welcome page on the screenshot that I see when I access the website URL. I think to myself: "great! I can simply edit this html and I should see the result". Wrong. It does not seem to be the html being served. Not sure why it's there but if I remove it, I still see the same landing page on my site's URL.
5. I create an site/wwwroot/index.html but no luck. It's not being served. Maybe Node is not configured by default to do so.
6. I create a simple server.js that is capable of serving statically any file: https://github.com/TheJaredWilcurt/NPM-Free-Server So I use FTP to place a site/wwwroot/server.js and I leave an index.html (in my localhost it works :) ).
7. I configure in App Service a initial command like node server.js so that it can run and serve the page and I restart the server. Nothing, no effect.
8. I can see on the logs that my server.js is running. I can see a trace that says it's running on localhost:8000

At this stage it's been several hours investigating without luck. It can't be that hard! I find the following question surprisingly not answered: https://github.com/MicrosoftDocs/azure-docs/issues/32572#issuecomment-551053105

Could anybody shed some light on this? I am open to suggestions. My goal is: To have (only) an App Service serving a static index.html with a hello world created through the Portal.

Ta!

UPDATE 1: Thanks to https://stackoverflow.com/users/188096/gaurav-mantri for his suggestion. But I'd like to put emphasis on App Service being required as it's for training purposes and I'd like to go from very basic up to more complex dynamic app with the same service and continuous deployment.

Answer 1

If all you care about hosting static content and no server-side code, take a look at static website hosting in Azure Storage: https://learn.microsoft.com/en-us/azure/storage/blobs/storage-blob-static-website. You don't really need to create an app service for that.

Answer 2

@iberodev I deployed a svelte app to app service. I used the Deployment Center. As you did I marked the app as Node 10 app.

The Azure deployment pipeline did run the npm run build and npm run start commands after spawning a docker container (at least I think so by looking at the log files at several places.)

"start": "sirv public --single -H 0.0.0.0" works fine

"start": "sirv public", this is the start command from original svelte template, this makes the docker container to fail starting.

Those are my experimentations so far.

I think but I am not sure; Azure will run the start command in package.json, this way my demo svelte app works.

sirv command comes from sirv-cli in package.json.

You can try other static file servers like serve if you wish.

This way you can develop and commit in phases to have a gradually enhancing app.

I am not sure about the sirv commands performance as a web server for prod. But you mentioned it is for training purposes, it will fit.

package.json

{
  "name": "svelte-app",
  "version": "1.0.0",
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "sirv public --single -H 0.0.0.0"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^11.0.0",
    "@rollup/plugin-node-resolve": "^7.0.0",
    "rollup": "^1.20.0",
    "rollup-plugin-livereload": "^1.0.0",
    "rollup-plugin-svelte": "^5.0.3",
    "rollup-plugin-terser": "^5.1.2",
    "svelte": "^3.0.0"
  },
  "dependencies": {
    "sirv-cli": "^0.4.4"
  }
}

Answer 3

I faced the same issue and have not been able to figure out why the newly created webapps do not directly use the hostingstart.html files. This is true in many different tech stack configurations. However, I created a static html (css and js included) web app in azure using these steps.

This created a .Net based webapp, which was not available in the portal. It had options especially on the default pages, etc. I have now re-used this webapp for starting the project from scratch and keep building on top of it. Hope this helps.