I have an app created with create-react-app that I want to deploy in my apache server.
When I tried to access my react app running on my server, i had an error 404 on every routes created with react-router. Then i added a .htaccess file in my app directory with the following rules :
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
Now i'm able to reach the simple routes, like http://mywebsite/myroute.
But when I try to reach nested routes like http://mywebsite/myroute/subroute
I've got a blank page with the following errors :
Uncaught SyntaxError: expected expression, got '<'
and
The stylesheet https://mysite/test/static/css/main.85d72dcf.chunk.css was not loaded because its MIME type, "text / html", is not "text / css"
This happen only when i try to reach a subroute, even if the routes are just html without any css.
I can't find any clue on the web, so any help would be much appreciated.
I just solved the problem by adding in the of my index.html document. For some reasons it seems to be needed when using subroutes.
Related
I'm in a situation where I have to locally build a React project and then upload it to a particular path on an Apache server. It all worked alright, except it took a while to figure out how to get the Apache server to respect the react-router routes. We eventually created a .htaccess file to add to the path where my app is being uploaded and this seemed to resolve the issue:
RewriteEngine On
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
# Fallback all other routes to index.html
RewriteRule ^ /events/new-year/index.html [L]
But I've had a request to put config variables in a json file in the /static directory so that these can be easily changed later on by the non-JS devs. Loading the JSON data from the file works just fine when in the application root. In the response I get:
{
data: {
eventDates: "20 Nov - 28 Nov"
localUrl: "http://localhost:3000"
pageTitle: "Some title"
serverURl: ""
year: "2023"
}
}
but when trying to load the json from any of the react-router routes I get a really weird output:
{
data: "<!doctype html><html lang="en"><head><meta charset="UTF-8"/><title>Current Page Title</title><link href="//www.google-analytics.com" rel="dns-prefetch"><link href="https://www.somesite.com/content/favicon-150x150.png" rel="shortcut icon"><link href="https://www.somesite.com/content....."
}
I cut most of the output because it's outputting ALL of the html for the index.html stored in the static folder. Why can't I get the a good response on these child routes?
I'm loading the json like so:
const data = await axios("./resources/data/config.json");
I've tried without the . at the front and I've tried without ./. I have found that I get a response of undefined with anything other than the ./
Thank you for reading, any help would be hugely appreciated 🙏
So it turns out that there was an issue with the path. Since the relative path didn't work (and returned html for some reason) I had to use only a / (non-relative path?). While this was returning undefined before, after looking at the network tab I realised why:
My application was sitting at www.website.com/some-path/my-application, so I needed to fetch static resources from www.website.com/some-path/my-application/resources, but instead it was looking in www.website.com/resources. So all I had to do was add /some-path/my-application to the url that I was using previously.
I hope this can one day help a lost traveller!
This is the first time I'm uploading a React app to a server (a GoDaddy one if it's relevant), for doing so i run "npm run build" as it says in the package.json, and then uploaded the build files through FileZilla.
The landing page works alright until i want to redirect to another page like "/quiz" for example. Then i get the following message
"Internal Server Error
The server encountered an internal error or misconfiguration and was unable to complete your request.
[...]
Additionally, a 500 Internal Server Error error was encountered while trying to use an ErrorDocument to handle the request."
I've tried changing all the file permissions to 0755 in FileZilla and nothing happened.
I'm thinking that maybe when i tried deploying to github pages in the past i may have changed something important in package.json
I would like to know if it's a mistake i'm doing in react router (that I put in App.js), a package.json mistake or it's on the server side.
You can see the source code here
You need a '.htaccess' in your build folder.
Add these lines of codes inside the '.htaccess' folder
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
Or maybe you should consider looking in your server files configuration. For Apache here.
I have a multi-page app that I am trying to host on GoDaddy. After running npm build, I upload the files to GoDaddy as per their instructions and I am able to view my homepage without any trouble. When I try to navigate to another page such as the about page, I get a 404 error.
I have been searching and the solutions I attempted did not work. I tried adding "homepage": "http://www.kashy.com.au/", to my package.json. I also tried playing with the routes. (Adding the URL for the site in the path).
I am new to React and so I don't quite understand how the routes work. Could someone point me in the right direction for solving this problem?
You need to redirect all urls to ur site on Godaddy to point to the homepage/index as the routing is handled by your client/react app.
Create an .htaccess file to redirect all requests to index.html.
Sample
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
Steps
From your cpanel file manager, go to the root folder of your website (ie. public_html).
Create the (dot)htaccess file, by clicking on the top left menu
Right click on the file and edit and then paste the above
Save
I found a similar question here but I did't find an explenation exactly how to fix the problem. All pages on my website except index.html doesn't load when you are reloading the page. From the previousquestion I think that to solve the problem without server I need to use HashHistory but I cant' found explination how to use it. What to do in my app and what to put in my navigation. http://turbo-remont.com/
I made this website for a friend but I can't deal with this problem. Please help me.
The problem is that your server attempts to fetch the resource and not load the main file (index.htm) and then activate navigation.
and example:
Your site base is http://turbo-remont.com, if you navigate to it, your app loads and from that point on overtakes the navigation so if you go to http://turbo-remont.com/resource/1234 , it won't send a new fetch request but internally update the state and load the relevant component (as SPAs do).
When you reload the page, which is actually equivalent to navigating to the page, your server attempts to find and html file named '/resource/1234'. To overcome this, you need to instruct your server to serve index.html regardless of the full url.
I don't know what server you use, but here is a simple example of an .htaccess file that solves the problem, place it in your root directory.
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
I have a React Application. I am using some routes that receives parameters in the URL (by GET), for example myapp.com/products/1 that works pretty good in local enviroment but no in my CentOS server. I have to mention that I am using npm run build to generate the static files.
For other side, I have running Caddy as HTTP server in the CentOS server, there I have problem only with the routes that includes parameters, so now am wondering if caddy have something to be with this issue.
Here the React people say:
If you’re using Apache, you need to create a .htaccess file in the
public folder that looks like this:
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
So, how can I do that in Caddy. I have currently these lines for the site:
mysite.com {
root PathToProject/build/
log logs/pagelog.log
}
What is missing in order to can use parameters in the URL?
I have this config in my Caddyfile
rewrite {
if {path} not_match ^\/0.0.0.0
to {path} {path}/ /?_url={uri}
}
See if that helps, it took care of my routing issue (similar to what u have mentioned) for React App.