.mem and .wasm MIME type errors in Azure only - reactjs

This app was built in Visual Studio 2022 using the "ASP.NET Core with React.js" project template. In a nutshell this template sets up a React front-end that lives in the same project with a .NET6 Web API backend. A proxy config file defines routes that will be sent to the API, all others default to the React app. It's a clever setup and is working well except for one recent problem.
When I run the app locally at localhost:3000 everything works flawlessly.
I created a publish profile in VS2022 to publish directly to Azure as an app service. The publish is always successful. I can browse the app in Azure and the React UI loads without issues. There is one button in the app that triggers a 3rd party library called PDFTron to load an Excel file and preview it in the page. Running locally this works perfectly. Running in Azure I get a series of errors and the Excel preview never loads:
I'm using a 3rd party library called PDFTron for displaying an Excel file in the page.
Things I've tried:
PDFTron has an article listing the MIME types that need to be enabled. Since I'm haivng no problem running locally I assume they're already enabled by default in my local VS2022 environment. In azure I manually edited the published web.config as follows:
<system.webServer>
<handlers>
<add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModuleV2" resourceType="Unspecified" />
</handlers>
<aspNetCore processPath="dotnet" arguments=".\DocuParseWebApp.dll" stdoutLogEnabled="false" stdoutLogFile="\\?\%home%\LogFiles\stdout" hostingModel="inprocess" />
<staticContent>
<mimeMap fileExtension=".xod" mimeType="application/octet-stream" />
<mimeMap fileExtension=".res" mimeType="application/octet-stream" />
<mimeMap fileExtension=".mem" mimeType="application/octet-stream" />
<mimeMap fileExtension=".wasm" mimeType="application/application/wasm" />
</staticContent>
</system.webServer>
Unfortunately this had no effect.
My Program.cs file:
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddControllers();
var app = builder.Build();
// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.MapControllerRoute(
name: "default",
pattern: "{controller}/{action=Index}/{id?}");
app.MapFallbackToFile("index.html"); ;
app.Run();
Are there any additional steps to configure an App Service in Azure to work with these MIME types?

Related

Added file To Public Folder in React - Get 404 [duplicate]

I published a json file on to my website using ftp. When I tried to access my site using mtsite.com/abc.json it throws the below error.
The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.
My file is on hosted site on azure. Even if file in on server why did it say that file is not found?
Any place in azure portal where I can add or allow Mime type json? I cannot add web.config file as My files are all HTML and Json.
By default IIS (and so the Azure App Service) doesn't serve .json files. You need to enable this feature in your web.config. If don't already have one, create it in the root directory.
Open your web.config and place this code
<staticContent>
<remove fileExtension=".json"/>
<mimeMap fileExtension=".json" mimeType="application/json"/>
</staticContent>
under the nodes
<configuration>
<system.webServer>
And it should be fixed.
Here you can find a basic web.config template that i've made a while ago
P.S: Even though you are using only HTML and JSON, this is the only way to go (as there is not a UI solution in the portal). In this way you could also control other aspect of your website, for example the redirect to HTTPS for the HTTP requests.

running react bundle in Azure web app does not load json file

After building my react project it creates a bundle of files .js .json and index.html files.
I created a windows web app in azure.
When I deploy the bundle the page loads but none of the .json files do not load. I have seen other examples they talk webconfig changes but since this is a react project that does not apply.
I manually add a web.config in 'dist/prod' with the following to make it work.
<?xml version="1.0"?>
<configuration>
<system.webServer>
<staticContent>
<mimeMap fileExtension=".json" mimeType="application/json" />
</staticContent>
</system.webServer>
</configuration>
try it.
Note this for only static json files if your going to look dynamic content.you need add handler in config.files

Angular app on Azure Web app fails with "The resource you are looking for has been removed, had its name changed, or is temporarily unavailable."

I just published an Angular app to Azure Web Apps, after confirming general operation locally. However, I now get the following error (HTTP Error 404.0 - Not Found), specifically the D:\home\site\wwwroot\bin\www file:
However, using the Kudu tools, I can see that the file is indeed there:
What could cause this error?
By default, IIS blocks serving content from certain folders, including bin. You can either a) move the www folder out of the bin directory, or b) you could add the following configuration to the web.config:
<configuration>
<system.webServer>
<security>
<requestFiltering>
<hiddenSegments>
<remove segment="bin" />
</hiddenSegments>
</requestFiltering>
</security>
</system.webServer>
</configuration>
The 404.0 Error on bin\www was a bit of a misdirection. After putting a console.log in the www file and watching output, I found out that indeed bin\www was being called properly. The problem was further in and related to the serving of static content, initially the index.html file.
I was previously using the following to serve up index.html:
var serveStatic = require('serve-static');
...
app.use(serveStatic('.', { 'index': ['index.html'] }));
For some reason, while this worked locally, this didn't work once published to Azure Web App. So I decided to use a method that had worked for others. First I moved index.html to /public, and then used express.static:
app.use(express.static(__dirname + '/public'));
It should also be noted, that the associated web.config file must also have information related to the static content, for example: How to enable static files (and less support) when hosting a nodejs app within IIS using IISNode

IIS Express HTTP 403.14 when Debugging AngularJS SPA with WebAPI2

I've created a solution that contains a Web API 2 project as well as a separate HTML project to house my AngularJS SPA. The latter project contains index.html with app and Scripts folders. When I debug locally, I receive HTTP 403.14 Forbidden. Are there additional configuration steps needed to ensure the app will run locally as well as when deployed to Azure?
Try browsing directly to the index.html and not only to document root.
If that works, add those line to your web.config to set default document.
<system.webServer>
<defaultDocument enabled="true">
<files>
<clear/>
<add value="index.html"/>
</files>
</defaultDocument>
</system.webServer>

Deploy angular application on IIS

I am working on AngularJs application with node.js. Using gulp, I have created (compiled) my application (app in below image) and got the following directories
Now I completely struck how to proceed next. I want to host this application over IIS to run and see the pages (in views folder) but I don't know how to host it on IIS.
I tried this article, but it guides to use express server.
The issue is, how IIS will figure out that the first page lies in views folder, and even if I use the complete url
http://localhost:8078/views/index.html
it shows me all angular code with brackets like {{logginuser}} etc
EDIT:
Do I need web.config file here or not. If yes then how I will define entry point to the application?
Just have to configure a Web Application under a website in IIS and create a custom web.config.
In IIS, go to the Default Web Site, right-click and select Add Web Application
Set the Alias to be AngularApp and the Physical Path to be the root of your directory
Add a web.config file at the root of the directory with the following code
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<defaultDocument>
<files>
<add value="views/index.html" />
</files>
</defaultDocument>
</system.webServer>
</configuration>
Browse to your new Angular application by going to http://localhost/AngularApp (assuming http binding in IIS).
Lost 2 hours with this
The solution was to go to WINDOWS FEATURES and check 'static content', under COMMON HTTP features.
Hope this helps someone.
You need set as start page to you main screen (like index.html)
How can I set it in IIS?
Just go to web.config file and add following
<system.webServer>
<defaultDocument>
<files>
<clear />
<add value="index.html" />//Path of your Page
</files>
</defaultDocument>
</system.webServer>
More details : How do I set the default page of my application in IIS7?

Resources