ASP.NET Core 5.0 Web App - published out of the box app to IIS Server 404 on static files from wwwroot - http-status-code-404

Created an out-of-the-box ASP.NET Core 5.0 Web App - runs locally just fine.
Published the project to a folder and copied contents to Windows Server 2019 running IIS.
Installed ASP.NET Core 5.0 Runtime (v5.0.5) - Windows Hosting Bundle.
Application Pool: .NET CLR version: to No Managed Code Manage, pipeline mode: to Integrated
Project File contains:
public static IHostBuilder CreateHostBuilder(string[] args) =>
Host.CreateDefaultBuilder(args)
.ConfigureWebHostDefaults(webBuilder =>
{
webBuilder.UseStartup<Startup>();
webBuilder.UseStaticWebAssets();
});
Startup contains:
app.UseStaticFiles();
When referenced, all content under the wwwroot folder throws a 404 error:
https://servername.test.com/subapplication/css/site.css
The default page does get loaded, just with no styling because of the files not found.

I ran into the same issue when trying to setup my app. You just have to manually copy over the the wwwroot/ folder into your build folder. So if you ran dotnet build, just copy the wwwroot/ folder into bin/Debug/net5.0/.
I'm sure there's some way to do this automatically, but I am currently unaware since I am relatively new to ASP.NET Core.
Here's some relevant Microsoft documentation about why this solution works:
https://learn.microsoft.com/en-us/aspnet/core/fundamentals/?view=aspnetcore-5.0&tabs=windows#web-root
The web root path defaults to {content root}/wwwroot.
https://learn.microsoft.com/en-us/aspnet/core/fundamentals/static-files?view=aspnetcore-5.0
Static files are stored within the project's web root directory. The default directory is {content root}/wwwroot, but it can be changed with the UseWebRoot method.
Hope this helps you as much as it helped me!

I ran into this problem and it took me quite a while to find the answer at https://learn.microsoft.com/en-us/aspnet/core/fundamentals/static-files?view=aspnetcore-6.0.
"ASP.NET Core apps hosted in IIS use the ASP.NET Core Module to forward all requests to the app, including static file requests. The IIS static file handler isn't used and has no chance to handle requests.
Complete the following steps in IIS Manager to remove the IIS static file handler at the server or website level:
Navigate to the Modules feature.
Select StaticFileModule in the list.
Click Remove in the Actions sidebar."
Problem solved

Related

App Service web app showing file structure instead of actual web apge

Today i've deployed my client react app to Azure App Service. The problem is, that instead of displaying site im interested in, it returns structure of wwwroot. Even if I change directory to /src/App.js it return code of the App. What is the problem?
When you run a node application on Windows Azure Web Apps, IIS is used as the webserver together with iisnode and most likely some configuration is wrong so IIS doesn't know what to start. I'd suggest to let Azure handle the creation of the web.config and you don't touch it unless you know what you're doing:
Create a file .deployment with the following content
[config]
SCM_DO_BUILD_DURING_DEPLOYMENT = true
Put the .deployment file as well as the content of your React app (don't include web.config, you also don't have to include the node_modules folder, Azure will handle this as SCM_DO_BUILD_DURING_DEPLOYMENT is set to true) into an upload.zip file.
Delete the content of /wwwroot in Azure
Run az webapp deployment source config-zip -g <ResourceGroupName> -n <AppServiceName> --src upload.zip
A new web.config should get created which should contain a handler for server.js which will be the file to be served by Node.js.
This is solved. Thanks to #azium
The only thing i needed to do is run
npm run build
in local before deployment

How to deploy React.js application that makes server calls to IIS?

Really new to web dev. so forgive me if this is a simple issue...
I want to host a React application on Microsoft IIS. This application makes server calls: this is the project I am trying to do https://www.twilio.com/blog/react-app-with-node-js-server-proxy)
What happens when I link the build to IIS is that I'm able to type something in the form, but I'm unable to see a response from the application (the fetch call is being made but is failing and nothing is returned). When I run npm run dev in the project folder the form works as it should, so it appears that the server isn't being hosted(?).
to deploy react application in iis follow below steps:
1)run below command to build the site:
npm run build
the above command creates a build folder inside your application folder.
2)now open iis manager.right-click on the server node and select create new site.
provide site binding detailed and set the folder path of the site to the build folder which is generated by the command.
https://stackoverflow.com/a/60110712/11147346

How to copy react build files in a web app with azure pipeline before release?

