I'm working on a React app, using Vite. Once I build the app, I have no problem seeing the images, but during development, I get the following error in the browser:
GET https://localhost:5173/uploads/2/6337005fd6d4d.png 404 (Not Found)
Images are supposed to be served from a folder at public/uploads. The favicon.ico at public isn't being served either (during development).
Ok, found the answer to my own question: In vite.config.js, I had to set the root of the project, and the publicDir, which by the way, must be set relative to the root.
Related
I have created a web application and now I am trying to deploy it with Nginx.
After developing the application I have created a production version with the command "npm run build".
Since NGINX I serve these files, the corresponding block is:
location / {
root /var/www/build
}
With this, my app works perfectly and I can access it through mydomain.com
The problem is that I want my application to be accessible via
mydomain.com/app
Since the address mydomain.com I want to reserve it to use it with wordpress and give SEO.
The thing is that when I change the NGINX configuration to
location / app {
root /var/www/build
}
gives 404 error.
Looking for the problem I found that the solution is
occasion /app {
aliases /var/www/build
try_files $uri $uri/ /index.html?$args;
}
but with this change I get a blank page instead of my app. And if I inspect the page, the response is as follows:
enter image description here
I have verified that in my browser I already have JavaScript enabled, so I don't understand what is going on.
I have a strong feeling your JavaScript files you have in your builds html file will result in a 404. Please check the Network Tab of your Browsers Developer Console. Entering this by pressing F12.
As your app is deployed under the app location but your JavaScript files are pointing to / they will never be found.
There are a million and one solution to solve this issue. Given you are using something like React.JS, Angular, Vue (Please make clear what kind of framework you are using) you should set /app/ as your new base.
Check this https://skryvets.com/blog/2018/09/20/an-elegant-solution-of-deploying-react-app-into-a-subdirectory/. Great tutorial.
If you are using something not related to any framework you can use <base>
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
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.
Using ReactJS I made a Build (reactJs static, npm build) and uploaded it to Google Cloud Storage Bucket, but getting a issue with the Path and Build folder files. The app (/static website) running but could not fetch the files from the bucket directory for eg the index.html & logo. (404 or 403 error )
Structure: Parent Bucket > Build folder (index.html, static folder & other files inside Build)
Any one have any suggestion on this. How to resolve this?
Do I need to create an app.yaml for GCS Bucket or any alternative?
I have gone through the article quite similar but for AppEngine instead of Bucket. https://medium.com/google-cloud/how-to-deploy-a-static-react-site-to-google-cloud-platform-55ff0bd0f509.
I have tried with app.yaml file but does not work for me.
I had exactly the same issue as mentioned by the OP. I am sharing my version of solution just in case anyone else ends up here.
As shown in the screenshots by OP, the 403 errors showed up for me because the URL of the static files in build/static folder was not correctly configured by the react-scripts build script.
Eg:
The url for index.html file was https://storage.googleapis.com/{bucket-name}/index.html.
However, when the page loaded, it requested files having url https://storage.googleapis.com/static/js/main.f555c3e0.chunk.js. It should rather be
https://storage.googleapis.com/{bucket-name}/static/js/main.f555c3e0.chunk.js
This is happening because by default react-scripts build assumes that your files will be served from root folder of your host.
To fix this add the following field in package.json of your project
"homepage": "https://storage.googleapis.com/{bucket-name}"
This tells the build script that it needs to add a relative path for serving static files.
For details please refer: https://create-react-app.dev/docs/deployment/#building-for-relative-paths
In order to set the routes of a static website stored in Google Cloud Storage, you need to assign a suffix to your objects. In other words, using suffixes is the intended way to configure your website. You can see more information in Hosting a static website document.
For your main index page you should set MainPageSuffix and for the not found page 404.html you should set NotFoundPage as suffix.
You can see more information on how to configure your static web here
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 my App react (create-app-react...) My app access to file .json in the folder assets. In my test in local no problem but when publish in IIS (npm run build) can't access a this file .json, in console obtain this error: GET http://localhost:3700/assets/locales/en/isotope.json 404 (Not Found).
My structure app ...
assets
locales
es
isotope.json
static
css
js
index.html
...
Can you help me??
The problem was not having included in the MIME Types (IIS) the .json.
Now Work It!!!
Thanks
You have to manually copy the resources that are not added via require or import. Make sure you have assets folder in the site root on the server.