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:
Got a subscription and created a resource attached to the free trial subscription
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.
The resource is properly created, I can see the typical hosting start web
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.
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.
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 :) ).
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.
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.
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.
#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"
}
}
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.
I got this working when changed app plan to windows, app service windows, runtime .NET 5 and removed the hostingstart.html
Related
Is it possible to deploy NextJs SSR to Azure Static Web Apps?
In Microsoft doc they said
In the Build Details section, select Custom from the Build Presets.
https://learn.microsoft.com/en-us/azure/static-web-apps/deploy-nextjs
But I see in Build Presets there is NextJs
Build Presets Image
Is it new feature that supports all NextJs functionalities including SSR ?
In Azure/static-web-apps repo I found one comment from 8 March 2022 that says:
As of today, Static Web Apps only supports static rendering of Next.js Apps. However, the team is currently working on supporting framework-specific Server-side rendering for Next.js and you should be seeing a public preview of the same soon.
https://github.com/Azure/static-web-apps/issues/749#issuecomment-1061993049
I created Azure Static Web App with NextJs preset with output_location: ".next"
because when run "npm run build" the output folder is ".next"
but GitHub hook failed with this error
Failed to find a default file in the app artifacts folder (.next). Valid default files: index.html,Index.html.
If your application contains purely static content, please verify that the variable 'app_location' in your workflow file points to the root of your application.
If your application requires build steps, please validate that a default file exists in the build output directory.
The only way I could deploy NextJs in Azure Static Web Apps is when I change the build command in package.json to
"build": "next build && next export",
and for output location type "out" which is SSG but not SSR.
I was trying to do the same thing. It looks like Static Web Apps doesn’t support SSR yet but they may add support soon as you’ll see here https://github.com/Azure/static-web-apps/issues/749
BTW, I used the same commands to deploy the static content to Azure SWA.
https://github.com/Azure/static-web-apps/discussions/921
This will be supported soon, Microsoft is working on this
SSR is now supported in preview.
https://techcommunity.microsoft.com/t5/apps-on-azure-blog/extending-next-js-support-in-azure-static-web-apps/ba-p/3627975
I have a Wordle-esque app that I want to deploy using Azure. Repo here. It is a fork from a popular open-source project, and I can also locally build and run the game. Locally, it runs perfectly.
I am trying to use Azure App Services to deploy it, using a Github Action. All the Actions pass, and the App can be successfully built. However, when I try to view the deployment here the only error I am receiving is
You do not have permission to view this directory or page.
Since it runs locally, and it pass its github action build, I do not know how to proceed here. I have tried restarting the app, and changing the resources I am using to host it, but that does not work. Some other answers seem to suggest the problem is about it not finding index.html, but I can access that through https://shetland-wordle.azurewebsites.net/public/index.html and the page is blank.
If i look under wwwroot/ in the Azure debugger I see the following file structure:
Any help would be appreciated
turns out it was something strange with package.json. I needed to change the path to my react scripts:
"start": "node_modules/react-scripts/bin/react-scripts.js start"
Not sure if its good practise to do this, but it works now
I deployed a static web app, made in nuxtJs with vuetify.
All is working very well locally but once deployed, I cant see all component done with vuetify.
I follow those instructions : https://nuxtjs.org/deployments/azure-static-web-apps/
Thank you.
To deploy your nuxt.js app you need to follow the below workaround :
Please make sure that you have add the following in your package.json
"scripts": {
"dev": "nuxt dev",
"build": "nuxt generate"
},
If the website does note immediately load, then the background GitHub Actions workflow is still running. Once the workflow is complete you can then click refresh the browser to view your web app.
To check the status you can navigate as shown below or you can use this https://github.com/<YOUR_GITHUB_USERNAME>/repository name/actions
For more information please refer the below links:
Microsoft Documentation : Deploy server-rendered Nuxt.js websites on Azure Static Web Apps
SO THREAD : Azure static web apps not loading page resources correctly. css or javascript files
From the sample, you may be using routes.json - note that, the functionality defined in the routes.json file is now deprecated and better implemented in the Azure Static Web Apps configuration file.
Kindly see these docs for sample configuration and see if that helps.
https://learn.microsoft.com/azure/static-web-apps/configuration#routes
https://github.com/Azure/static-web-apps/wiki/routes.json-reference-(deprecated)
To benefit the community, added our discussions from Q&A forum.
I've created two pipelines: build and release for Nodejs app.
Here is the link to nodejs app repo: azure web service
Here is the tasks for build pipeline:
Here is the wwwroot folder structure:
So it is look like all required files are present.
Despite that, I'm constantly receiving:
You do not have permission to view this directory or page
I've tried to add web.config file, but it did not help.
I have front end application on same App service Plan and it works, so it is no way that I have bad service plan.
Do you have any suggestions?
Thanks a lot.
I was able to deploy my service only after using nodejs-docs-hello-world starter.
It is looks like web.config is a required file, btw, still did not find any meaningfull documentation for web.config.
Make sure your azure nodejs env support your js syntax (import from ...), in other case use webpack or typescript.
I'have found App Service Editor very helpful if you want to debug your code errors. See section Output.
I had a problem also with nodejs version, despite the fact I choosed node 12 tls during web app creation, I have noticed that my app used node 6 under the hood. So I changed default nodejs version to 10. See here how to do it
Also, I want to thank #Jason Pan for his help.
I'm still new to web development and I'm using Firebase to handle all my data right now.
I have everything up and running, but how do I make it so my Firebase website updates whenever I make a change to my files? Do I have to manually call firebase deploy after each change in order to see the updated site?
To deploy your changes to the Firebase Hosting server, you will indeed have to run firebase deploy.
But normally when I develop an application, I run a local web server for the most part. I then only push the changes to Firebase Hosting when I have finished the feature/bugfix that I'm working on.
For local execution, I either use http-server or a gulp script that also packs the files. The latter have the advantage that they can watch your local files for changes and execute the correct steps based on that.
I'm working on a Angular 4 app with Firebase as a backend, so the steps are
$ ng build --prod
$ firebase deploy
It really depends on what you are doing and what you're trying to deploy.
There's three different areas to deploy to:
Hosting - this is just a simple web server in which to house your HTML, JavaScript and any other static files
Database - your Firebase access rules are placed in here
Storage - access rules to the file store, typically user submitted files
Typically you'll be developing your HTML and JavaScript files locally and testing them there. When you're ready to deploy to the hosting environment you'll typically deploy via firebase deploy, this will deploy all of the local files and rules to the Firebase servers.
If your question relates to just the database rules then there is no local version or instance of this, you need to deploy changes as you make them in order to make them active.
You can perform a rules update by issuing the command firebase deploy --only database. Just make sure you have a firebase.json file with "database": { "rules": "firebase.rules.json" }, or similar defined in it.
Bonus: Use BOLT to build the rules, it transpiles into a Firebase JSON rules file but makes development so much easier especially when your rules inevitably become more complicated.