Django doesn't find some static files - html

I'm working on a project and since some days, one specific image cannot be found anymore. Everytime I reload the page, this line in the console appears:
"GET /staticfiles/my_app/images/Logo.svg HTTP/1.1" 404 5715
I know that the image exists because sometimes it appears for a short moment (until you reload again) and other images in the same folder as the Logo.svg are also loading so I guess that the path is not the problem. The setting for the STATICFILES_DIRS is also correct since other things do work.
STATICFILES_DIRS = ( os.path.join('my_app/static'), )
Did anyone have a problem like this before?

in the main urls.py file make sure that + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT) line is included.
Also, if the image is being loaded for a short time it could be a browser cache problem. Try clearing the browser's cache or insert the following on top of HTML template: <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>

Related

How is CSS getting applied without there even being a file?

I do not know what is going on with my flask app. My project was fine and working the way I wanted it to then the CSS in my style.css randomly stopped applying to the new elements I was adding. After a bit of digging I found out that my index.html file was some how applying CSS by itself and not updating, so I deleted the CSS file (and other aspects of my project, like images and my second html file) and CSS still gets applied to my index.html. How? The file no longs exists and I have checked its path. Why is this? What am I doing wrong?
Please take a look this picture of my directory, html, and web page
Here is my Python file:
from flask import Flask, render_template
app = Flask(__name__)
#app.route('/')
def index():
return render_template('index.html')
if __name__ == "__main__":
app.run(debug=True)
As you can see with this Picture this CSS file doesn't exist
Also, when i remove <link rel="stylesheet" href="static/css/style.css"> from the top of index.html all the styling (apart from the in line CSS) goes away.
There my be cache there for css.
You need to remove the line 9 of your html file.
And remove line 8 if you don't even want the font style.
then ctrl + F5 to force refresh with empty cache
Try to use cache killer or manually disable the cache from inspect menu. Deleting the cache data helps to troubleshoot, helps to increase the loading time of web pages and increases the performance of your computer. If the browser doesn't load the new version of the site, even if there have been changes on the site since the last visit, the cache can cause issues with the view.
This is clearly coming from Cache..
For deleting cache from chrome
Open the Dev tools and right-click the refresh button then select "Empty cahce and Hard Reload"
For Firefox
simiply press "ctrl+shift+r"
Note - These are for Windows machine and not for Linux or Mac..

Change index.html into start.html

Please I hope somebody can help me because i've been dealing with this problem already for about 2 weeks and I just can't figure out how to fix it.
I have added a new part to my website since I'm offering a totally new service. I put the new part under index2.html.
I have a new start/default page called start.html, on here they can choose to click on the service they are coming for, so will be either going to the old website part which is under index.html or they will go to the new part which is under index2.html.
To have people go directly to start.html I have put DirectoryIndex start.html in my htaccess file and this works fine. But when they choose which website part they want to go to and click on it they don't get the website index.html or index2.html but they get a message in the screen that their connection is not private and you will see a red https in front of the url link. I don't want it to be https, it just needs to be http.
Individually all the links work fine. So I don't understand why the message appears and what can I do about it?
I also did a link check on W3C, it said:
error Line: 87 www.example.com/index2.html
Status: 500 Can't connect to www.example.com:443
This is a server side problem. Check the URI.
error Line: 78 https://www.example.com/index.html
Status: 500 Can't connect to www.example.com:443
This is a server side problem. Check the URI.
Using index.html as the default file for /folder/,
ie. pointing the browser to /folder/ takes you to /folder/index.html
is such a widespread convention, you are almost definitely better off not messing with it.
My suggestion would be:
Rename /index.html to /old-part/index.html
Rename /index2.html to /new-part/index.html
Rename /start.html to /index.html
I concur with Rounin. A browser/website is designed to look for a file called index.html, index.php, index.xhtml, and so forth for the main page of the site depending on the type of website it is when it comes to your domain.
You need to do what Rounin suggested for your files to maintain a proper website without any headaches.

Favicon.ico not showing (Rails)

