Blazor-server-side can't see GLTF files - iis

i have my blazor app hosted on azure with iis
got some GLTF file i want to access with three.js but its like my app can't see any of my GLTF files.
i have added a virtual directory inside my blazor app in IIS manager. (E://Output) is added inside IIS as a virtual folder next to wwwroot
if i go to https://xxxxx.com/output/637650602249582109_Output/VisData/room.bin (this file exist fine, and it will start downloading it)
if i go to https://xxxxx.com/output/637650602249582109_Output/VisData/scene.gltf
it gives me a 404 ..
i have tried to add this in my startup:
app.UseStaticFiles();
app.UseStaticFiles(new StaticFileOptions
{
ServeUnknownFileTypes = true,
DefaultContentType = "text/plain"
});
it kinda helped with files i included in the projects wwwroot folder (wwwroot/VisData/scene.gltf)
https://xxxxx.com/VisData/scene.gltf
But what am I doing wrong with the files i have includes thru a virtual drive?

Try to add the GLTF file extension .gltf to your IIS, .bin is already mapped:

This can be done by dependency injection, just add the following to your Program.cs.
using Microsoft.AspNetCore.StaticFiles;
...
builder.Services.Configure<StaticFileOptions>(options =>
{
options.ContentTypeProvider = new FileExtensionContentTypeProvider
{
Mappings =
{
[".gltf"] = "model/gltf+json",
[".glb"] = "model/gltf-binary",
[".bin"] = "application/octet-stream"
}
};
});
Full docs with an alternative option:
https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/static-files?view=aspnetcore-6.0#blazor-server-file-mappings-and-static-file-options

Related

Why are particular dll's deleted from Azure App Server site when deploying?

I have a .net app that I deploy to Azure. It is compiled to the directory c:\publish\bin under Release compile option, but for some reason it deletes one dll in particular , the System.Runtime.dll.
So before it starts to deploy it displays this
Starting Web deployment task from source:
manifest(C:\LocalWebProject\obj\Release\Package\My.SourceManifest.xml) to Destination:
auto(). Deleting file (AzureAppService\bin\System.Runtime.dll).
Adding ACLs for path (MyWebProject)
Any ideas why this would happen ?
Particular dll's deleted from Azure App Server site when deploying:
I've created a sample webapp using visual studio and was able to deploy it successfully to Azure.
Program.cs:
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddRazorPages();
var app = builder.Build();
if (!app.Environment.IsDevelopment())
{
app.UseExceptionHandler("/Error");
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();
app.MapRazorPages();
app.Run();
appsettings.json:
{
"Logging": {
"LogLevel": {
"Default": "Information",
"Microsoft.AspNetCore": "Warning"
}
},
"AllowedHosts": "*"
}
Build on IIS Server:
Published to Azure:
Output:
Need to check:-
Never put anything in bin. Bin is not a source folder for binaries rather, it is the destination location for binaries.
Dependency Tree
.CsProj
|
classlibrary.dll
|
.binlibrary.dll
It is preferable to think of the bin folder as it is created by a project as "output" directory; they should only contain files generated by the project build.
Instead of using build, try rebuild which will perform cleanup and build the current project. Usually, the outputs from previous builds are kept with the build command. Therefore, it may result these kinds of dependency related actions like "deletion of specific dll files". Rebuild does remove them and build again.
While cleaning up, it might remove the necessary dependencies also. It is possible to restore deleting files.
Note:
I suggest, Use Visual studio while working with Web Apps to avoid these kinds of issues.
Check for Visual Studio version and update it to latest versions.
Reference: dll files getting deleted

How to read contents of a directory in linux on nodejs?

I am creating an application on nodejs that has to read contents of a folder in the install location. The installer creates the directory 'cert' at the install location.
My code is:
const dircert = './cert'
files = fs.readdirSync(dircert)
if (!files.length) {
***some code***
} else {
files.forEach(file => {
if (path.extname(file) == '.key') {
pathkey = path.resolve(dircert, file)
}
if (path.extname(file) == '.crt') {
pathcert = path.resolve(dircert, file)
}
})
This runs fine in windows but not in Linux. The installer is not able to read the contents. What do I need to change to ensure that it works in both? I am pretty new to linux.
The application is getting installed in ProgramFiles in windows but in /opt/AppName in linux. Please suggest.
Editing to add: So this cert folder is getting created under /opt/AppName/ in linux and under c:/ProgramFiles/company/App Name/ in Windows. While this code runs fine on windows, on linux this code tries to look for cert at root. How do I make sure it looks for the folder at the installed location which is /opt/AppName, and it should work on both the platforms.
It's unclear from your question how the files are being installed and how the code is being executed. Both of these matter in Linux. You can use the __dirname node variable with path.resolve() to get the directory of the current module. If cert is below the current module, you can use the following code to resolve the location:
const path = require('path');
const dircert = path.resolve(__dirname, 'cert');
If you're using ES Modules:
import path from 'path';
const dircert = path.resolve('cert').

Deploy VueJS App in a sub-directory or sub-path

I’m experiencing problems deploying a Vue JS app built using the Webpack CLi to work.
If uploaded in a root directory everything renders fine, but inside a subfolder, all the links break.
I want deploy VueJS App to this url :
https://event.domain.net/webinar
I have added publicPath in vue.config.js :
var path = require(‘path’)
module.exports = {
publicPath: ‘./’
}
But only the css and js folders point to the path /webinar.
For assets, fonts and others still point to the subdomain https://event.domain.net.
CSS and JS point to path /webinar
Asset, fonts still point to subdomain https://event.domain.net/
Console
use value of publicPath as /webinar that should work.
More details are here https://cli.vuejs.org/config/#publicpath
you can configure publicPath even based on environment.
Sagar Rabadiya pointed you to the right link:
create a file called vue.config.js in the project root (where your package.json is located).
prompt the following code snippet inside:
module.exports = {
publicPath: process.env.NODE_ENV === 'production'? '/your-sub-directory/' : '/'
}
and save the file.
Open a terminal and navigate to your project, then run npm run build to generate a production build from it.
As soon as the production build has been generated, copy the contents from it and paste it in the sub-directory you created in the root folder. For example, if you use Apache, the default root directory is the htdocs folder. I've also created a virtual host on the server, maybe you also need to do this.
Open the browser and type the address where your sub-directory lives. For example: http://your-server-url:your-port/your-sub-directory/ Your should see your app now.

Vuejs Deployment issues: IIS, routes

I am struggling with the deployment of a Vuejs front-end on my local IIS.
I would like to have my app deployed into a folder named FE_STB which is a sub-directory within my C:\inetpub\wwwroot folder.
Ideally, the URL to access the front-end would be http://localhost/FE_STB/.
In order to do so, I tried the following in vue.config.js:
module.exports = {
// Used to build the path for the css, js
baseUrl: process.env.NODE_ENV === 'production'
? '/FE_STB/'
: '/',
// The folder where the app will be built in the project directory instead of the default dist folder
// outputDir: 'Vue',
};
running npm run build generates an index.html, a favicon.ico, my img, js, css and fonts folders.
The index.html contains link tags such as (<link href=/FE_STB/css/chunk-05c5.672f5bfa.css />) and i thought it was going in the good direction.
However, it keeps returning a
404 not found error
when i try to access http://localhost/FE_STB/.
On the other hand, If I copy only the index.html into the root directory of my IIS installation (wwwroot) instead of the FE_STB subdirectory, and check the http://localhost/ URL, my app appears correctly.
However, when I start browsing the app and hit the refresh button, I get an error. For example, If I am on http://localhost/about/ on my app and refresh it with F5, I will get a 404 error as it’s looking for C:\inetpub\wwwroot\about\ directory which doesn’t exist obviously.
I also tried the web.config and the IISrewrite solutions as explained on the vuejs website or tried to add:
const router = new VueRouter({
mode: 'history',
// To define sub-directory folder for the deployment
base: 'FE_STB',
routes,
linkActiveClass: 'active',
scrollBehavior(to, from, savedPosition) {
return savedPosition || { x: 0, y: 0 };
},
});
in my router.js but it doesn’t change anything.
Any tips or directions would be really helpful.
Thank you
S.

How to access image via URL in Sailsjs --no-frontend API

I have an API project with Sailsjs, this was created with option --no-frontend.
So, i have an action that make an image upload to a folder named "uploads" in root directory, images are uploaded with success and i can see them in this folder, everything's ok till now.
When i try to access this image from another application via URL like:
http://localhost:1337/uploads/image_name.jpg
I got 404. My question is: How can i access my uploaded images via URL in my custom folder uploads?
I have one technique that I prefer and it's pretty simple.
Inside .sailsrc add paths config like this:
{
"generators": {
"modules": {}
},
"paths": {
"public": "public"
}
}
Add folder to root of your app called public and inside add uploads folder like this:
After this, just lift your app and test.jpg will be available on localhost:1337/uploads/test.jpg
I end up serving images with Nginx block, like this:
server {
server_name myapi.dev;
location ~* ^.+\.(jpg|jpeg|gif|png)$ {
root /var/www/myapi/uploads/;
}
}
So, i can access images via URL:
http://myapi.dev/279b68b9-ae43-4674-a85d-94d5bad3365a.png

Resources