I'm trying to deploy a React Web App on a Debian VM using nginx.
My root points to the build folder in my git repo (/home/myuser/Projects/mysite/build). This way I can update my app by git pull whenever I make a change.
I have created a conf file in /etc/nginx/conf.d/react.conf, and it looks like:
server {
listen 80;
root /home/myuser/Projects/mysite/build;
index index.html index.htm;
access_log /var/log/nginx/siteoneway.access.log;
error_log /var/log/nginx/siteoneway.error.log;
location / {
try_files $uri $uri/ =404;
}
}
In /etc/nginx/nginx.conf, I comment this line (include /etc/nginx/sites-enabled/*):
##
# Virtual Host Configs
##
include /etc/nginx/conf.d/*.conf;
# include /etc/nginx/sites-enabled/*;
}
So, when I access http://mypublicIP, the browser just shows a blank white screen. If I press F12, I see content of index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<meta name="theme-color" content="#000000"/>
<meta name="description" content="My Site Name"/>
<title>My Site Name</title>
<link rel="icon" href="/favicon/favicon-32x32.png"/>
<link rel="apple-touch-icon" href="/favicon/android-chrome-192x192.png"/>
<link rel="manifest" href="/manifest.json"/>
<script defer="defer" src="/static/js/main.cd92e2ed.js"></script>
<link href="/static/css/main.5b13449a.css" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
, but the site is not opening.
After a few hours, I found the error. There was an error setting on package.json, the "homepage" property was filled with an incorrect value.
Related
There's a problem with Vite and React when having dynamic routes (list/:id). Only on dev.
Using vite dev server with --build option enabled:
vite:html-fallback Not rewriting GET /list/src/index.tsx because the path includes a dot (.) character. +47ms
However this should be fixed by adding plugin: https://github.com/vitejs/vite/issues/2245
vite.config.js:
plugins: [
react(),
{
...pluginRewriteAll(),
}
],
But it's not in my case.
Sorry I couldn't find it earlier somehow, but here's the solution.
Original answer -> Getting "404 not found" when refreshing a page that has a nested route, because Vite doesn't redirect all routes to index.html
Add <base href="/" /> tag inside HTML file <head> tag:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.png" />
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
<meta name="description" content="My App" />
<title>My App</title>
<base href="/" />
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<script type="module" src="src/index.tsx"></script>
<div id="root"></div>
</body>
</html>
I am having a react app. At the time of build generation, in my build folder I am getting below code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="/logo192.png" />
<link rel="manifest" href="/manifest.json" />
<title>React App</title>
<script defer="defer" src="/static/js/main.8d8de8a8.js"></script>
<link href="/static/css/main.073c9b0a.css" rel="stylesheet">
</head>
<body><noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
Now, Instead of the URLs starting with /static I want them to add a prefix automatically when build is generated such as /test/static in src as well as href tag. Please help. Thanks in advance.
To configure the react build, do the following:
run: npm run eject or yarn eject
The repository has to be at the latest commit, otherwise the command will not generate the configuration files. The command will generate configuration files for create-react-app.
Once you see that the files are generated, look for the following file:
config/webpack.config.js
With your text editor look for something like static/ you will see that it is the path configured for the static files. You can replace it with a route of your choice.
Warning: A configuration error in this file may cause your project not to compile or the development server not to start.
I am facing one issue which is when I upload my angular app to my hosting it's not opening sub URLs, for example, https://mywebsite.com it's opening but https://mywebsite.com/pricing it's not opening directly user need to open website first then go to another page.
Index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Mobile App Development Services | Web Development Services | Logo Design Services</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="./assets/img/favicon.png">
<link href="https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
</head>
<body>
<app-root></app-root>
</body>
</html>
I used webpack to bundle all my files.
I have a bundle.js file in a directory with an index.html
When i open it in browser it gives me an error :-
Warning: [react-router] Location "/home/vivek/Desktop/prismo-front/build/index.html" did not match any routes
My file directory looks like this : -
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>Prismo</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root">ds</div>
<script type="text/javascript" src="bundle.js" charset="utf-8">
</script>
</body>
</html>
Run the following to serve your files locally.
Install: npm install -g http-server.
cd into build
run http-server
go to http://localhost:8080/ in browser
OR upload your files to a server and you won't get this problem. You can't use run your index.html file locally as it doesn't play nicely with History which is used for React Router.
I'm trying to set up a Nginx web server for serving a SPA based on AngularJS with single entry point at index.html file.
Here is my configuration:
server {
server_name aislc.dev;
root /var/www/aislc/dist;
# API backend
location ~ ^/api/(.*)$ {
fastcgi_pass unix:/var/run/php5-fpm.sock;
include /etc/nginx/fastcgi_params;
fastcgi_param SCRIPT_FILENAME /var/www/aislc-api/index.php;
}
location / {
try_files $uri /index.html;
}
types {
text/cache-manifest appcache;
application/json js.map;
}
}
When I try to open the site, the browser downloads a file with an unknown name and extension in which the contents of the `index.html
Contents of index.html:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Test</title>
<link href="app.css" rel="stylesheet"/>
</head>
<body>
<p>Loading...</p>
<script src="app.js" type="text/javascript" async></script>
</body>
</html>
Chrome screenshot
Firefox screenshot
Where am I wrong?
I found the solution!
I deleted the types section, because it is directive replacing built-in mime types of nginx rather than extending them. Use include method:
include mime.types;
types {
text/cache-manifest appcache;
application/json map;
}