This feels like an extremely silly problem, and yet I haven't been able to solve it - despite much searching.
I'm trying to get my Rails app to display a favicon, and I can't seem to get it working.
I've tried placing a basic 16x16 favicon.ico image in my public folder, as well as the assets/images folder.
I've been using the following code in my layouts/application.html.erb file, within the head
<%= favicon_link_tag "favicon.ico" %>
When my site loads, I can see the following being displayed in the html upon inspecting the page, but I cannot see the favicon.
<link href="/images/favicon.ico" type="image/x-icon" rel="shortcut icon">
Things I have tried to solve this include:
1) Changing my code to "/favicon.ico", or removing the explicit link entirely.
2) Clearing the cache multiple times, and trying multiple browsers
3) Placing the favicon.ico file in multiple locations (as mentioned, I've tried it both in /public and in the asset pipeline)
4) Loading my local environment from a different port
But no luck so far, despite these efforts. What else could I be doing wrong here? I assume it's blindingly obvious, but none of the other answers on the topic have worked for me.

Angular Routing, HTML5 Mode and Apache

I'm not having any luck getting this to work. I've tried several configurations, as described here, here and here, but no matter what I do, page refreshes all end up with a 404. If I put <my_base>/#/myPage into my browser's URL bar, the page loads as expected, and the '/#' disappears. Then, if I try to reload, I get a 404. My setup is a single-page Angular web app: index.html has a single element that is the app's directive; this template has a navbar and an ng-view element that routes to the various pages.
According to sysadmin, Apache's AllowOverride value is set to "None", which means that .htaccess files "won't work."

How to get rid of .html extension when serving webpages with node.js?

I am a beginner with node.js and am using express with the ejs layout, and I want to know how to get rid of the .html extension when putting up a page. For example if I go to my localhost:3000/about.html - that works but I want it to show up as just /about. Also, having trouble figuring out how to change the favicon if anyone knows how to quickly change that from the express default.
Any help would be great thanks.
(I realise this question is old, but it appears high in Google search results, and the accepted answer isn't the best solution.)
The best solution for serving up static content in express.js is express.static. To avoid having to specify file extensions in URLs you can configure it with a list of default file extensions that it will use when searching for static files:
app.use(express.static(pathToBaseFolderOfStaticContent, {
extensions: ['html', 'htm'],
... // Other options here
}));
This will serve up pathToBaseFolderOfStaticContent/somePage.html or pathToBaseFolderOfStaticContent/somePage.htm in response to a GET request to http://www.example.com/somePage, which is what you want. For example, if you visit https://arcade.ly/star-castle, the file it serves up is just a static file called star-castle.html. I haven't had to add any special routing for this, or any other static file - it's all just handled by express.static.
I only need to add specific routes for content that requires active work on the server to return. A big advantage here is that I can use a CDN to cache more of my content (or nginx if I were running an internal line of business app), thus reducing load on my server.
You can obviously configure as many default file extensions as you like, although I'd tend to keep the list short. I only use it for resources where the URL is likely to appear in the address bar, which generally means HTML files, although not always.
Have a look at the following documentation on serving static content with express.js:
http://expressjs.com/en/starter/static-files.html
http://expressjs.com/en/4x/api.html (the express.static documentation is at the top)
This is also answered at In express what is the common way to associate a default file extension with static content requests?.
The favicon.ico issue can be solved by dropping your favicon into the root folder from which you serve static content, as well as implementing +Costa's solution where you reference it using a <link> in the <head> of your documents.
In theory you shouldn't need to do put the favicon in the root folder but, in practice, some browsers will still ask for it from the site root even though it's referenced in the <head> of your document. This leads to a spurious 404 error that you'll be able to see in client side debugging tools (e.g., Chrome dev tools).
The Favicon issue is usually a caching problem. As long as you have this code in your base html layout:
<link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico">
Then just navigate to wherever that image is with your browser, and that should force your cache to update.
I figured it out. I looked at this post Render basic HTML view? which solved the problem I was having.
app.engine('html', require('ejs').renderFile);
app.get('/', function(req, res){
res.render("index.html");
});
And this all goes in the app.js or whatever file you are running.