Python Flask blueprint without static folder for css and javascript - javascript

I have searched similar answer to this and found to no avail.
Using CGI Handler Apache server with an index.cgi
I have to adhere the strict policy on the directory list; they're adamantly refused to have a static folder in the directory for Flask.
I kinda wish Flask add static_js and static_css that would make our life easier.
How do I override the static folder?
It works with a single path for either css or javascript:
# in app.py
app.register_blueprint(index_bp)
app.add_url_rule('/css/<path:filename>', endpoint='css', view_func=app.send_static_file)
app.add_url_rule('/js/<path:filename>', endpoint='js', view_func=app.send_static_file)
# css_dir = /parent_folder/css and read from json load
from config import css_dir
index = Blueprint('index', __name__, template_folder=html_dir, static_folder=css_dir)
# in html file
<link rel='stylesheet' href="{{ url_for('css', filename='bootstrap.min.css') }}">
# note: javascript won't load at all
or
# js_dir = /parent_folder/js and read from json load
from config import js_dir
index = Blueprint('index', __name__, template_folder=html_dir, static_folder=css_dir)
# in the html file
<script type ="text/javascript" src="{{ url_for('js', filename='lib/bootstrap.min.js') }}"></script>
# note: css won't load at all
but does not work:
# multi_dir = /parent_folder and read from json load
from config import multi_dir
index = Blueprint('index', __name__, template_folder=html_dir, static_folder=multi_dir)
# in html file
<link rel='stylesheet' href="{{ url_for('css', filename='bootstrap.min.css') }}">
<script type ="text/javascript" src="{{ url_for('js', filename='lib/bootstrap.min.js') }}"></script>
# note: both won't load at all
I want to include javascript and css folders without a static folder
parent_folder
cgi-bin
python/perl stuff
templates
html stuff
css
css stuff
js
lib
javascript stuff
How do I achieve this?

I figured it out, it can be achieved by create a two python files and register them in the app.py blueprint.
Since Stack Overflow won't let me post code in here due to error which is in correct format.

Related

HTML <script> src url no longer works after rearranging files

I'm working on a personal project in order to learn web dev, and I've run into a strange (and hopefully easily solved) problem. In my index.html file I've included a reference to a main.js file, and that's been working just fine for a while now. However, I've recently rewritten the project in Typescript and I've decided to rearrange the folder structure. The problem is that when I move my index.html file (and some other files) down one directory and append a '../' to the script's 'src' tag, I get a 404 error when the html attempts to load the script.
This works just fine:
.
|-scripts
|-Main.ts
|-Main.js
|-SlideShowView.ts
|-SlideShowView.js
|-Server.ts
|-Server.js
|-index.html -> <script src="scripts/Main.js" type="module"></script>
This does not:
.
|-scripts
|-Main.ts
|-Main.js
|-SlideShowView.ts
|-SlideShowView.js
|-services
|-Server.ts
|-Server.js
|-index.html -> <script src="../scripts/Main.js" type="module"></script>
Connecting to the site when using the second scheme gives this error:
GET http://localhost:8000/scripts/Main.js net::ERR_ABORTED 404 (Not Found)
Is index.html not allowed to look above it's own directory? Is there a permissions issue or something? It's such a simple thing that's failing to work I figure there must be something small I'm missing.
Thanks in advance for the help!
Found the answer!
After I moved index.html back to root, the problem wasn't in my html or main.js, but in the express server I was using:
import path from "path";
import express from "express";
const serverPortNum = 8000;
const htmlFile = path.join(__dirname + '/../index.html'); //Added an escape here...
// Create html server
var app = express();
app.use(express.static(__dirname));// ...but not here.
app.get('/', function(req: any, res: any)
{
res.sendFile(htmlFile);
});
app.listen(serverPortNum, function()
{
console.log("Listening! (port " + serverPortNum + ")");
});
Basically, I had changed the path to the html file correctly but I forgot to make the change in app.use() as well. Changing that line to app.use(express.static(__dirname + "/..")); corrected the problem.
This should be simple as moving the index.html file outside of both file structures
|-scripts
|-Main.ts
|-Main.js
|-SlideShowView.ts
|-SlideShowView.js
|-services
|-Server.ts
|-Server.js
|-index.html -> <script src="scripts/Main.js" type="module"></script>

.Net Can't Load Javascript

I added some js files which were exported from Adobe Muse to my wwwroot/js folder. However, when I check the console, it doesn't look like these folders can be found.
I am calling the scripts using:
<script src="~/js/require.js?crc=4157109226" type="text/javascript" async data-main="~/js/museconfig.js?crc=4153641093" onload="if (requirejs) requirejs.onError = function(requireType, requireModule) { if (requireType && requireType.toString && requireType.toString().indexOf && 0 <= requireType.toString().indexOf('#scripterror')) window.Muse.assets.check(); }" onerror="window.Muse.assets.check();"></script>
The errors I'm getting are below:
And finally I have my folders set up as follows
data-main attribute is read by requirejs and not by Razor engine. That is why requirejs being a JavaScript library will not be able to resolve ~ in the path. Use Url.Content for that, like below.
data-main="#Url.Content("~/js/museconfig.js")"

CSS file path doesn't work both on localhost and in text editor

