Nextjs application with basePath 404 error with apache reverse proxy - reactjs

I am using an apache reverse proxy with a custom basePath. The application runs on http://localhost:300/abc, that's what I use in my apache config for both ProxyPass and ProxyPassReverse. My application runs completely fine on the localhost, but it does not work when trying to open the url that the application is supposed to run on. I get a 404 error for the _next folder, which looks like this:
GET https://my_url.com/abc 404 (Not Found)
abc:1 GET https://my_url.com/abc/_next/static/chunks/main-3c1ab6de33e375184ee7.js net::ERR_ABORTED 404 (Not Found)
abc:1 GET https://my_url.com/abc/_next/static/fCdfRYDyffxB73K0CRH3c/_buildManifest.js net::ERR_ABORTED 404 (Not Found)
abc:1 GET https://my_url.com/abc/_next/static/fCdfRYDyffxB73K0CRH3c/_ssgManifest.js net::ERR_ABORTED 404 (Not Found)
When I remove the basePath parameter from my next.config.js, I do not get these errors but that however breaks my api calls.
My abc.conf:
SSLProxyEngine on
ProxyPass /abc http://localhost:3000/abc
ProxyPassReverse /abc http://localhost:3000/abc
[...]
EDIT:
Adding app.use('/_next', express.static('_next')) removes the last 3 errors, but the first one prevails.

Related

path loaded with query string giving 404 in NextJS

In my Next Application a url contains query string.
It works fine in local development sever.
But when it is getting deployed to production it is throwing 404 and application is redirected back to url.
For Example:
url => www.domain.com?data=1
In Local - Works Fine
In Production - Throws 404 and redirect to www.domain.com
And I've confirmed that trainlingSlash is set to true in my nextConfig.
It would be great if someone have any info regarding this.

Deploy React app using create-react-app to github pages isn't working

I have a github action set up that builds my react app and commits the build directory to the gh-pages branch of my repo. I then set github pages to serve that branch but i'm getting a problem where all of my static files are returning 404.
here's my console output when visiting my github pages site
Error with Permissions-Policy header: Unrecognized feature: 'interest-cohort'.
thatnerduknow.github.io/:1 GET https://thatnerduknow.github.io/static/css/2.0a9ec390.chunk.css net::ERR_ABORTED 404
thatnerduknow.github.io/:1 GET https://thatnerduknow.github.io/static/css/main.8e6a535e.chunk.css net::ERR_ABORTED 404
thatnerduknow.github.io/:1 GET https://thatnerduknow.github.io/static/js/main.6b85f889.chunk.js net::ERR_ABORTED 404
thatnerduknow.github.io/:1 GET https://thatnerduknow.github.io/static/js/2.e6086643.chunk.js net::ERR_ABORTED 404
thatnerduknow.github.io/:1 GET https://thatnerduknow.github.io/static/js/2.e6086643.chunk.js net::ERR_ABORTED 404
thatnerduknow.github.io/:1 GET https://thatnerduknow.github.io/static/js/main.6b85f889.chunk.js net::ERR_ABORTED 404
favicon.ico:1 GET https://thatnerduknow.github.io/favicon.ico 404
manifest.json:1 GET https://thatnerduknow.github.io/manifest.json 404
manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.
I've had a similar problem with one of my vue applications where I had to set the public path config varialbe to "" but setting my homepage in package.json (I checked the Create React App documentation and it says that's where it looks to set the public path variable) to "" it still gives me this error.
Change homepage path in package.json
"homepage":"https://thatnerduknow.github.io/ThatNerdUKnow/"

React app SPA on S3 AWS while refreshing the page shows 404 page

I have a SPA made with React JS on a S3 Bucket and I’m using Cloud Front to work through HTTPS and with a custom domain. When I refresh the page - if I have another Route that is not the BASE_URL (for example domain.com/something), S3 sends me a 404 error.
I also tried redirecting the error page to BASE_URL but it doesn’t work, it redirects me to the Http default domain that S3 provides me and again, it gives me an 404 error page.
I don’t know if there exists an alternative way to keep the URL without any change (domain.com/page) and avoid the 404 error the way a web server (apache) handles.
If you are using CloudFront to host s3 website, the effective way to get rid of 404 on reload of non-index route like www.google.com/about or similar non / is by the following steps:
Go to your CloudFront distribution
Go to Error Pages
Create a new error page with the following params:
HTTP Error Code: 404
TTL: 0
Custom Error Response: Yes
Response Page Path: /index.html
HTTP Response Code: 200
enjoy
credits going to this article https://gist.github.com/bradwestfall/b5b0e450015dbc9b4e56e5f398df48ff
You have two options. Either use CloudFront error page as a catch-all that redirects to / (you mentioned you tried setting an error page but did not detail what you did. This should work). The downside is that it will respond with the HTML page for all not found paths, even for mistyped CSS paths, for example.
The other solution is to use Lambda#Edge to rewrite the origin request path. This is a more customizable solution and you can define which paths you want to redirect to the root.

Handle location url in ReverseProxy

I want to put a reverse proxy (apache httpd) in order to serve my reactJS application.
Here my httpd configuration
ProxyPass /test/ http://example.com
ProxyPassReverse /test/ http://example.com
but, in react app, i have this warning and my application is not working
Warning: [react-router] Location "/test/" did not match any routes
I think that this error is generated because when the proxy redirect the requests, he send the request to the test page.
So how can i resolve this problem in proxy side ?
Thank you in advance,

Apache custom 404 page that returns 404 error

I have a custom 404 error page on my apache (404.php) and it works normally, but if someone or any search engine requests the /404.php page, the server returns 200 (OK), because the page actually exists.
I have already put the Disallow: /404.php on my robots.txt file to prevent Google from indexing that page, but I'd like to return 404, including to this page request.
Is there a way to also return 404 when someone reaches the 404.php directly?
I just whipped this up really quickly:
<?
header("HTTP/1.1 404");
echo "ERROR"; // Put the contents of your 404 page here.
?>
I checked it in Chrome, and this will return a 404 code in the header, and let you write whatever you'd like to the rest of the page. Just put the header function at the beginning of the page.

Resources