Error while browsing angular 8 app which is deployed in Azure - azure

Please let me know why i am seeing below error when browsing angular app( version 8), my default app runs on localhost:4200 but i get error when i try to browse in azure, i am using azure app service extension in visual code and deploying through that and i dint see any error while deploying, i read some one mentioning adding port in config would resolve the issue, but it didn't, let me know what i am missing here.
Config file with port number
error in azure log stream

Azure App service only supports port 80/443. You can do app.listen(process.env.PORT); in your code. I had a similar issue when hosting node app. See here.

Build the web application before deploying with the ng build* command. This command will create the dist/project-sample directory containing a transpiled, minified, ready-to-deploy version of your application.
Deploying to an Azure Web App is as simple as right-clicking on the web app in the Azure App Service extension and selecting the “Deploy to Web App” option. The extension will make a suggestion on what to deploy but use the Browse option to select the dist/project-sample folder instead.
Also the default version of Node on the Azure Web App is not the version that you want to use. Luckily, the version of node can be changed with the WEBSITE_NODE_DEFAULT_VERSION with value 10.16.0. environment variable. Navigate to the Application settings section of the Application settings page for your Azure Web App.
For more details, you could refer to this article. BTW, check your web.config with this SO thread.

Related

Can't Deploy React Ts App to Azure App service

I am deploying ReactTs App to Azure App service by Azure Extension of Visual Studio Code.
Although it has been successfully deployed, but at the endpoint of the deploy link,
there is no change (the initial default interface of the App service).
This is the endpoint of the deploy link:
https://test-appservice-nev.azurewebsites.net/
At the endpoint provided by kudu (it shows the deployed ReactTS app), the display is correct. I don't understand why is that.
https://test-appservice-nev.scm.azurewebsites.net/wwwroot/
Post adding the below Startup command customer is able to see the published changes while he is browsing to the web app URL.
pm2 serve /home/site/wwwroot --spa --no-daemon
You can refer to this documentation for more information about React deployment on the app service.

Jsp project not showing on azure,how to deploy it correctly

I have a java jsp project need to upload to azure web apps. So I created web app service but in ftp there is no web apps folder, so I created one but still I can't access it.Any suggestions please.
First, make sure your App Service Web App has Tomcat as the Java web server in general settings:
Then make sure your JSP files are copied under /wwwroot/webapps/ROOT/
You might need to restart the web app after your files are deployed
For more information, please check our quickstart and configuration guide:
https://learn.microsoft.com/en-us/azure/app-service/quickstart-java
https://learn.microsoft.com/en-us/azure/app-service/configure-language-java

Vue Frontend and Express backend on same Azure web app Service

I have built a web app that has a Vue front-end and an express back-end.
I am trying to host these on an Azure Web App Service but I am a complete novice with Azure.
I have gotten the web app working fine when I place the Client side in one web app and the Server side in a different one.
I want to have both running in the same web app.
From researching online it seems that I need to go to:
my web app-> configuration-> path mappings ->Virtual applications and directories.
I created a new application with Virtual Path "/app" and physical path "site\app".
I deployed (using visual studio code) my back-end to my azure web app and thus this sits inside wwwroot.
In filezilla I create a new folder in the site directory called "app" and paste in my built Vue client side.
However, when I try to navigate to www.myapp.azurewebsites.net/app I am not presented with the expected Vue index.html rather a 404. If I just navigate to www.myapp.azurewebsites.net/ I get the default route from the server side as expected.
What am I doing wrong?
When creating a webapp, please choose Windows operating environment, because currently choosing Linux does not support Virtual Application and directories.
The directory structure should be like below.
Setting in portal.
For more details, you can refer my answer in another post.

How to setup iis in Azure web app service with Net Core 2 app?

I develop simple Web Api on Net Core 2 and add Angular app to it (inside wwwroot folder) and publish it from my VS 2017 IDE to Azure Web App Service. All work fine, but when I reload page of my app in browser, server can't find route. So It often happens when iis not setup for SPA, It's described in https://angular.io/guide/deployment, I must configure the server to return the application's host page (index.html) when asked for a file that it does not have. How I can setup server node of iis in Azure Web App Service (web.config in Net Core 2 was deleted).
I am afraid you cannot achieve this.
Cause: Azure App Services runs IIS so it behaves mostly the same as local IIS, routing requests using a native module called AspNetCoreModule. So, it needs your published web.config file. Even though you deleted the web.config file, Azure would also generate a new web.config file to be used.(Though I don't understand why you delete the web.config file)
Solution:
Even you can upload the web.config file to Azure again, I'm afraid of that it will be ignored and doesn't work. So, I suggest you redeploy your website which contains web.config file to Azure and configure it well.
Additional: Azure Web App service is a kind of PaaS. So, if you want to install IIS manually, you can choose to host your website on a Windows Azure VM.

How to deploy and host .NET Core self-hosted console apps in Azure?

App 1: I have a React app (based on create-react-app) which I've added as a Web App in Azure - that was pretty straight-forward to setup. This is using the JS SignalR client to communicate with the server, mentioned next.
App 2: This app is the ASP.NET Core SignalR Server application created with dotnet new console. This app exposes a SignalR endpoint and is "self hosted".
App 3: A 2nd ASP.NET Core console app is setup as a SignalR client. This is responsible to fetching some data, and sends those data to the SignalR server. This takes the SignalR endpoint (url) as a commandline argument.
Running all this locally is pretty straightforward:
App 1: npm start / serve -s build
App 2: dotnet run -commandline args (runs on localhost taking a hubpath and port from the args supplied. The port is so that multiple instances SignalR servers can run on localhost - not sure if this is the way to do it in Azure or if they're differentiated with separate urls and hosted seperately there)
App 3: dotnet run "http://localhost:5000/somenotificationhubname"
I've added a bat file in each of the console apps, so I can open multiple instances of those, with different args.
So locally it runs as easily as clicking 3 bat files.
But I'm kinda lost on how to host all this in Azure. The web app seemed pretty straightforward. I just created a web app in Azure, connected to it through an FTP client and copied over the contents of the build folder from the React app.
But what to do with the ASP.NET Core console applications so that the SignalR console app will be hosted in Azure and has its endpoint exposed for the other 2 apps to consume?
I tried adding both both App 2 and 3 as webjobs under App 1, but that didn't seem to work.
I've also heard that SignalR should not be running on IIS, so would it make sense to make it self-contained (exe) and run it inside a docker container? Any help is much appreciated.
I will suggest to change your app to use AppSettings file for configuration values instead of the commandline args.
You can easily change the value of appsettings without redeploying or changing anything.
You can have multiple appsettings file based on environments.
Allows you to easily duplicate the app with same code but different appsettings for your multiple signalr server.
This will make it easier to deploy using the standard publishing wizard in Visual Studio or via command line.
You could try the publish Profile in Azure App Service with the help of Visual Studio,
Reference 1
Reference 2
Once you successfully publish your webApp. You can double check the deployment using kudu service (or) App service editor
Advanced Tool-KUDU
AppService editor

Resources