Publish Angular App Alongside Web API to Azure - azure

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.

Related

Deploy NextJs SSR to Azure Static Web Apps

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

CI/CD PHP app with Webpack on Azure Web App

I'm trying to deploy a Laravel + Vue app over an Azure App Service - Web App. It is however very unclear and I cannot find any proper solution inside Microsoft's documentation to get it into working.
'Traditional' deployment workflow
What I typically do to deploy my code (outside CI/CD):
sync Git repository
run composer install
run npm run prod (which is a shorthand for compiling webpack in my case)
Done
There is a really easy approach with a Docker container, where in my Dockerfile I just configure php-apache image with additionally installed Nodejs (w. NPM).
However I would like to find a solution to use Azure's built-in features to configure this deployment. Is it possible?
I can use Windows or Linux Web Apps. No difference for me.
I recommend that you use continuous deployment. For specific operations, you can check the official documentation.
Recommended reason:
As long as it runs successfully locally and continuously deploys through git, the project can be released, and later updates only need to submit code through git.
You can easily view the deployment log in Action in git.
Simple operation and convenient update
Steps:
First, ensure that the project is running normally locally, and create web app services on the portal. (Linux is recommended for the nodejs program, which can avoid many problems caused by dependencies)
According to the official document, in the Deployment Center, select github for release
Check the release information of Action on the official github website and wait for the release to be completed
Note:
If it is a nodejs program or other language program, if the Linux operating system is used, the Startup Command may need to be configured in the Configuration. If the program cannot be accessed normally after release, then try to set npx serve -s (nodejs program, other Language program), and then proceed to restart the webapp.

Deployed Nodejs service does not work on Azure Web App

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.

Deploy angular 4 App in IIS

I have a multi-tenant Angular 4 and .Net core 2.0 application.
I have hosted .Net core API in IIS with deployment time debugging and for that I have followed this link.
https://learn.microsoft.com/en-us/aspnet/core/publishing/development-time-iis-support
With this configuration in IIS, I can access my API any time and if I want to debugg it, I can run it in VS.
Now, Is it possible to run Angular app directly with IIS. I mean is there any way that npm start will directly open app in specific IIS url like app.myapp.local, and not at localhost:4200
what I have did so far?
I have added one folder in wwwroot/myapp, and I have pointed it to Default web site in IIS.
then, I am building my app with ng build, copying all content of dist folder to wwwroot/myapp.
Is there any proper way in Angular, to handle this kind of scenario?
this question is not same as this Deploy angular application on IIS
because as I specified, I want to start my app in debugging mode at specific URL without building it, So please don't add it in duplicate without understanding question.

DotNet Core web app working locally but not when deployed to Azure

I am trying to build a new web app using DotNet Core.
The app is Web API + AngularJS with ui-router.
The same app was working correctly both locally and on Azure using ASP.NET 5.
When I updated, I fixed a lot of stuff and got the new app working locally.
However, on Azure, I have the following error whenever I try to do any action:
"The resource you are looking for has been removed, had its name changed, or is temporarily unavailable."
I searched for the error online and tried to use the provided solutions but in vain (e.g.: ASP.NET Core app not working after publish to Azure).
I did not post any code here because honestly I don't know where to start and what to post. Could someone please advise?
Regards,
In case someone was facing the same issue:
I was able to detect the problem by following this link (How do I debug an ASPNET Core MVC Application Deployed in Azure)
This helped me detect that it was not able to find node_modules
I added the node_modules directory to the publishOptions -> include
It worked!
Regards,

Resources