I'd like to bundle many static files from various dirs in a meteor appplication. I have a different folders structure than the standard prescribed. I have static files in various directories and I serve them using the webapp. This works in dev on my machine where I access them directly by a path from C:\.... But when the app is bundled those files will not make it to the bundle. Is there any way how to tell meteor that it should also bundle those directories?
I try to achieve an encapsulation of modules. So each module would have its own static files and each would be a pack of all source and static files needed to run within an app. The static files need to be inside app folders. I have a Modules dir where are modules like Users and Notes and each of the modules can have its own static files which would be accessed by url and later by node fs, but they are not imported by js. That's why they'll not get into the bundle.
The files are consumed by
const realpath = path.normalize(base + filepath);
const data = fs.readFileSync(realpath);
res.writeHead(200, { "Content-Type": mime.lookup(realpath) });
res.write(data);
res.end();
Where filepath is calculated by function from url.
I explicitly don't want to use public folder or any folder of standard meteor folder structure. I have defined custom folder structure with idea of encapsulation in mind. I'm aware of api.addAssets(filenames, architecture) but that's only for packages AFAIK. But that's something as I'd need I guess. I'd expect that there would be possibility to write some script that would run while bundling and would provide information for bundler which files to include.
Thanks.
Using meteor's /private directory would prevent any public access, and allow you to bundle your application code.
Related
I have a project in Next.js. I have that upload files and share that in public URL to this project.
With npm run dev first I uploaded files to public folder and it worked fine, but when I change to npm run start and upload files, the files upload to public folder but with URL http://mydomain/fileuploaded.jpg it did not show, is rare but it's there.
I searched on the Internet but I didn't find a solution for this problem.
From Next.js documentation:
Only assets that are in the public directory at build time will be served by Next.js. Files added at runtime won't be available.
You'll have to persist the uploaded files somewhere else if you want to have access to them in the app at run time.
Alternatively, you could setup your own custom server in Next.js, which would give you more control to serve static files/assets.
You can also achieve something similar using API routes instead. See Next.js serving static files that are not included in the build or source code for details.
a bit late but if someone need the same.
If your goal is to upload and get picture from your next server, you can instead of using the Next router, getting the image by yourself by create a route /api/images/[id] where [id] is your file name and you manually with fs send the picture back.
something like:
const file = await fs.readFile(`./uploads/image.png`)
console.log(file)
res.setHeader('Content-Type', 'image/png')
res.send(file)
Try and use nginx or another webserver to serve the public directory. That way it will serve newly added files without having to write extra code to serve files in nextjs.
server {
/images/ {
root /var/www/site/public
}
}
I have a custom .js file that I place inside the public folder in my NextJS app. I need to be able to use environment variables in that .js file, but environment variables don't seem to be available there.
I read that files in the public folder don't go through the webpack build process.
How do I customize my Next.js app so it builds an additional file inside the public folder? I found a suggestion (option 1 in the answer) on how to do it in a Vue.js app. Anyone know how to achieve something similar in Next.js?
What is the approach for doing a Meteor.call to the server from a js file within the /public folder?
I tested, but the call does not work. I am unable to get any result from Meteor.call when using it within the js filed that is served on the public...
Will I need to create a middleware api ?
Why is the JS file in the public directory? If you want the JS code to be executed on the client, then put it in the /client directory and the functions will be available to the client.
If it's in the public folder, then it is served "as-is" to the client. From the docs:
public
All files inside a top-level directory called public/ are served as-is to the client. When referencing these assets, do not include public/ in the URL, write the URL as if they were all in the top level. For example, reference public/bg.png as . This is the best place for favicon.ico, robots.txt, and similar files
UPDATE
Since now I can see you are trying to load an external JS, the correct answer is to either use NPM (with meteor 1.3+) or place them in the client/compatibility directory. From the docs (http://guide.meteor.com/structure.html):
client/compatibility
This folder is for compatibility with JavaScript libraries that rely on variables declared with var at the top level being exported as globals. Files in this directory are executed without being wrapped in a new variable scope. These files are executed before other client-side JavaScript files.
It is recommended to use npm for 3rd party JavaScript libraries and use import to control when files are loaded.
I'm working on a website and I use ASP.NET 5 CLR (rc1-final x64).
I want to have my wwwroot folder 'clean'. I feel everything that should exist in wwwroot should be added on build or through tasks (for example through Grunt). I'm using Grunt for this, and this works fine with JavaScript and CSS files.
Now I'm at that point of adding images to my website. Right now my .gitignore says to exclude the wwwroot. I don't know how to move images from outside the wwwroot to inside it. Is there any good way to move files to the wwwroot? I really want my wwwroot 'clean' without any libraries. I have those outside of the wwwroot, so I don't accidentally serve unwanted files.
I want to move them from:
[Application Root]/static/img to wwwroot/img.
Currently I have the following grunt tasks:
grunt-contrib-concat
grunt-contrib-cssmin
grunt-contrib-uglify
I think this may be very in-efficient because on build we need to move all the files every time.
Is there any way to do this better / more efficiently?
EDIT #1:
Yeah, so I read the documentation: http://docs.asp.net/en/latest/fundamentals/static-files.html.
I could actually just pass in a parameter to the app.UseStaticFiles() method like this:
app.UseStaticFiles(new StaticFileOptions
{
FileProvider = new PhysicalFileProvider(#"D:\Source\WebApplication1\src\WebApplication1\MyStaticFiles"),
RequestPath = new PathString("/StaticFiles")
});
Here the PhysicalFileProvider contains the absolute path. Is it possible to use a relative path here?
EDIT #2:
Actually this works:
public void Configure(IApplicationBuilder app, IHostingEnvironment environment, ILoggerFactory loggerFactory, IApplicationEnvironment appEnvironment)
{
app.UseIISPlatformHandler();
app.UseDeveloperExceptionPage();
app.UseMvcWithDefaultRoute()
.UseStaticFiles()
.UseStaticFiles(new StaticFileOptions
{
FileProvider = new PhysicalFileProvider(string.Concat(appEnvironment.ApplicationBasePath,"/static/images")),
RequestPath = new PathString("/img")
});
}
Here we add the UseStaticFiles middleware twice to serve the default, which is wwwroot. We will also serve files from within the solution where the images are.
However, I don't know if there would be any performance or security problems or other problems by adding this middleware twice. You need to be careful in what you add in this folder. Directory Browsing should atleast not be enabled.
Are you sure you want to keep wwwroot "clean"?
You cannot easily reference static content outside of wwwroot so doesn't it make more sense to keep the static files below wwwroot and just segregate them into sub folders for dev vs production and then just use publishexclude in project.json to leave out the dev stuff.
Myself, I only want to run grunt tasks prior to publishing to produce the production set of files, then I want to leave the dev versions of the files out of publishing. I do not want to run grunt just to move files so I can use them during development and I don't want to run grunt every time I edit the dev/src versions of my js files.
The problem of that approach becomes more obvious if you pull in something like ckeditor which is a huge number of files that I don't want to copy or move around the file system much, at most I would move them once pre-publish to clean out any extra files as I move it to a production folder.
Back in MVC 5 there was no concept of separating the static files from the code, the web app just served files out of the same root app directory that also had server side code. At that time having static files in a /Content folder or js in other folders made sense. But trying to keep static assets outside of wwwroot in MVC6/aspnet5 seems to me to be working against the grain of the wood.
By keeping all static assets including the dev versions of them below wwwroot I have an easy workflow where I can just edit a js file and refresh the page as discussed in this question. This feels like I'm working with the framework and not against it.
Is there a way to prevent automatic loading of all assets in my /client folder?
I am looking at a scenario where my login page uses different css/js files than my registration or view users folders. What is the best way to do this?
The closest I have come to a solution is this but that still doesn't solve my problem.
Or the best approach is to host my files externally then user the external-file-loader with conditional statements?
I have just published modules smart package which more or less does the job for you. You can add it to your project with
mrt add modules
Then, you will need to change the extensions of all files that you want to load asynchronously to .module_js or .module_html (currentlly we do not support css). Now suppose that the structure of your directory is more or less
modules
module1
file1.module_js
file2.module_js
module2
file1.module_js
file2.module_js
client
main.js
server
public
...
Initially only main.js will be present in your application. To load additional code for the client use the asynchronous require call:
require('module1', function () {
console.log('the files contained in module1 folder are now loaded');
});