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;
}
Related
I followed instruction from How to deploy Flutter WebApp using Google AppEngine that consists of mainly.
gcloud app create
Creating basic app from any tool, I chose Android studio and used following values
creating app.yaml with following
runtime: python39
api_version: 1
threadsafe: true
handlers:
url: /
static_files: web/index.html
upload: web/index.html
url: /(.)
static_files: web/\1
upload: web/(.)
then executing flutter build web
this complained about api_version and threadsafe so i removed both from the app.yaml file , leaving file like
runtime: python39
handlers:
url: /
static_files: web/index.html
upload: web/index.html
url: /(.)
static_files: web/\1
upload: web/(.)
then flutter build web works and shows following output
File upload done. Updating service [default]...done. Setting traffic
split for service [default]...done. Deployed service [default] to
[https://myxyzxyz.uc.r.appspot.com]
You can stream logs from the command line by running: $ gcloud app
logs tail -s default
Below is the location of the index.html and flutter.js
C:\projectsxyzprj>dir /s index.html flutter.js Directory of
C:\projectsxyzprj\build\web
01/29/2023 02:24 AM 1,862 index.html
Directory of C:\projectsxyzprj\build\web
01/29/2023 02:24 AM 6,458 flutter.js
2 File(s) 8,320 bytes
Directory of C:\projectsxyzprj\web
01/29/2023 01:54 AM 1,872 index.html
1 File(s) 1,872 bytes
Total Files Listed:
3 File(s) 10,192 bytes
below is the content of index.html ( auto generated by android studio)
<html>
<head>
<base href="$FLUTTER_BASE_HREF">
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="A new Flutter project.">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="riya2">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png"/>
<title>riya2</title>
<link rel="manifest" href="manifest.json">
<script>
// The value below is injected by flutter build, do not touch.
var serviceWorkerVersion = null;
</script>
<!-- This script adds the flutter initialization JS code -->
<script src="flutter.js" defer></script>
</head>
<body>
<script>
window.addEventListener('load', function(ev) {
// Download main.dart.js
_flutter.loader.loadEntrypoint({
serviceWorker: {
serviceWorkerVersion: serviceWorkerVersion,
}
}).then(function(engineInitializer) {
return engineInitializer.initializeEngine();
}).then(function(appRunner) {
return appRunner.runApp();
});
});
</script>
</body>
</html>
When I go to https://myxyzxyz.uc.r.appspot.com in browser, the browser window shows the App title correctly but the simple counter app does not appear, in browser dev tools under network tab I see 404 for flutter.js as show below, in chrome as well as firefox.
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.
I have successfully installed and run the React + Redux starter template that is provided with .Net Core 2.1 (I'm talking about the project created withdotnet new reactredux).
Now I would like to change my entry point from index.html to my own controller inside the Asp.Net.Core project.
Since the create-react-app is configured to use index.html as an entry point, I've had to:
Delete the index.html file
"Eject" the dependencies (npm run eject) in order to modify the configuration file for webpack (I removed the InterpolateHtmlPlugin and HtmlWebpackPlugin plugins from webpack config, as well as all references to index.html in build.js and start.js
Add a HomeController.cs to the project:
namespace ReactReduxSpa.Controllers
{
public class HomeController : Controller
{
public IActionResult Index()
{
return View();
}
}
}
Add the corresponding Index.cshtml file to my project with pretty much the same content as the former index.html file, except that I now manual insert the generated script bundle:
<!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">
<base href="~/" />
<link rel="manifest" href="~/manifest.json">
<link rel="shortcut icon" href="~/favicon.ico">
</head>
<body>
<div id="root"></div>
<script src="~/static/js/bundle.js" asp-append-version="true"></script>
</body>
</html>
In Startup.cs I changed app.UseMvc(…) to:
app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller}/{action=Index}/{id?}");
routes.MapSpaFallbackRoute(
name: "spa-fallback",
defaults: new { controller = "Home", action = "Index" });
});
My home controller is now executed when accessing the site and the site itself works as intended. However, I'm getting thousands of errors in the console for these requests:
Looking at the response, I see that the server simply served the content of my Index.cshtml view instead of letting these requests through. I assume these are used for development to sync the site and the sources.
To sum it up: I don't think that I'm doing it the right way, but I don't know how to do it differently. My goal is simply to replace the static index.htm with some dynamic content (some bits need to be generated on server side).
The start point of my React app is:
localhost:3000/Admin
So when i am typing in the url this:
localhost:3000/admin/dashboard/
It works all right. But when I write the next nested url:
localhost:3000/admin/dashboard/new
the index.html doesn’t load my script and css. When I change in the index.html the src url from ./js/admin-app.js to ../../js/admin-app.js it works but not more on the other urls.
Localhost:3000/admin/dashboard
I have tried to set in the index.html base href="./" but it doesn't work.
I can’t find the problem .
my server.js:
app.use('/admin', express.static(path.join(__dirname, 'admin/server/static/')));
app.use('/', express.static(path.join(__dirname, 'server/static/')));
app.get('/admin/*', function(req, res) {
res.sendFile(path.join(__dirname, 'admin/server/static/index.html'), function(err) {
if (err) {
res.status(500).send(err)
}
})
});
app.get('/*', function(req, res) {
res.sendFile(path.join(__dirname, 'server/static/index.html'), function(err) {
if (err) {
res.status(500).send(err)
}
})
});
Index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<base href="./" />
<title>AdminPage</title>
<link rel="stylesheet" href="css/admin_style.css">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div id="admin-app"></div>
<script src="js/admin_app.js"></script>
</body>
</html>
Solution
My App runs at
Localhost:3000/admin/
Instead of
src="js/admin_app.js" or src="./js/admin_app.js"
i try this
src="/admin/js/admin_app.js"
and it works perfectly
There are a couple of things that we can try.
When setting the index.html, leave the file relative to the base url.
So, instead of:
<script src="js/admin_app.js"></script>
use:
<script src="/js/admin_app.js"></script>
This means that the browser will always search for the file in a url relative to the base app, for example:
http://localhost/js/admin_app.js
or something like:
http://myurl.com/js/admin_app.js
So your admin_app.js file HAS to be in that folder (js). In your case, you have a static folder structure like this:
server/static
so the file has to be in:
server/static/js/admin_app.js
This is because in your server you are routing all the requests to / into the folder server/static/.
Basically, you must point to the correct file using your folder structure. You also have a folder called admin, so if the files are in admin/server/static then the relative url should be:
<script src="/admin/js/admin_app.js"></script>
So, it all depends on where the files exactly are in your folder structure.
Do the same for the css:
<link rel="stylesheet" href="/css/admin_style.css">
or
<link rel="stylesheet" href="/admin/css/admin_style.css">
Remove this from your index.html file (you don't need it):
<base href="./" />
I am using react-router and debug my code in webpack hot server, when I tried to reload the page which is not in index path, it came to empty without any errors. I checked the page elements and found the scripts are not included.
The reason is that my index.html is a template and generated with HtmlWebpackPlugin finally, as below:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="root"></div>
</body>
</html>
And I send all requests to this index.html in my express server:
app.get('*', function(req, res) {
res.sendFile(path.join(__dirname, './index.html'));
});
How can I solve this problem without manually including scripts in the index.html file?