Python can't find my static folder "GET /static/style.css HTTP/1.1" 404 1653 - django-staticfiles

Okay so I've tried almost everything; staticfiles dir, static root, collect staticfiles. I don't know where I'm going wrong or what I'm missing. Please help guys, I've been going over this for the past 3 days.
My HTML
{% load static %}
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1", shrink-to-fit="no" />
<link rel="stylesheet" type="text/css" href="{% static 'style.css' %}">
settings.py
STATICFILES_FINDERS = [
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
]
STATIC_URL = '/static/'
STATICFILES_DIR = [os.path.join(BASE_DIR, 'static'),]
STATIC_ROOT = os.path.join(BASE_DIR, "static")
Screenshot

"STATICFILES_DIR = [os.path.join(BASE_DIR, 'static'),]"
On this variable, just write 'S' after DIR it might solve your problem, like this:
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static'),]

You just need to rerun the server again!
Tap ctr c to stop the server.
Then type this in the terminal to run the server again: python manage.py runserver

I wonder if you are not serving the static files correctly, the same happens if you want to run the admin page. I'm dealing with the same and trying to solve this from the official page: https://docs.djangoproject.com/en/3.1/howto/static-files/deployment/
regards!

Have you load your static directory?
try this
{% load static %}

In settings.py remove the STATIC_ROOT = os.path.join(BASE_DIR, 'static') and instead leave just the STATICFILES_DIRS.
Something like this...
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

Related

PNG files not found in ASAR

I have an Electron (1.7.10) application that is reporting it can't find 5 of 7 PNG files in my ASAR. All 7 PNGs are in the same folder, and 2 of them are displayed on screen fine. The other 5 report net::ERR_FILE_NOT_FOUND.
All src attributes for the img tags are dynamically generated and use relative paths (assets/images/MyImage.png). If I extract the ASAR, I can see the files in there, in the correct folder (as referenced by the src attribute).
If I use the console to set the location of my browser to one of the images (document.location.href = "file:///path/to/app.asar/dist/assets/images/MyImage.png") I get the same results - 2 of 7 show OK.
Before packaging my application (with electron-builder), all images show correctly.
Let me guess, you are building a react SPA using react-router, and BrowserRouter?
If so, use HashRouter instead. Electron does not work with SPA's route by default, because a SPA route changes, but the resource path is always relative to index.html.
I haven't evaluated the other answers, but for my particular case, an extremely solution worked. I don't believe this is well documented, so it might be fairly common for people to still encounter this issue. For my particulars, the relevant problem and solution were identified here.
To address, add <base href='./' /> to the index.html (or whatever your starting html file is that hosts your SPA). This is a complete example of mine:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="./" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<meta
http-equiv="Content-Security-Policy"
content="script-src 'Self' 'unsafe-inline';"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
const path = require('path');
path.join(__dirname, 'assets/images/MyImage.png');

PHP redirect function from /beer to /?search=beer

thanks for reading my question.
I want to add this function in my website:
When the visitor type in the address bar this:
zicher.mx/beer
automaticaly redirect to: this url:
https://zicher.mx/index.php?buscar=beer
is it posible?
Please apologize my English and thanks in advance.
I don't know how exactly I need to search in google or stackoverflow to find this redirection feature.
This shouldn't be a permanent solution, but you can send something like this to make the client redirect to a new page (btw it's untested):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="1;url=https://zicher.mx/index.php?buscar=<?php echo $_SERVER[REQUEST_URI]; ?>" />
<script>
var x = document.createElement("p");
x.innerHTML = 'Click here to search for ' + location.href.replace("zicher.mx/", "") + ".";
document.body.appendChild(x);
</script>
</head>
<body>
</body>
</html>

How to use html templates in electron framework?