So, I'm working on URL Shortener written in JS using Node.js and Express. I've just finished front end but I have a problem with getting css to work.
My project tree looks like this:
public
css
main.css
views
index.html
app.js
In my index.html file I have my .css file linked this way
<link rel="stylesheet" type="text/css" href="../public/css/main.css">
and it does work while making the site in Brackets editor, but when I launch localhost server CSS doesn't and I get
Cannot GET /public/css/main.css
I suppose it has something to do with my static path declared in app.js
app.use(express.static(path.join(__dirname, "public")));
because when I change the path in index.html to /css/main.css everything works on localhost but then my local text editor (Brackets) can't see that css file.
What should I do to make it work both during development in text editor and on localhost?
There are a couple of ways ( probably more ) :
Option 1
Go with your browser for debugging your application ( use only your app to see the modifications and not the brackets editor )
Option 2
Set your href="" attribute to a static location, e.g. href="localhost:8080/css/main.css". Then ( probably ) when you run your editor and the app simultaneously, you will get the same CSS file on both sides.
Option 3
Add another line of stylesheet to load them both.
<link rel="stylesheet" type="text/css" href="../public/css/main.css">
<link rel="stylesheet" type="text/css" href="/css/main.css">
The most common way to solve this problem, usually is Option 1, so you can just don't bother about bracket's internal browser and figure out a combination with live-reload module that will duplicate the extras that you get from your editor.
browser sends a get request to fetch a CSS file, you can add the following code snippet in you code:
var fs = require('fs');
var url = require('url');
var query = url.parse(req.url, true)
var pathname = query.pathname
var filepath = "./public/"
if(fs.existsSync(filepath+pathname)){
res.end(fs.readFileSync(filepath+pathname));
}
now in the html page :
<link rel="stylesheet" type="text/css" href="css/main.css">
Explained :
the browser will send a GET request for css/main.css
and the pathname will be then css/main.css
filepath is declared as ./public/
filepath + pathname will be ./public/css/main.css
fs.existsSync will return true and write the data in response.
becauase you filepath is ./public/ only files under public directory can be send in this method so your *app.js/ file is safe.
I have written this in synchronus manner using Sync functions you can do it using asynchronus manner too.
hope this helps

Symfony 3, add a json config file needed by a javascript script managed by assetic

From my symfony website, I want use particles.js library. I added the library in the directory "particles.js" in /var/www/mywebsite/wev/library. I add mains needed files in assetic ilke that :
assetic:
debug: '%kernel.debug%'
use_controller: '%kernel.debug%'
filters:
cssrewrite: ~
scssphp:
formatter: 'Leafo\ScssPhp\Formatter\Compressed'
assets:
particles_css:
inputs:
- '%kernel.root_dir%/../web/library/particles.js/particles.css'
particles_js:
inputs:
- '%kernel.root_dir%/../web/library/particles.js/library.js'
- '%kernel.root_dir%/../web/library/particles.js/run.js'
But the particles.js script needs to read a json config file named "particles.json" (also located in /var/www/mywebsite/wev/library ). How can I add this json file in symfony/assetic configuration ?
With my current configuration, when I load my index page, I get this error :
Depending on static/dynamic file generation of particles.json you can either:
Statically add particles.json
# assetic configuration yaml
assetic:
assets:
particles_json:
inputs:
- path/to/particels.json
And in your template:
# template
{% javascripts '#particles_json*' output='particles.json' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
This way, Assetic will dump this file at path/to/project/web/particles.json.
But it would be much simpler to just add it manually to /web/particles.json and forget about the assetic configuration as long as you need it separated from other javascript files.
Dynamic particles.json
The second way would be bypassing Assetic completely and built your own controller handling this route:
# AppBundle/Controller/DefaultController.php
/**
* #Route('/particles.json')
*/
public function particlesAction()
{
$particles = array(); // built your particles here
return new JsonResponse($particles);
}

how to link css and js in htmlpy

I am trying to use htmlpy 2 . i use the following code in .py file there is index files and some css files . i can render html but unable to link css to the html file. if i use absoulute path in html (D:/test/css.css) its working but when i use relative path its not working . In htmlpy documentation they said that we have to Set static_path and template_path .
When using htmlPy.AppGUI, always set static_path and template_path
right after instantiating GUI. Set BASE_DIR variable as the absolute
path to the directory of the driver file and set static_path and
template_path with respect to BASE_DIR
import htmlPy
import os
app = htmlPy.AppGUI(title=u"htmlPy Quickstart", maximized=True , developer_mode=True)
BASE_DIR = os.path.abspath(os.path.dirname(__file__))
app.static_path = os.path.join(BASE_DIR, "static/")
app.template_path = os.path.join(BASE_DIR, "templates/")
app.template = ("index.html", {"username": "htmlPy_user"})
app.start()
Kindly help me how can i link css and js files in htmlpy 2 .
You got tu use Jinja 2 sintax, for example
<link rel="stylesheet" href="{{ 'estyle.css'|staticfile }}"/>
Just replace 'estyle.css' with your css path. I saw you especify your static path like "static" so got tu put your css file in there, if your css file is in that directory just replace 'estyle.css' with your css file name, but if you have it inside other directory in the static directory like css you shuld replace it with 'css/css_file_name'.
And the same for javascripts.

Categories