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.
Related
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 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.
I am trying to set up a website using Jekyll and GitHub Pages (first-timer), and most importantly, to style it with Bootstrap.
You can check what I have already done:
GitHub repository: https://github.com/thibaudclement/wallaby
GitHub page: http://thibaudclement.github.io/wallaby/ (check gh-pages branch)
Also, I followed this tutorial to import Bootstrap into the Jekyll structure.
Layouts and includes seem to work just fine, but I don't understand why my index.html does not get "styled" as it should, fetching information into the css/style.css file.
Any idea of what I am doing wrong?
Thanks.
The path to your css file is incorrect - it's not loading if you check your browser console
"Failed to load resource: the server responded with a status of 404 (Not Found) - http://thibaudclement.github.io/wallaby/style/site.css"
In _config.yml, you need to set baseurl: /wallaby.
And use {{ site.baseurl }} to load resources like this :
<link href="{{ site.baseurl }}/css/style.css" media="screen" rel="stylesheet" type="text/css" />.
See Jekyll documentation.
I am using WAMP.
I edited the httpd.conf file to include:
Alias /static "c:/he/sites/browsbyboodah.com/htdocs/static"
When linking my .css's I use this path:
<link rel="stylesheet" type="text/css" href="/static/css/reset.css" />
I cannot load the .css like this for some reason. What am I forgetting?
Thanks.
/* EDIT */
After a little debugging I found the following from a view page source and clicking on the css file:
Page not found (404)
Request Method: GET
Request URL http://127.0.0.1:8000/static/css/reset.css
css\reset.css could not be found
check whether Apache mod_alias module is installed or not? and remove "
Alias /static/ /sites/browsbyboodah.com/htdocs/static/
alternatively you can use AliasMatch Directive
One subtle difference between Alias and AliasMatch is that Alias
automatically copies any additional part of the URI onto the end of
the file path on the right. AliasMatch does not.
AliasMatch ^/static/(.*)$ /sites/browsbyboodah.com/htdocs/static/$1
Read this article for more help