First of all I'm new to react, so i'm still learning about it.
I got this problem with react if I make a hyperlink from another domain/site to react app on localhost, eg http://localhost:8089/foo/bar. it show the correct page directly but if I make a hyperlink from another domain/site to a public domain with https protocol eg https://example.com/foo/baz it always redirected to homepage page (https://example.com/)
is there anything I can do to make it go straight to https://example.com/foo/baz. I run react on nginx web server with this redirection setting it went well for php, django etc but won't run with react.
server {
listen 80 default_server;
listen [::]:80 default_server;
server_name example.com;
return 301 https://$server_name$request_uri;
root /home/[path to dist folder]/web/app/dist;
index index.html index.htm;
}
FYI the react app is build with webpack thanks in advance
I things the probleme is :
"return 301 https://$server_name$request_uri;"
You should maybe replace it :
"return 301 https://$server_name/$request_uri;"
I've manage to put the right config for the file.
it should be like this
server {
...
location / {
...
try_files $uri $uri/ /index.html;
}
...
}
thanks all for your help
Related
I can't seem to make myexample.com/staging point to my React app with Nginx. I've done some research and found tutorials on how to do this by using CRA, but I'm using Vite and I'm struggling to set it up. I've tried many things and nothing seems to work. Any ideas on how to achieve this would be appreciated.
In App.tsx:
<BrowserRouter basename="/staging">
My Nginx config:
server {
listen 80;
listen [::]:80;
root /var/www/html;
server_name myexample.com;
location /staging {
alias /var/www/html/myexample.com;
try_files $uri index.html;
}
}
Thanks in advance.
I use nginx as my static file server for my NextJS application, in order to test it in dev environment. My application follows a pattern in which I have, normaly, the following routes:
someRoute/
index.tsx
register.tsx
[id].tsx
My nginx.conf file has the following content:
worker_processes 4;
events { worker_connections 1024; }
http {
server {
listen 80;
root /usr/share/nginx/html;
include /etc/nginx/mime.types;
try_files $uri $uri/ /index.html /register.html;
}
}
What is happening is that, when I create a docker image of the application using nginx, if i try to access someRoute/register or someRoute/123, I always get the localhost/index page. someRoute/index works fine, but the other two don't.
My guess is that when I try to navigate to someRoute/123 nginx expects to find 123.html inside $uri/, which of course won't happen, since it is a dynamic route. As per register.html, I really don't know what's wrong.
How do I get someRoute/register and someRoute/[id] working?
I have an app that is handled on server by https and it uses Oauth2 with tokens.
In react I have PathRouter which redirects to different pages
<Switch>
{/*the default is devices*/}
<Route exact path="/">
<Redirect to="/devices"/>
</Route>
and I have an nginx config
server {
listen 443 http2 ssl;
listen [::]:443 http2 ssl;
root /home/path-to-static;
index index.html;
server_name *****.com;
error_log /var/log/nginx/debug.log debug;
ssl_certificate /etc/nginx/certs/*****.crt;
ssl_certificate_key /etc/nginx/certs/*****.key;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
ssl_ciphers 'EECDH+AESGCM:EDH+AESGCM:AES256+EECDH:AES256+EDH';
location / {
try_files $uri $uri/ #backend;
}
location #backend {
proxy_pass http://localhost:8080;
}
}
And it works!
The trouble starts when I want to refresh the page. Locally (on localhost) it works just fine, but when I refresh page on the server it won't let me and tells me that I am unauthorized.
I have a login screen where I enter my credentials and receive tokens and every request to the server I make with those tokens BUT my routing (I assume that) is the cornerstone that leads to the error- the inner routing happens without tokens.
Once again: it works fine until I refresh the page. Locally it works fine always.
That is the error that is provided on server
PS Maybe this is important: when I logined via login page and then I proceed to devices there is no devices request - as when I refresh the page via F5.
PS 2 I found a config when I am on some tab in my app and I clear all the uri but root and hit enter and it leads me to https://myapp.com/devices ! And it does it correct.
Ok, after reading tons of answers on SO I finally got it to work.
Firstly, a great answer from user #Panther here react.js application showing 404 not found in nginx server
When your react.js app loads, the routes are handled on the frontend
by the react-router. Say for example you are at http://a.com. Then on
the page you navigate to http://a.com/b. This route change is handled
in the browser itself. Now when you refresh or open the url
http://a.com/b in the a new tab, the request goes to your nginx where
the particular route does not exist and hence you get 404.
To avoid this, you need to load the root file(usually index.html) for
all non matching routes so that nginx sends the file and the route is
then handled by your react app on the browser.
So, as he recommended I've changed my config like
location / {
try_files $uri $uri/ /index.html #backend;
}
location #backend {
proxy_pass http://localhost:8080;
}
But this gave me some weird errors.
So I have to write location for every path I have, like this:
location / {
try_files $uri $uri/ #backend;
}
location /devices { // here my path is similar as in react
// router
try_files $uri $uri/ /index.html;
}
I have a URL in the form of www.example.com, and am using nginx as the web server. When I go to www.example.com, the site works fine, however whenever I go to www.example.com/anyUri, I receive a 404. Here is the location element in my sites-available file:
location ~*/(.*) {
try_files $uri $uri/ = $404 ;
}
The website is built in React, so there is no real directory, but rather different routes. When I click on a link to navigate to a different route, it loads correctly, but if I try to access that same route directly through the URL, I receive the 404 as well. For example, if from my home page I click "Contact", the URL changes to www.example.com/contact and loads the "Contact" component as desired. If I refresh the page or type in www.example.com/contact manually, I receive the 404. I have my website set up to handle the nonexistent URIs accordingly, and do not need nginx to handle those. Instead, I want nginx to go to www.example.com/anyUri and let the website logic take over from there. I have tried looking up the different patterns online, however none seem to be working as desired.
This nginx.conf file is what I have been using - works like a charm for me.
server {
listen 80 default_server;
listen [::]:80 default_server;
root /your/web/root/path/nginx/html;
index index.html;
location / {
# Adds support for HTML5 history mode
try_files $uri $uri/ /index.html;
# -or-
# try_files $uri /index.html;
}
}
I have a react website which I am hosting inside a Docker container that is running Nginx, which I have running on Port 3000. I then have an instance of Nginx on my host machine, which I have a reverse proxy pointing to 127.0.0.1:3000.
Everything works fine, except I have a Twitter authentication call, which uses a callback. When the url points back to mysite.com/authenticated, this is asking Nginx for the path which of course falls over.
I have scoured the internet and have found many posts indicating I should have this in my nginx default file:
location / {
proxy_pass 127.0.0.1:3000;
try_files $uri $uri/ /index.html;
}
When I then navigate to my website, even the root, I am getting unexpected token < in the console errors.
What could be causing this issue?
Lets say you are calling external twitter api http://twitter/auth.com/twitter/authentication for authentication.
And in your react action file you have give url as /twitter/authentication to call.For this case following will be the configuration.
server {
location / {
proxy_pass http://127.0.0.1:3000;
}
location /twitter/authentication {
proxy_pass http://twitter/auth.com;
}
}
You have to write every location config inside server in nginx config.
After any modification in this config, you have restart nginx.
For me it was the link to app.js
<script src="/app/bundle.js"></script>
When I tried to reach my App at
http://localhost:8080/serv9090
the browser tried to find /app/bundle.js via
http://localhost:8080/app/bundle.js
Which is not found at localhost:8080 (nginx)
For a first try I changed
<script src="/app/bundle.js"></script>
to
<script src="http://localhost:8080/serv9090/app/bundle.js"></script>
This worked fine.
Hope this helped.
I solved this issue by adding the following into the nginx conf file:
location ~ .(static)/(js|css|media)/(.+)$ {
try_files $uri $uri/ /$1/$2/$3;
}