I am trying to get nginx to serve a beta version of a angular2 front end replacement of my rails app by navigating to .../beta but I can't seem to get nginx to find any files.
I have tried navigating to ..../beta ..../beta/index.html, but it never seems to find the index (or any files I put in that directory).
Here is the location block which I know is being matched because with the try_files directive I get routed to my normal rails app whenever I try to go anywhere under beta. (without the try_files I get an nginx 404 reply)
location /beta {
root /var/www/ourlatitude/angular_dist;
try_files $uri $uri/ /;
}
I also know the file exists because I can list the file and see the contents from the script that starts nginx.
echo "starting nginx"
ls -l /var/www/ourlatitude/angular_dist/index.html
cat /var/www/ourlatitude/angular_dist/index.html
nginx -g "daemon off;"
Here is the output from the script.
starting nginx
-rw-rw-r-- 1 root root 900 Apr 15 16:16 /var/www/ourlatitude/angular_dist/index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ourlatitude</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<link href="styles.c06b2f9217e876bbd94a.bundle.css" rel="stylesheet"/></head>
<body>
<app-root>Loading...</app-root>
<script type="text/javascript" src="inline.1b4e5bfe11db95ba56df.bundle.js"></script><script type="text/javascript" src="polyfills.1511b33427d0b840a6ea.bundle.js"></script><script type="text/javascript" src="vendor.2104002a7ee0b6a6562f.bundle.js"></script><script type="text/javascript" src="main.8ad811b26786bedbaf91.bundle.js"></script></body>
</html>
I feel I am missing something really basic here.
Any ideas what might be going on?
I can include more of the nginx config file if that helps.
The only other out of the ordinary thing I am doing is this is all within a docker container, but I don't think that matters.
root and alias are quite different. The location block is there to match a URI, in this case /beta/index.html.
The root directive determines what prefix to add to the URI, to turn it into a pathname. In your question, that would be /var/www/ourlatitude/angular_dist/beta/index.html, which is not what you want. The value of the location block is only relevant to match the URI, and not to construct the pathname.
The alias directive within a prefix location constructs the pathname by first removing the value of the location, so:
location /beta {
alias /var/www/ourlatitude/angular_dist;
...
}
will match the URI /beta/index.html, then remove the /beta before prefixing the /var/www/ourlatitude/angular_dist, which will construct the pathname: /var/www/ourlatitude/angular_dist/index.html.
See this document for details.
alias directive is called so because it… aliases URI to path in server's filesystem.
root defines a… root point in filesystem and all URI's searches are done relative to that root point, under that point.
Related
I need to serve both static files and endpoints on the same Plumber API server. My idea is:
route / will serve static HTML files (like index.html)
route /test will execute a R command (like list("TEST API")
My folder contains as follows:
a init.R file that starts the Plumber server
a api folder that contains endpoints definitions
a api/assets folder that contains the static file (in this case index.html)
init.R
library(plumber)
options(plumber.trailingSlash = TRUE)
pr <- Plumber$new()
pr <- pr %>%
pr_mount("/", plumb("api/assets.R")) %>%
pr_mount("/test", plumb("api/test.R"))
pr_run(pr, host = "0.0.0.0", port = 8080)
api/assets.R
#* Assets for front end
#* #assets api/assets /
list()
api/test.R
#* Test API
#* #get /
function() {
list("TEST API")
}
Now, if I query the URL http://localhost:8080 I got the content of the index.html file stored in api/assets folder:
# > curl http://localhost:8080
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
Hello World!
</body>
Instead, if I query locahost:8080/test I got Resource Not Found:
# > curl http://localhost:8080/test
{"error":"404 - Resource Not Found"}
If I remove static mounting, /test works correctly. Is there a way to mounting both static files in / and endpoints in sub-routes?
Thank you,
Domi
I have an HTML webpage which uses some CSS and TypeScript. I've been using the ParcelJS development server to build and test my page.
Now I want to serve my app over a Web server. I have an Ubuntu 18.10 DigitalOcean droplet/virtual machine that has nginx set up.
I cloned my code onto my server, installed ParcelJS, and ran parcel build index.html following instructions here.
Then I tried to deploy my webpage by creating a symlink from /var/www/mysitedomain/html/app.html to ~/myappdir/dist/index.html.
This (kind of) works: when I visit my website, my browser loads my index.html.
However, none of my CSS is rendering, and my scripts also seem to not be running!
Clearly, I'm doing something wrong. What should I be doing instead to deploy my application?
Here is my abridged index.html (after running parcel build index.html):
<!DOCTYPE html>
<head>
<title>Nothing to see here!</title>
<link rel="stylesheet" href="/sidebar.04cc1813.css">
</head>
<body>
<aside class="sidenav">
<h1>A sidebar</h1>
</aside>
<section class="main">
<p>Welcome to the semantic web!</p>
</section>
<script src="/main.9b45144c.js"></script>
</body>
Here is my /etc/nginx/sites-enabled/mysite.com:
server {
listen 80;
listen [::]:80;
root /var/www/mysite.com/html;
index index.html index.htm index.nginx-debian.html app.html;
server_name mysite.com www.mysite.com;
location / {
try_files $uri $uri/ =404;
}
}
Adding the --public-url ./ CLI arg to your parcel command will tell parcel to emit asset URL references relative to the given base url. I.e. Your existing:
<script src="/main.9b45144c.js"></script>
will turn into:
<script src="./main.9b45144c.js"></script>
Same with CSS and other assets...
Also see: https://parceljs.org/cli.html#set-the-public-url-to-serve-on
I just started to host a web application on firebase.
the automatic setup with the firebase cli (firebase-tools) created a 404.html file in my public folder.
but i don't want to see a custom 404 error page nor the default one from firebase.
I would like to redirect all 404 to the startpage, so that the app will get initialised anyway. (my local setup with webpack-dev-server is just working fine)
a workaround is just to put the same content from index.html into the 404.html. But this leads into doubled maintenance..
i found some information about redirect configuration here https://firebase.google.com/docs/hosting/url-redirects-rewrites.
but a redirect for 404 error types isn't possible.
using a .htaccess file isn't possible.
am i missing the right location to change this behaviour whether in my firebase.json file or in the https://console.firebase.google.com/??
Not sure if this will work for you, I've never done stuff with .htaccess, but in my case I've always fixed it this way:
You can include a wildcard route as the last route in the rewrites section of your firebase.json file, so any previously unclaimed routes will match:
"rewrites": [
{
// route info here
},
{
// another route
},
{
// If it makes it here, it didn't match any previous routing
// Match all routes that get to this point and send them to the home page.
"source": "**",
"destination": "/index.html"
}
]
If you don't want to have original/non-existent url left (eg. https://example.com/asdf) you can modify 404.html source and replace it with js redirect.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Not Found</title>
<script>
window.location.href = "/";
</script>
</head>
</html>
I have a spring boot application that contains static resources in the structure indicated below ( + indicates directories, - indicates files)
+ my-app
+ src
+ resources
+ static
+ v1
+ css
- app.css
- main.js
- index.html
I have sub-directory that contains the application bundles. By default, Spring looks for index.html directly under resources/static directory. It does not find one in this case.
My index.html looks something like this
<html>
<head>
<script type="text/javascript" src="main.js"></script>
<link type="text/css" href="css/app.css"/>
</head>
<body>
</body>
</html>
Let us assume the application is hosted at http://myapp.com.
I have two questions here
How can I make Spring to look for v1/index.html under my static resources, when I access the application the URL http://myapp.com?
If I load v1/index.htmlby adding a view controller in ViewControllerRegistry, it does load index.html under v1 directory, but gives 404 on all the resources used by index.html (main.js & css/app.css).
How can I tell Spring to get all resources from resources/static/v1, instead of resources/static.
I created a basic Spring Boot Project in STS and did not any dependencies. I used your html sample from above and modified it to this:
<html>
<head>
<script type="text/javascript" src="main.js"></script>
<link rel="stylesheet" type="text/css" href="/v1/css/app.css"/>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
I created the directory /src/resources/static/v1 and /src/resources/static/v1/css, placing the index.html file in the ../v1 directory which worked. The app.css file contained the following for testing purposes:
h1 {
color:red;
}
This worked without any configuration changes to Spring. If you are using Thymeleaf, JTwig, JSP... you may need to add resource handlers or tweak settings for those template engines, I can't comment since I didn't use a template engine based on your example. Anything in the /static directory will be referenced without the /static.
I hope that helps, if it does please mark the answer as the right answer.
First of all I am sorry for the title.
I deployed my flask app through Digital Ocean droplet but there's a problem where the bootstrap did not load. I already search through the internet regarding this problem and tried several way but did not work.
Below is the snippet of my code.
index.html
<!DOCTYPE html>
<head>
....
....
<link rel="icon" href="../static/icon/favicon.ico">
<link href="../static/css/bootstrap.min.css" rel="stylesheet">
<link href="../static/css/jumbotron.css" rel="stylesheet">
...
...
</head>
the link for the icon works great but for the css file, it didn't.
views.py
#app.route('/')
def index():
return render_template('index.html')
/etc/nginx/sites-available/webapptest
server {
listen 80;
server_name <droplet_ip_address>;
location / {
include uwsgi_params;
uwsgi_pass unix:/home/user1/project/webapptest/webapptest.sock;
}
location ^~ /static {
root home/user1/project/webapptest/app/static;
}
}
I am following this tutorial to serve my app on digitalocean. I am hoping maybe some of you can help me solving this problem. I believe I must had left something from these code but I do not know where.
The error looks like this when I checked using developer tools in Google chrome:
failed to load resource:the server responded with a status of 404 (Not Found) http://<droplet ip address>/static/css/bootstrap.min.css
Thank you for your help.
Not really sure what is going on there, but would it not be easier to just load bootstrap from free CDN like Maxi or jsDevlivr? Last time I had something like this I had loaded none minified versions to the server.
change href to >
https://cdn.jsdelivr.net/bootstrap/3.3.7/css/bootstrap.min.css
If you need some other version just change 3.3.7 to a version you need.