I set a build for a react web app in azure devops and another one for a web api application (c#). I would like to copy the output of the react build in the web api project before release them in Azure. I tried with a copy task but i failed due to the web api application output (it's a zip). Help would be very appreciated.
On the project I'm on right now, this is solved by
1. building the front-end before building the web app project, and
2. including the react-output-folder in the visual studio project, but using a wildcard, not each file:
<Content Include="webstorybook\*" />
By doing that, the files should be included in the published .zip file. Hope it works for you, too.

Process for React App deployment to Azure Web?

I am currently trying to deploy the default react web app to Azure and I am encountering an issue where though I deploy the contents of my build folder to the azure hosted /site/wwwroot folder I end up on the following page when going to my hosted address: https://[project_name].azurewebsites.net/
Landing Page :
I intend to deploy the default create-react-app react application so that I may have the process down for when I deploy my real site.
The process I have followed is pretty much exactly what is mentioned in this article https://medium.com/#to_pe/deploying-create-react-app-on-microsoft-azure-c0f6686a4321
Create the default React App with create-react-app
Run "npm run build" to get the build folder
Go into the Azure React Portal and create a new Web App ***
FTP / Git deploy the contents of the local build folder into the Azure website's /site/wwwroot/ folder
For overkill I added the below web.config file to handle future routes, but have also tried without this step
In the end my Azure site's contents look like this
Folder contents :
At this point when I try to access the Azure site I get the "Hey, Node developers!" page which implies my code is not deployed. Any thoughts as to why this might be the case?
*** I have a hunch that during the configuring of the Azure Web Api something is not set up correctly perhaps because I select Node 10.14 as my Runtime stack simply because that is the version of Node that I have installed and am using with my local React app.
Thank you folks for your time.
Another approach is to configure Azure Linux Web App Service to run a startup command to serve your React app in "Settings > General settings > Startup Command":
pm2 serve /home/site/wwwroot/ --no-daemon
Remember to change the path to your build path (The path to your index.html file).
If you use react-router and wants to make any direct access on custom routes be handled by index.html you need to add --spa option on the same command.
pm2 serve /home/site/wwwroot/ --no-daemon --spa
Using --spa option pm2 will automatically redirect all queries to the index.html and then react router will do its magic.
You can find more information about it in pm2 documentation: https://pm2.keymetrics.io/docs/usage/pm2-doc-single-page/#serving-spa-redirect-all-to-indexhtml
I've coped with the same problem recently: React router direct links not working on Azure Web App Linux
You have created a Linux App Service - your web.config won't work because there is no IIS.
If you don't select node as the runtime stack, your app will work for the most part because it serves the files like a static web host. However I would suggest to keep the runtime stack as node and add the following file to your deployment in the wwwroot folder:
ecosystem.config.js
module.exports = {
apps: [
{
script: "npx serve -s"
}
]
};
https://burkeknowswords.com/this-is-how-to-easily-deploy-a-static-site-to-azure-96c77f0301ff
There's an extremely simple way to overcome this problem, and although it is not perfect, it works both on AWS, Microsoft Azure, and probably any other hosting:
Just point the error document to: index.html
I found it out here:
https://stackoverflow.com/a/52343542/3231884
Disclaimer: This solution is not perfect and impacts SEO. Google doesn't rank well sites that throw 404s.

Publishing on Azure a asp.net Core 2.0 WebApp with ReactJS on Development mode

I've got a web app with asp.net Core 2.0 and ReactJS.
If I publish the app in Azure in a Production environment everything goes right.
But when I try to change it to Development (adding on the Application Settings the key ASPNETCORE_ENVIRONMENT with value Development) the app crashes at the startup.
More exactly on the Configure method trying to do this:
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
{
HotModuleReplacement = true,
ReactHotModuleReplacement = true
});
}
And it throws an error like this:
An error occurred while starting the application.
AggregateException: One or more errors occurred. (Attempt to connect to Node timed out after 60000ms.
)
System.Threading.Tasks.Task.GetResultCore(bool waitCompletionNotification)
NodeInvocationException: Attempt to connect to Node timed out after 60000ms.
Microsoft.AspNetCore.NodeServices.HostingModels.OutOfProcessNodeInstance+d__13.MoveNext()
I tried to publish it locally but is the same that in Azure.
Any one could help me to configure it correctly?
Thank you.
We host our site in Azure as well and the solution for me was to add this config key/value to the Application settings.
Key: WEBSITE_NODE_DEFAULT_VERSION
Value: 6.9.1
I suppose you could also add it to your appsetting.json or web.config as well.
ok after a long struggle I have found a way to overcome this issue.
First set the app settings in Azure WebApp Settings - WEBSITE_NODE_DEFAULT_VERSION with the latest version. In my case I have used the node version 8.9.4 matching my dev machine environment.
The Azure deploy task in VSTS has got a feature to run a script post deployment where we can run "npm i -g" which will pick the package.json file from the wwwroot folder.
Try this and update here.

Resources