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?
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 want to retrieve access to a Google Analytics account. Google has advised me to create an analytics.txt file at the root of the website such that htttp://my-site.com/analytics.txt.
How do you manually place a .txt file at the root of a site using Gatsby? Gatsby compiles JS files into HTML. I've tried manually placing an analytics.txt file in the /public folder but that doesn't seem to have worked either.
The Gatsby documentation is not helpful on this topic.
We are deploying the site using Netlify and storing the source code on Git Lab.
Any help would be appreciated.
If you create in your root project a folder named static, it will compile with the same name and internal structure in the public folder, so you will be able to refer to those files and assets in your React components. You can check for further information in their docs.
However, in your case, you may want to use a Gatsby plugin to place your analytics code. Here's the documentation.
In the scenario you've described, your solution didn't work because the public folder is regenerated in each build/compilation of code so your .txt is deleted in each compilation.
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.
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.
Within my meteor app I've created a private directory.
With meteor v. <0.9 the files in that directory have been available in '.meteor/local/build/programs/server/assets/app'
However now, using Meteor 0.9.2, the files are not there and I also can't access them via 'Assets.'
Does anyone have an idea what could be the problem?
I found the solution...whenever there is no JavaScript file present in the root folder of the meteor project, meteor somehow doesn't make the private files accessible (all my code is inside subfolders and packages). I solved the issue by adding an empty main.js file to the root folder, and voilà...the files can be accessed. I tried this across several projects and that really seems to be the issue. Very weird behavior indeed, since it doesn't even give me an error message.
I am taking a JSON file from the private directory, parsing the data and then inserting it into a collection on meteor startup. The JSON file is called categories.json with the file structure being /private/categories.json . The parsing and inserting code is below:
var data = JSON.parse(Assets.getText('categories.json'));
for (var i in data) {
Categories.insert({name:data[i].name});
}