I'm creating a simply lightbox with create-react-app and I found one big issue that is bringing me some problems. I have in public folder some images. In root public folder I have spinner file Spinner-white.svg and I'm creating gallery on page localhost:3000/other When I am on this page all images that I want to add must be in folder /other but I'm using this Spinner somewhere else and I don't want to copy it on every folder that match my route path. localhost:3000/other2 for this path I need to create other folder /other2 and paste Spinner here.
I fixed this issue on production version but I cannot find answer in development.
Fixing for production:
{
id: 1,
url: process.env.PUBLIC_URL + '/other/3.jpg'
}
and in client package.json
"homepage": "path_to_domain",
Screen of my network tab:
Hope you are doing well.
For your issue, you have to introduce the base path in .env file.
With help of base path, your case to access the spinner wherever you want.
Hope it will help you.
create-react-app build with PUBLIC_URL
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'm trying to embed an existing react app to my WordPress site using the plugin ReactPress. I created a react app inside the plugin section:
and added my build folder of the existing react app inside the path where is needed (using file administrator plugin):
The Path is wp-content/plugins/reactpress/apps/dase-mural-design. The problem is when I click on the URL Slug in order to see this section (where the build folder is placed) I don't see the react app I've just uploaded, I just see header and footer and these errors:
What I'm doing wrong? How can I fix it?
Thanks in advance.
Update:
I used FileZilla to upload these files but is still not showing anything. Any idea?
I changed the package.json homepage to: "homepage": "/wp-content/plugins/reactpress/apps/dase-mural-design/build",
But in the console of the WordPress site I see:
Thanks
It's an encoding issue, try setting your site encoding to utf-8 or uploading the files of your react app with a different tool, it could be the file manager plugin is changing the encoding when uploading.
I have a React application created by create-react-app. The app works fine, but I have run into a problem
I need to test som ad things on a plain html site, no additional React code. The problem I have is that the ads.txt tags need to be crawled by Google, which can take up to 24 hours on a new page/URL, time that I don't really have.
So I did the following. In my repo under /public folder I added a folder /ad-test with an index.html inside. When I serve it locally using npm start and go to http://localhost:3000/ad-test, it works fine.
Great, I thought and deployed it to the production environment, but now when I try to go to http://[my-site]/ad-test or http://[my-site]/yo-test/index.html it does not work (I get the React 404 site that I created).
I looked here and if I understand correctly, it is not possible to do it the way that I tried since the build stage will not include the public folder. Am I correct in this?
Any idea how to solve this?
EDIT:
I have a good knowledge of React and React Router in general, the app already uses <Switch><Route ... /></Switch> with a catch-all route directing to Not Found Component and the bottom.
The problem I have is that we include some ad scripts from an ad provider. The ads are not displayed in the application (adblockers totally removed from browser etc.) and the provider thinks that we have made errors in the React code.
We don't think that we made any errors (the ads were displayed fine in our test environment but not in prod) and we have to prove that React is not to blame for the ads not showing.
To do this we created a static HTML file with all ads hardcoded, no React components or other things that might disturb. BUT, because of ads and Google crawlers and ads.txt, we need to have the static test page under the same domain as our main page/application.
This is why I ask if it is possible to somehow add a static HTML that can be reached from http://my.page/test-page.html without being "intercepted" by react router, i.e. it exists outside React but on the same server.
When you use react by create-react-app, it means you are building a single-page application.
What this means is that after running npm run build you will have a build folder with only one html file called index.html in that fold.
This index.html does not know and has no relationship with your added 'index.html' in ad-test folder.
If you want your ad-test html to be recognised by react, you need to make it a component of app.js and use react-router to give it a pathname.
It is very simple.
First, install react-router-dom;
Second, set up react-router-dom;refer to https://reacttraining.com/react-router/web/guides/quick-start
Third, give your add-test component a pathname.Your js code should look something like this:
<Route path='/ad-test' component={AdTest} />
IMPORTANT:
After you deploy your app, always remember you just built a single-page application.
You only have one html in your app.
Please make sure when you test your app after you deployed you must tell your service provider that no matter what pathname a user inputs in the address bar you always redirect it to the index.html
The build stage includes the public folder:
If you have a picture in the public folder, and this picture was imported to other components it will be shown after you run npm run build
Hope it helps.
Have you tried playing with webserver configurations? It is usually setup to redirect all traffic to index.html. Maybe exclude your static html path from redirection?
Place test-page.html in public folder like
public/path-to-static-html/test-page.html
Configure webserver for
directing all traffic to index.html EXCEPT /path-to-static-html which
will be directed to test-page.html.
For example, in case of Apache
you will be setting the DirectoryIndex directive.
I am keeping images in a folder public/assets/img. Then I use it in a component like that:
const imageUrl = "/assets/img/image.png"
Locally everything works fine, but on GitHub Pages in an image URL somehow name of my repo is missing, so instead of
http://name.github.io/my-repo/assets/img/image.png I get http://name.github.io/assets/img/image.png
I was following an instruction on how to create a GitHub Pages build and added in package.json the URL of my project, namely "homepage": "https://name.github.io/my-repo"
-- edit --
Also, I've just now realized, that although the routing seems to work fine, it also misses my repository name in the URL, so instead of
http://name.github.io/my-repo/subpage there is
http://name.github.io/subpage
What am I missing here?
OK, so I somehow have solved my problems, however, I am not quite satisfied with the solutions:
Fixing the URL problem (missing repo name in the URL)
I've added a basename property to my router <BrowserRouter basename="/repo-name">
Downsides: Firstly, it doesn't look good hardcoded. Secondly, npm start opens localhost:3000 which is empty now. I have to add my repo name to open the app locally, so localhost:3000/repo-name - not too neat.
Fixing images problem (also missing repo name in the URL and thus not displaying images)
I've added a process.env.PUBLIC_URL variable to the image URL: const imageUrl = ${process.env.PUBLIC_URL}/assets/img/image.png. In local environment it's empty, deployed it takes homepage value from package.json, which is https://name.github.io/repo-name
Downside: one has to add process.env.PUBLIC_URL before every image displayed in a component.
I would be grateful for any better solution!
I have a create-react-app that needs to embed an html file (along with its own JS and other files) into an iframe on one of the components. I've searched the Facebook react docs on public folder (which says it should work), various other stack overflow questions to no avail.
I added the folder ixoearth containing the external files into public folder. Folder structure
When I access it in dev mode (localhost:3000), or in prod mode from the network IP it works (eg. 192.168.1.128:63738 ). but as soon as I attempt localhost production mode it doesn't find any of the files in the public folder.
Here's my iframe URL:
iframe src
When using create-react-app you need to use a special PUBLIC_URL variable like is mentioned in the docs. This will generate the right path during the build phase so that it works in production.