JS File outside www root folder - javascript

I would like to know how to access or create a javascript file outside www root folder in .net core project created in visual studio 2017. i have created a file in the folder where my views are but i can't able to access the file.

The point of the root directory is to expose files over HTTP.
If the file isn't exposed over HTTP, then it doesn't have a URL.
If it doesn't have a URL, the browser can't request it.
Move the file into the root directory.

ASP.NET exposes all your static filse from the wwwroot folder. It's advisable to put your files there 99% of the time. However, If your project really requires that you put your javascript file in the views folder (and I don't see why), you can create a middleware.
your middleware just has to be an extension method for the IApplicationBuilder interface
for this, you can create a static class like so
// your middleware (static class so it can have extension methods)
public static class MyStaticFileServer
{
//static method (IApplicationEnvironment so we can easily get the full path of our Project)
public static IApplicationBuilder UseJsFiles(this IApplicationBuilder app, IApplicationEnvironment env)
{
//
var path = Path.Combine(env.ApplicationBasePath, "/Views/Js")
var provider = new PhysicalFileProvider(path);
var options = new StaticFileOptions();
//so our middleware only responds when the url begins with "/Views/js"
options.RequestPath = "/Views/Js";
// file provider so we can serve files
options.FileProvider = provider
//use static file middleware to our middleware to serve files from whatever folder we specify
app.UseStaticFiles(options)
return app;
}
}
Now you're done with the middleware to serve static files from a folder of your choice. Now, we ned to invoke our middleware from the startup class. We do this by invoking it in the configure class in the Startup class
//ASP.NET Configure Method in the Startup.cs file
public void Configure(IApplicationEnvironment environment)
{
app.UseJsFiles(environment);
}

You can actually do this in .net core natively.
I'm assuming you have the static files middleware up and running already, but just incase, run the following in your nuget package manager :
Install-Package Microsoft.AspNetCore.StaticFiles
Inside your startup.cs, you will have a Configure method. It probably looks not too dissimilar to the following :
public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
app.UseStaticFiles();
app.UseMvcWithDefaultRoute();
}
So the UseStaticFiles will serve things from the wwwroot. But you can actually add multiple uses of the same middleware in the pipeline. So consider the following :
public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
app.UseStaticFiles();
app.UseStaticFiles(new StaticFileOptions()
{
FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), #"content", #"js")),
RequestPath = new PathString("/content/js")
});
app.UseMvcWithDefaultRoute();
}
Here we serve static content from the wwwroot as per normal, but we also want to say that the file location of /Content/Js should be served as well. You can add as many of these as you like and serve static content.
More info
http://dotnetcoretutorials.com/2017/04/28/serving-static-files-outside-wwwroot-asp-net-core/
https://learn.microsoft.com/en-us/aspnet/core/fundamentals/static-files

Related

Add a folder to the final vite output

Does Vite support adding a folder and its content into the final product? (Adding a folder in the dist directory)
If so, then how can I do it?
See Vite's documentation on assets:
The public Directory
If you have assets that are:
Never referenced in source code (e.g. robots.txt)
Must retain the exact same file name (without hashing)
...or you simply don't want to have to import an asset first just to get its URL
Then you can place the asset in a special public directory under
your project root. Assets in this directory will be served at root
path / during dev, and copied to the root of the dist directory
as-is.
The directory defaults to <root>/public, but can be configured via
the publicDir option.
Note that:
You should always reference public assets using root absolute path - for example, public/icon.png should be referenced in source code as /icon.png.
Assets in public cannot be imported from JavaScript.
If you move your files to the public directory, they will be included in the build. You can also configure the publicDir option to include a different folder, if you can't use the public folder.

laravel asset() doesnt find assets in public

