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
Related
The bounty expires in 4 days. Answers to this question are eligible for a +400 reputation bounty.
muttley91 wants to draw more attention to this question:
Kind of stuck with this one, looking to get more eyes on it
I created an ASP.NET Core app with Angular as instructed via this guide. I'm publishing it to Azure using the GitHub Action support, which was generated by Azure and then I modified to get it to work. I've got it working for my app but only the API seems to publish, and at the designated endpoint URLs. This makes sense since I had to modify the workflow to indicate the API project directly. How can I publish the Angular app (in the UI project) to Azure as well with this same workflow?
Here is the repo for reference: https://github.com/rarDevelopment/rardk-web-dotnet
The workflow: https://github.com/rarDevelopment/rardk-web-dotnet/blob/main/.github/workflows/main_rardkweb.yml
and the API sample endpoint can be seen running here: https://rardkweb.azurewebsites.net/WeatherForecast
the Angular app will get published via npm run build , it says so also in the guide you linked, here
The publish process takes more time than it does for just an ASP.NET Core project, since the npm run build command gets invoked when publishing.
In dotnet static files are stored within the project's web root directory.
Your angular project should be configured to publish the result of npm run build in the web root directory (www) of your dotnet project.
When the built Angular app is in the www directory, then you build/publish the dotnet project, which needs to be configured (see the guide examplecode) to serve static files.
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.