How can I make the {domainname}.com/public route of my React app just serve the files in my /public directory? I am using react-photo-gallery which to my knowledge only allows the use of full urls (not the relative ones that are used inside components).
An example of this working would be that if I have a file image.jpg inside my /public folder, I could access it by going to {domainname}.com/public/image.jpg.
Related
I have a react app which is being hosted on two different hosts. For each host assets folder where bundle.js and CSS files are store is different. Is there any way to change the path defined by CRA in script tag in index.html based on host name?
Example
for host abc folder will be let's say folderA and for host xyz assets folder will be folderX.
I know that we can define this path in package.json as homepage: "/folderA" or homepage: "/folderX" but then it works for one and not the other.
I am a bit struggle with support to a react js to support 2 different subdomains. Followings are the subdomains I need my app to support
www-dev.somedomain/apps/myapp
app-dev.somedomain/myapp
As you can see, react-app-path is also changing with the subdomains. I have defined PUBLIC_URL and REACT_APP_PATH in my .env file as below.
REACT_APP_PATH=/myapp
GENERATE_SOURCEMAP=false
PUBLIC_URL=/myapp
With above env vars app-dev... URL is working. If I change to the path to apps/myapp then www subdomain in working. I need a way to support both subdomains at once
How can I achieve this?
Finally, I solved this problem with the following steps; I was using Nginx to be redirected to the same host. The problem I have was with the paths.
www-dev.somedomain/apps/myapp
app-dev.somedomain/myapp
According to my Nginx configurations, both URLs were redirected to / in the server. Then the app couldn't find the static files because paths were different with domains. So to fix this, I did as below.
First, remove PUBLIC_URL from my env file. Then app files will be hosted at the / location
Added homepage attribute to package.json file. adding homepage will serve assets relative to index.html. Read more about homepage. Using `"homepage"` in package.json, without messing up paths for localhost
Since the app is using internal routing, I added simple Nginx rule to rewrite the location of static files as below.
rewrite /static/(.*)$ /static/$1 break;
This solved my problem with supporting two doamins.
No way, Your React app will be compiled into static HTML, JS, and CSS files, and the only time you can pass parameters to the build tool is before building, which is what you're doing right now. Once the building is complete, it can't be changed.
You can write two shell script, with different environment variable. Then invoke each of them will build different web app.
I have a react application build with create-react-app. Its using octoberCMS as the backend fetching data using Axios calls from the frontend. Till now I was developing keeping the build content of react inside a directory named 'react' in the root directory of octoberCMS installation. Hence the URL I was hitting was http://example.com/react/.
The problem is now I am done with the development phase and look forward to deployment. But I want my front-end to be served at http://example.com and backend to be served at http://example.com/backend (backend served as I want). How can I achieve this? I am fairly new to both frameworks.
I have tried keeping the build content along with the rest of the octoberCMS
First build your react app that will give you vendor.js[third party scripts] and your app.js[your actual app]
put them in to theme directory assets something
Then In Ocotber CMS make page with URL /:url? and paste your index.html content there.
it will be your root div and including js html, change path for js which points to the build js which you put in theme directory.
now what happens when anybody come to site
- we are serving same content as we do in dev build
- index.html with root tag and needed js
Now if use hit any other url like https://www.example.com/test/etc it also will be catch by /:url? (and all other requests) and home page served and our react app will work as we needed.
if any questions please comment.
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.
I have a react app created with create-react-app. I would like to add an image not part of the react app to the offline manifest. The image is just referenced from index.html. I don't understand how I can include this in the offline manifest.
The react app is ejected.
Put the image in the public folder just as in a regular website and refer to that image. Everything in the src folder is put in a big js file after building so you cant use that