My firebase hosted webpage has a url like my_custom_name.firebasewebapp.com. I would like to create a page
that contains a json file at my_custom_name.firebasewebapp.com/file.json.
How would I do this?
Just deploy the file just like any other static web content (html, css, js) you would place in the public folder. All the files in that folder will get deployed.
Related
I am creating a web app where, this app will generate a .html file in public/ directory. And after that i want to show that generated html file on a page using iframe .
I am using NextJS for this task. I have configured next.config.js for rewrites but getting 404 error. I am using Railway for hosting. Since in Vercel we can not access filesystem here.
Instead of generating html dynamically, if I upload that .html file, then i can access that file using iframe in production.
I think we can not access those files which were not available during build process. (this is my guess , maybe wrong)
How can I solve this problem or should I use another framework ?
Thanks
Since I was accessing .html files (i.e <iframe src="path-to-file"></iframe>) which were not available during build process, that's why i was getting 404 error.
So I did the following thing:
suppose I want to do this <iframe src="/pdf/page01.xhtml"></iframe> where file location is in public/pdf/page01.xhtml.
so this src is sending a GET request to localhost:3000/pdf/page01.xhtml.
To manipulate this request I created a pages/api/pdf/[...slug].js. In this file you can use process.cwd() to access the file inside your public dir. You read file content using fs.readFile and send the response res.status(200).send(data) like this.
By doing this I was getting the desired result.
Suggestions are always welcome.
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
}
}
Firebase web hosting
I have uploaded to the public folder 3 items:
index.html
js folder
css folder
I notice that I can browse to the folders and actually see the js file or css under these folders. I want to prevent it.
I tried to put .htaccess but it does not seem to have any effect at all.
I need your assistance how should I prevent directory browsing?
I am making an ASP.NET MVC site which needs to serve a number of single page apps.
A single page app is static html, css and javascript files a folder with an index.html file and a number of folders for css, images and javascript.
I have no problem serving the single page apps from a virtual directory in an IIS server, but I would like to serve them only to authenticated users in the ASP.NET MVC solution, and therefore I am right now trying serve the index.html files from a controller method.
When I do this by loading and serving the index.html file, then I cannot figure out how to serve all the css and javascript files used by the index.html file because they are referenced by the index.html with relative paths like "css/style.css" and "js/somejavascript.js".
I am using the relative parts to make it easy to develop and debug the single page apps independently from the ASP.NET MVC solution.
So my question is basically, how can I serve static HTML files with relative urls to css and js files to only authenticated users in an ASP.NET MVC site?
If I'm understanding: you have some static HTML files that you can't/don't want to change, with relative URL link. In that case, just construct your MVC route so that the relative paths work. For example, let's say the relative paths are like this:
js/script.js
css/style.css
When you send that back to the browser, it's going to resolve those paths relative to the current path. So if you're serving the HTML file from the route (say):
http://domain.com/myapp/home
Then the browser will send requests to:
http://domain.com/myapp/home/js/script.js
http://domain.com/myapp/home/css/style.css
So adjust the route accordingly, and make sure any alternate routes redirect to the main one, eg /home/index should redirect to /home.
Place an
[Authorize]
attribute on the controller or action for serving "index.html".
By default, scripts and css are public, so no authorization is required for them.
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.