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

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

Related

Blazor-server-side can't see GLTF files

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

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.

How to do a redirect in Laravel for ads.txt

Google wants have access to ads.txt file like "example.com/ads.txt", but in Laravel we need redirect it to "public" folder.
How do it?
I try RedirectMatch 301 ^ads\.txt$ \/public\/ads\.txt, but it doesn't work.
Put your ads.txt file in the folder: public (for Laravel), then it will be accessible to the link: example.com/ads.txt . I have made on my laravel website and it's working fine
I have solved the issue in following way.
In my web route file:
Route::get('/ads.txt', function () {
$content = view('ads');
return response($content, 200)
->header('content-Type', 'text');
});
and I have rename the ads.txt file to ads.blade.php
Or Simply add your ads.txt file inside public folder of your application it will work fine.
You can create blade file has name ads.blade.php and put all text from ads.txt to this blade , and create route like that :
Route::get('/ads.txt',function(){
return view('ads');
});
I tried that when register my website in google

Can't access on public folder Firebase Hosting

I use canvas with express.js and firebase hosting , it's working fine in localhost when run firebase serve but when I deployed the canvas Couldn't load image
I have tried put the public in functions folder and outside but it didn't work
no my project structure is
--project(root)
----functions(sub folder)
------routes(sub folder)
------public(sub folder)
--------images(sub sub folder)
------app.js(app server)
I have print the __direname in routes folder to show where I'm
__dirname = /srv/routes
and the image path to load and it's wrong is
"src":"../public/images/default/B-9.png"
I have tried ../../public and /images also both not working
firebase.json is
{
"functions": {
"predeploy": [
"npm --prefix ./functions/ run lint"
]
},
"hosting": {
"public": "./functions/public",
"rewrites":[
{
"source":"**",
"function":"app"
}
]
}
}
and I defined public folder in express.js like that
app.use(express.static(path.join(__dirname,'public')));
I try access image by URL from browser it's working like
https://angular6test.firebaseapp.com/images/AV.png
but when I try to load this url from my canvas code also it's couldn't access on image

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.

Resources