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>
Related
I just finish my app and deployed it to Firebase, however I'm getting error 404 that it cant find the home file, so I'll have to manually add /home.html at the back of the URL (https://website.web.app/home.html) before it display my app on the browser. Any idea on how to set a default page in the .json file Please. I used Bootstrap, html for the app.
index.html is the default page for Firebase Hosting. According to the configuration documentation, there doesn't appear to be a way to change this. It's probably going to be easiest for you to simply use index.html instead of home.html.
You could also attempt to use a rewrite to change requests to home.html into a request for index.html, but I think it will be easier to just change the name of your file.
You can use redirects option from "firebase.json" config:
{
"hosting": {
...
"redirects": [
{
"source": "/index.html",
"destination": "/home.html",
"type": 301
},
{
"source": "/",
"destination": "/home.html",
"type": 301
}
]
}
}
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.
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.
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.
I'm working on a webpage in Go. The Go code uses "html/template" to parse HTML. I would like to use CSS in the project. Everything is working well when I use internal CSS code, but when I would like to change to external it dosen't work. It looks like it can't access to the .css file.
Here is my app.yaml configuration:
application: makerboardstest
version: 1
runtime: go
api_version: go1
handlers:
- url: /.*
script: _go_app
- url: /stylesheets
static_dir: stylesheets
- url: /images
static_dir: images
Here is how I would like to access to the .css from the html:
<head>
<link href="/stylesheets/main.css" media="screen" rel="Stylesheet" type="text/css" />
</head>
I also have problems with (static) images. I would like to access to the image with this html code:
<img src="/images/img1.jpg" />
What can be the problem?
(I'm testing it on my PC, Win 7)
The handlers are checked in order, and your first handler matches everything; move your static handlers up above it. In other words, when your browser makes a request for /stylesheets/main.css, it matches the /.* pattern of your first handler and asks go to serve it rather than trying the static dir. If you flip the order of the handlers, it will match /stylesheets first and serve it from the static dir.
i.e.:
handlers:
- url: /stylesheets
static_dir: stylesheets
- url: /images
static_dir: images
- url: /.*
script: _go_app