how to link css and js in htmlpy - javascript

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.

Related

Python Flask blueprint without static folder for css and 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.

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>

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

What is the meaning of "../" in javascript for windows path?

I have written some HTML and js code.
My folder Structure is :
A => B => C .
Folder C contains 'index.html' file and I want to access 'emotion.js'.
A => js => emotion.js is the actual place for emotion.js.
"<script src=\"../js/emotion.js\">"
I have given the link this way. It is not working actually.
I just want to know what "../" means? It is refers to one step before in the folder structure or the root folder?
../ refers to the parent folder.
If your folder structure is
A
B
C
index.html
js
emotion.js
Then inside index.html you will need to change the script tag to
<script src="../../js/emotion.js">
../ this will take you up one dir so use this 2 times eg ../../A/js/emotion.js
or you can use / without .. so this will take you to root no matter where you are .

Load a Javascript in another Javascript in Play-scala Framework

How can we load another javascript in js file in Playframe work
This is my conf file
# Routes
# This file defines all application routes (Higher priority routes first)
# ~~~~
# Home page
GET / controllers.Application.index
POST /upload controllers.Application.uploadFile
# Map static resources from the /public folder to the /assets URL path
GET /assets/*file controllers.Assets.versioned(path="/public", file: Asset)
I tried a to load js file:
(function(window){
var RECORDER_WORKER_PATH = '/javascripts/recordWorker.js")';
var ENCODER_WORKER_PATH = '/javascripts/mp3Worker.js")';
but i ended up with this in the webconsole:
Error:ScriptFile not found at 'javascripts/recordWorker.js
Error:ScriptFile not found at 'javascripts/mp3Worker.js
Static assets are served under /assets/* per your definition in the routes file.
You should therefore prepend /assets/ to your URIs.
(function(window){
var RECORDER_WORKER_PATH = '/assets/javascripts/recordWorker.js")';
var ENCODER_WORKER_PATH = '/assets/javascripts/mp3Worker.js")';
See Play Asset controller docs for more details.

Categories