I need to build a cross platform app with multiple windows. So I would like to know how to use html templates in electron.
Based on a similar question and what I've seen, there's no built in html template language in Electron, which is actually great because it allows you to use any other template language.
I'm currently playing with ejs in Electron.
Below is my index.ejs template file:
<html lang="en">
<head>
<title>The Index Page</title>
</head>
<body>
<h1>Welcome, this is the Index page.</h1>
<% if (user) { %>
<h3>Hello there <%= user.name %></h3>
<% } %>
</body>
</html>
And below is a section of my main.js file where the above template is rendered and loaded onto the BrowserWindow. Note that I've left out most of the boilerplate code:
const ejs = require('ejs');
//... Other code
let win = new BrowserWindow({width: 800, height: 600});
//... Other code
// send the data and options to the ejs template
let data = {user: {name: "Jeff"}};
let options = {root: __dirname};
ejs.renderFile('index.ejs', data, options, function (err, str) {
if (err) {
console.log(err);
}
// Load the rendered HTML to the BrowserWindow.
win.loadURL('data:text/html;charset=utf-8,' + encodeURI(str));
});
I'll give some credit to this gist for helping me find the data:text/html;charset=utf-8 part of the url that can be used to load dynamic content.
UPDATE
I'm actually not using this anymore. It's faster to just load the default html and use the native DOM methods. The Electron Quickstart program shows how to do this nicely.
Another option is to do the templating during your build. Here is a simple example using gulp to add nonces to the CSP meta tag and the inline script.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'nonce-<%= scriptNonce %>';">
<title>Basic Electron App</title>
</head>
<body>
<div id="app"></div>
<script type="application/javascript" nonce=<%= scriptNonce %>>
require('./index.js');
</script>
</body>
</html>
and in gulfile.js add the following to what you already have and make sure this task is included in your pipeline. You can also just update your current html task with the code below.
const template = require('gulp-template');
const uuidv4 = require('uuid/v4');
gulp.task('copy-html', () => {
// Create nonces during the build and pass them to the template for use with inline scripts and styles
const nonceData = {
scriptNonce: new Buffer(uuidv4()).toString('base64'),
styleNonce: new Buffer(uuidv4()).toString('base64')
};
return gulp.src('src/*.html')
.pipe(template(nonceData))
.pipe(gulp.dest('dist/'));
});
This is a very stripped down example. I have a more complete example at https://github.com/NFabrizio/data-entry-electron-app if anyone is interested, though there is still one warning when running the application because one of the packages I am using pulls in react-beautiful-dnd, which adds inline styles but does not currently accept nonces.

Apply cache manifest only in production mode

I've added a "cache.manifest" in my application (this works perfectly) and since then, it's very hard to debug since I must always clear the cache or modify the cache.manifest version.
I tryied to load the manifest with "HttpContext.Current.IsDebuggingEnabled" condition:
<!DOCTYPE HTML>
#if (HttpContext.Current.IsDebuggingEnabled)
{
<html>
}
else
{
<html manifest="/cache.manifest">
}
This doesn't works and Visual Studio gives me 3 errors:
The block is missing a closing } character
html element is not closed
Can't have more than 1 html element.
Does anyone have an idea ?
Thanks !
Based on the answer from "sav931", I finally found the solution:
<html #(HttpContext.Current.IsDebuggingEnabled ? "" : "manifest=cache.manifest" )>
No need to add an app setting key in the web.config, since there's already a function for that. (HttpContext.Current.IsDebuggingEnabled)
Also, I removed the manfest attribut completely when developping.
Try to add key in the web.config like:
<add key="devMode" value="true"/>
and now add this in your View:
<head #(Convert.ToBoolean(System.Web.Configuration.WebConfigurationManager.AppSettings["devMode"]) ? "manifest=/cache.manifest" : "manifest=devMode.manifest")>
by adding a manifest file name that not exist it will disable the cache...

classic ASP with non-english languages special characters as boxes

I am currently working on Classic ASP for one of my project. For non English languages I am getting boxes instead of special characters. I am rendering using UTF-8 but sometimes the characters goes to boxes. It comes back normal when I click refresh sometimes.
I followed all the steps below but i still get this problem
XML:
<xml version="1.0" encoding="UTF-8">
HTML:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
content-type: text/html; charset=utf-8
Am I missing anything here? Thanks.
Add this to your page:
Response.CodePage = 65001
Response.CharSet = "utf-8"
It should display all correctly now.
Hope that helps
It's amazing BUT nobody gives a complete answer on what to do this PROPERLY... I hope this help somebody like me, because it was so hard to find the whole picture...
---------------- PREVIOUS CONSIDERATIONS --------------
FIRST, make sure IIS IS NOT replacing the Code Page... Go to IIS, click the Website, open ASP module, on Behavior it should be >> Code Page = 0
SECOND, The file itself should be checked, YES! the file... open your file explorer on windows (my computer), go to the folder where the files of your website are, take for example "default.asp", right click >> open with >> notepad THEN click on File >> Save As... IN THE DIALOG at the bottom says "Encoding", make sure it has UTF-8, otherwise you will have to add the
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> in every page (including server side includes), which is not correct.
---------------- CORRECT STRUCTURE OF THE PAGE --------------
<%#LANGUAGE="VBSCRIPT" CODEPAGE="65001"%><%
Response.AddHeader "Content-Type", "text/html;charset=utf-8"
%><!-- #include virtual="/conexion.asp" -->
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
</head>
<body>
áéíóú
</body>
</html>
It should work fine now with QueryStrings, Database and regular HTML... uffff

Resources