I am trying to set up a react app using react router behind a uhttpd server on an embedded device. Unfortunately I do not know how to forward all subroutes (eg. /foo/bar) back to /
In nginx this is possible using the try_files statement. Is there something similar using uhttpd?
Hi I resolved this issue.
uhttpd have a option "error_page".
So we must set that option if we decide to use react.
e.g.
config uhttpd 'main'
list listen_http '0.0.0.0:80'
list listen_http '[::]:80'
option home '/www'
option error_page '/index.html'
Related
I created a simple react app to serve as an error page (might be a bit overkill). The idea is that we can easily customize the errors via query parameters or URL structure (using react router) with the goal to create cloudlfare style error pages as we need them.
For a forbidden route a config could look like this:
# Is needed as far as I know to serve react files at the root such as scripts and media
location / {
proxy_pass http://error-page:3000;
}
location /forbidden {
proxy_pass https://error-page:3000/error403/;
}
I have tried a lot of configs and so far I had the most success with try_files $uri /error403/index.html. However what I do not like about this approach is that it seems like the URL is rewritten in the browser, meaning the user will see /error403 instead of /forbidden
What approach should we use to be able to serve specific react pages with a different path without overwriting the path, so that the user can see it?
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 having two projects one is done in next js which is serving static pages and the other is in react which is serving logical and auth parts.
now I want to know is there any way to serve both the projects in the same URL
for example:
www.charan.com/blog //is coming from nextjs
www.charan.com //is coming from nextjs
www.charan.com/protected //is coming from react app
www.charan.com/login //is coming from react app
Yes there is! There are countless alternatives but I would accomplish this by setting up nginx as a reverse proxy. There is a question covering this here.
When nginx works with just nextjs, you can define another location (or multiple) in the config file and either forward it to another webserver which serves your react page on a local port or let nginx serve the index.html file directly:
location /protected {
try_files $uri /react-app-folder/index.html; # redirect all request to index.html
}
It will take some playing around since you need to make sure the JS and CSS files are served from the correct directory but this should give you enough information how this can be accomplished and some new Google keywords to look for.
When I try to access a route like www.deployedWebApp.com/profiles I get a 404, bu when I access the root www.deployedWebApp.com/ and then click in the profiles button that pushes to /profiles it works. I suppose that it only loads the routes in the root / because the code for this route is at App.js but this can lead to poor UX due to sending the direct route www.deployedWebApp.com/profiles for a friend and getting a 404, so is there a way to fix this without a Back-end?
There are different ways to fix this issue dependent on your deployment method.
Deploying Static Server Using Serve serve -s build -l port.
As -s, --single Rewrite all not-found requests to index.html. Other options mentioned here also Building for Relative Paths
Using firebase, you can use this option Configure as a single-page app (rewrite all urls to /index.html)? (y/N).
It is a problem with GitHub pages, where I was hosting, when switching to firebase it works like a charm
How can I configure an Amazon S3 static webpage to properly route Angular ui.router html5Mode routes? On page refresh, it will make a request for a file that doesn't exist, and angular can't handle it. In the docs, they recommend changing your URL rewrites on the server.
https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode
However, S3 is storage, and doesn't offer the same redirection options
I have been trying to use the built in redirection rules such as
<RoutingRules>
<RoutingRule>
<Condition>
<HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals >
</Condition>
<Redirect>
<HostName>[[ your application's domain name ]]</HostName>
<ReplaceKeyPrefixWith>#/</ReplaceKeyPrefixWith>
</Redirect>
</RoutingRule>
</RoutingRules>
However, this just leads to a redirect loop.
Any suggestions?
In the Frequently Asked Questions, they rewrite almost everything to serve the index.html page. For HTML5 fallback mode you need to use #!/ (hashbang).
You could change this:
<ReplaceKeyPrefixWith>#/</ReplaceKeyPrefixWith>
with
<ReplaceKeyPrefixWith>#!/</ReplaceKeyPrefixWith>
More details on this answer: https://stackoverflow.com/a/16877231/1733117
You may also need to configure your app for using that prefix:
angular.module(...)
...
.config(function($locationProvider) {
$locationProvider.html5Mode(true).hashPrefix('!');
})
Make sure you have the index route configured for your website. Mostly it is index.html
Remove routing rules from S3 configurations
Put a Cloudfront in front of your S3 bucket.
Configure error page rules for your Cloudfront instance.
In the error rules specify:
Http error code: 404 (and 403 or other errors as per need)
Error Caching Minimum TTL (seconds) : 0
Customize response: Yes
Response Page Path : /index.html
HTTP Response Code: 200
Basically there are 3 options, use an EC2 instance to perform the actual server rewrites to the configured HTML5 routes, or, like dnozay suggested, use the fallback mode and re-write requests to use the #! hashbang. Finally, you could just use the standard angular routes, which is the option I went with. Less hassle, and when Angular 2.0 rolls around, you can update to that.
https://stackoverflow.com/a/16877231/1733117
Doesn't really address the routing issue here.
here is another option using nginx proxy_pass, it also allows you to have multiple projects in subfolders and use subdomains
S3 Static Website Hosting Route All Paths to Index.html