I already put the folder named assets in my public folder and I should be able to access the assets like described on this page: https://laravel.com/docs/9.x/helpers#method-asset
But for some reason It wont load and the browser console gives this error:
Loading failed for the “http://localhost:8000/assets/js/jquery-3.4.1.min.js” when this should be the exact path
In the blade file I wrote this:
<script src="{{asset ('assets/js/jquery-3.4.1.min.js') }}"></script>
I already tried with URL::asset and It doesnt find the file
I made the symbolic link 'links' => [ public_path('storage') => storage_path('app/public'),
The real path of the file is /home/penta/ponti-gest/storage/app/public/assets/js
In my page I am using http
Based on your comments:
I already have the folder assets in my public/storage folder
#GiuseppeP. Is the public/storage folder a symbolic link?
yes I made the symbolic link 'links' => [ public_path('storage') =>
storage_path('app/public'), ],
Your file is in the storage path.
This is accessible by using:
storage_path()
The storage_path function returns the fully qualified path to your
application's storage directory. You may also use the storage_path
function to generate a fully qualified path to a given file within the
storage directory:
storage_path('app/public/assets/js/jquery-3.4.1.min.js')
Addendum
Alternatively, you can use the asset() helper by prefixing the path with storage/.... I.e:
The Public Disk
The public disk included in your application's filesystems
configuration file is intended for files that are going to be publicly
accessible. By default, the public disk uses the local driver and
stores its files in storage/app/public.
Once a file has been stored and the symbolic link has been created,
you can create a URL to the files using the asset helper:
asset('storage/assets/js/jquery-3.4.1.min.js')
method asset() meaning go inside public folder
so if it doesn't work
<script src="{{asset ('assets/js/jquery-3.4.1.min.js') }}"></script>
you should have in public folder assets folder then js folder
then the file jquery-3.4.1.min.js
hopefully that help you
you must set ASSET_URL in your .env file.
then run
php artisan config:cache

There is a warning when importing resources under the public folder using Vite

I used import.meta.globEager() to import the picture resources under the public folder. The console gives me these tips, but if I remove'/public'and I can't get these pictures, how can I remove these tips?
const Assets = import.meta.globEager('/public/static/user_preference/stage_color_png/*.png');
and then give me some tips: files in the public directory are served at the root path.Instead of /public/static/user_preference/stage_color_png/1.png?import, use /static/user_preference/stage_color_png/3.png

Can't reference public folder from node.js deployment with firebase

After watching Node.js apps on Firebase Hosting I tried to create a project with Polymer and NodeJs/express and firebase hosting.In the linked Video it is shown that firebase would serve by default the static public/index.html file which is why they remove it to then serve a dynamic one. However, this particular file is in the same functions directory and not anymore placed in the public folder.Does this mean that my whole project should be placed in the functions folder or just the app entry-point? I am not able to send a file that is placed in my public folder as shown below.
project
functions
server.js
public
index.html
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, '/public/index.html'));
})
I believe firebase is hosting the public and the function folder differently or am I referencing just wrong?
You'll need to nest your public folder inside the functions folder to be able to reference files from it in your functions. You can do this just by changing the public setting in firebase.json to be e.g. functions/public and then moving the directory inside functions.
You would then be able to do something like you're describing.
I think no need to move entire public folder into functions folder. You can use the relative path like this
app.get('*', (req, res) => {
res.sendFile( './../public/index.html'));
})
It worked for me... try this.

should I use assets folder or public folder? laravel 5.3

Using Laravel 5.3
I realized now the view files are under a folder called resources and there's an assets folder which has js folder in it.
public folder still exists
I have read a few other posts saying it's up to you either I want to put my js or css under public or assets
I also know that when using gulp files are directed under public which is changeable.
I am wondering if I put my files under the assets then compile under public do I have to run the compile each time when I test my scripts? If not, what should I put as the src in my html?
You should put it in your public folder. If you use URL::asset('path/to/file') it will return [...]app/public/path/to/file and not the resources path as well.
The resources folder you mentioned is more for raw assets like SASS, LESS, etc.

Categories

Resources