I would like to know how to serve txt files like robots.txt and verify.txt in a ReactJS app?
Eg: http://localhost:3000/.well-known/apple-developer-merchantid-domain-association.txt
So far I have tried adding the files to the public folder, but the app does not recognize the URL.
Thanks in advance
The following solution works for serving a static file via React JS React Router.
Add the file to the public folder
Include a route that points to the static file in the public folder Eg: /robots.txt:
Solution via React Router
const reload = () => window.location.reload();
<Route path="/my-static-file.ext" onEnter={reload} />
Related
I upload a react app to Netlify, it uploads fine, but when I visit the site, it´s all blank, the index.html is working fine, but there is nothing inside the div with the "root" id
Here are the buils settings
here are the enviorment settings
here is the package json
and i also include the redirects file in the public folder
Can you help me to make the react app works
Create a file named _redirects to the public folder of App with the following content:
/* /index.html 200
Sometimes work!
What is the best way to use iframe in react application, while having local html file for ifram src.
I need to have an iframe in my react application, but the iframe does not work with my local html file.
function ClusterDetails() {
return (
<iframe title='mytitle' src="../../data/index.html" width='500px' height='500px'></iframe>
);
}
export default ClusterDetails;
I found the solution. The source of iframe should be placed in public folder. the src attribute of iframe should be addressed related to public folder.
For example if there is a data folder containing index.html file, in public folder, then the src should be set as 'data/index.html'
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 sitemap.xml file I want to show it when users hit www.mysite.com/sitemap.xml route. How can I do that?
I am using react and react-router-dom.
If you already have a sitemap.xml file ready with you, just put it under public directory. Anything under public directory can be directly opened by putting its path after domain url (even if you are using react-router-dom). So, sitemap.xml put under public directory will be available at www.mysite.com/sitemap.xml in your case.
You can use this method.
npm i react-router-sitemap
I would like to view a static image of my sails project.
I save in /assets/images/dependent/photos an image and I don't know how to render this image with an url.
How I can route this??
Thank you
You can do that using Express middleware.
Create file express.js in config/
Write this in the file:
module.exports.express = {
customMiddleware: function(app){
app.use('/images', require('../node_modules/sails/node_modules/express').static('./assets/images/dependent/photos'));
}
}
Access your files like this:
yourdomain.com/images/yourimage.png