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
}
}
Related
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.
So I have built a simple firebase and javascript app that uses firebase database and hosting.
I have successfully built the app and deployed to Firebase hosting, however when the cmd provides the url that leads to the app it takes me to some completely random firebase landing page.
All deployment is correct and I know all my code is correct, but it keeps sending me to the random landing page: https://firebase.google.com/docs/hosting/
When you first create a project on firebase it asks you for the public directory: What do you want to use as your public directory? public
Usually the default its public, so the firebase generates a random welcome index.html there.
When you setup the firebase init configure the public directory to your files and you should see your app instead of the welcome index file, or simply put all your files inside the public directory you've chosen above.
Here I found a very simple tutorial on how to get started on that: https://www.brooks-patton.com/deploying-a-static-website-to-firebase/
Another way - you can just edit firebase.json file, in the line with "public" change the path where is your code was built.
This can be a silly question but I have had some issues with it. I am trying to implement jwplayer with meteor. Jwplayer will try to get a file based off the url you suggest. So I tried to place a file in localhost:3000/test.mp3. When I tried to hit that url I get just the default site. This would work if I used tomcat. Is there something I can do to get the files relative to meteor directory?
Thanks for your help.
In the /public directory, per the docs:
Lastly, the Meteor server will serve any files under the public directory, just like in a Rails or Django project. This is the place for images, favicon.ico, robots.txt, and anything else.
Meteor hasn't yet implemented server side routing and all directories are ultimately flattened. So for the time being, you can access your file at http://localhost:3000/test.mp3, but that may change in the future.
I'm new to Meteor and I'm trying to understand how to serve static content - images, JS, etc.. I've followed the docs by creating the correct folder structure (which it doesn't really touch on) but making requests to this content just fails over to serving the main app page instead.
For instance - putting an image in "app_root"/public/image.png and making a request to localhost:3000/image.png just returns the main app page.
Any clue what I'm doing wrong here?
Thanks!
The setup you have described sounds correct to me. Media in public/ are served like
http://localhost:3000/myphoto.jpg
The todos example serves images from the public directory. Just back out of whatever project you're in and run: meteor create --example todos then cd into todos/ and run meteor. Then open:
http://localhost:3000/destroy.png
The image you will see lives in public/.
Meteor public folder not working
Use ./public directory for serving static assets.
Given the following directory structure:
- server
- client
- public
- css
- bootstrap.css
- images
- js
You could serve the static assets by dropping 'public' from linked documents.
<link href='/css/bootstrap.css'>
More info here: Official Meteor Docs #FileStructure
Files in /public are served to the client as-is. Use this to store
assets such as images. For example, if you have an image located at
/public/background.png, you can include it in your HTML with or in your CSS with background-image:
url(/background.png). Note that /public is not part of the image URL.
That same thing happened when I moved the project files in a folder and forget to move the directory .meteor.
I want to create a file and then serve it using Meteor, but I don't want the server to restart when I create/update the file in the public directory.
The user will click on a button to create a config file on the server and I want the user to be able to download that config file.
Is there a way to do this without triggering the server to restart?
I have tried creating a link to the file and creating a hidden file but nothing has worked.
Thanks for your time.
Try meteor run --production. That might solve your problem.
Server restarts because you are running it in Development mode,
When it runs in production, it doesn't restart on content changes.
To run in production, only way I know is, after bundling application,
Have a look here: http://docs.meteor.com/#deploying
If you doesn't want to run in production mode, here is a workaround:
In order to prevent reloading, you have to generate your files in a folder that is located outside of your project's repository.
Then you will have your meteor app to serve the content of that folder.
Here is an example that uses the connect npm repository to make your local folder /meteor/generated_files served under the url hostname.com/downloads/:
var connect = Npm.require('connect');
var fs = Npm.require('fs');
function serveFolder(urlPath, diskPath){
if(!fs.existsSync(diskPath))
return false;
RoutePolicy.declare(urlPath, 'network');
WebApp.connectHandlers.use(urlPath, connect.static(diskPath));
return true;
}
serveFolder('/downloads', '/meteor/generated_files/');
I published the very primitive package I have that does just that.