Develop Reference

Flask js files not loading due to template folder and static folder file structure

So I'm trying to make a website where I'm able to just drag and drop folders containing HTML, js, and CSS files into a "library" directory and have those files served on my flask app. There's one big problem I haven't been able to get over. The problem is that all of these HTML files link to their respective js files using relative paths. For example:
<script src="js/keyboard_input_manager.js"></script>
and these files are 2 folders deep into my (combined) templates/static folder. I could fix this by doing
<script src="library/2048/js/keyboard_input_manager.js"></script>
but that is very tedious, especially when working with so many files.
TLDR: If I were to run my flask app and load a template, it wouldn't load any js or CSS because of relative paths.
Is there any way to go about this without individually changing each path to relate to the templates folder?
Example of my current filesystem:
-FLASK PROJECT
|->library (templates/static folder)
| |->2048
| |->index.html, index.css, index.js
| |->Game2
| |->index.html, index.css, index.js
|->main.py
What I've Tried:
Using Blueprint but I can't create a whole blueprint for every file?
Messing with paths of template folder and static folder
Flask Noob - Please let me know if I'm leaving out any helpful information :) Thanks

Extract raw CSS/SCSS file and use output in JS

I'm making simple components library. Basic project setup based on Webpack.
I've got all my components in separate folders with structure like below.
test/
|- test.html
|- test.scss
|- test.md
I'm loading HTML files in my app.js as string and creating previews and code snippets, but I can't load my SCSS files as raw content.
Here is the CodeSandox link with my project setup: preview link
What I need?
I need my .scss files content available in app.js as text, so I'll be able to generate snippets in code blocks available for a user.
I don't need help with compilation, it's all good there.
Thanks!

Combining css, html, and js in templates/ folder

I usually see variations on this project structure in django, where the static files are managed by apache or nginx:
app/
- views.py
static/
js/
- base.js
img/
css/
- base.css
templates/
- home.html
manage.py
urls.py
settings.py
However, for a tiny app, is the following an acceptable approach?
app/
- views.py
templates/
- base.js
- base.css
- home.html
manage.py
urls.py
settings.py
If it's a terrible approach, could someone please explain why? For me, it seems like often a template html file contains inline css or javascript for a particular override or convenience, so the above approach doesn't seem that much different for a small application.

The static/ directory should only be used for static content, aka .js, .css, and image files.
The template/ directory should only be used by .html files because they are loaded from django views. Separating your .html files can also be useful for security reasons (all static directory is public, so you don't have to apply any sub-directories access rules).
You don't really have to necessary separate your static files in subdirectories if you only have 2 or 3 files, but I whould suggest you to do so. When your project will be a bit bigger, the structure will be ok, no additional refactor work to do...

Every app you create should be provided it's own static,templates,media,urls directory.For example in templates django advices you to create a subfolder and name it what you have named your app..If you don't do this and choose to do it other way , it will still work but this way is more pythonic and django insists you to be pythonic .. Yo can refer to this link for Django Docs | Design Principles.

How to embed html with references (js, css) in .md file?

I'm an absolute beginner working with Jekyll sites and have currently the following issue:
I want to embed a calendar into my index.md (start page). The index.md only contains the yaml frontmatter so far. The calendar consists of a html-file referencing various .js (script src) and .css (link href) and all the files are located in a folder "calendar".
I tried to embed the calendar with {%include calendar.html} and placed the file in the _includes folder. I also tried the include_reference but I haven't been successful with both options. The .js and .css files (referenced by the calendar.html) cannot be found. The path is wrong. Can anyone help me out?
Again: index.md with frontmatter is my starting page. The calendar.html is included in the _includes folder and the calendar.html references certain .js and .css which are located in a folder "calendar" (just below the main folder).
e.g. is referenced and full calendar.min.js is located in the calendar folder.

How to change path of welcome html file

I have created Dynamic web project and it has .html, .css and .js files. I group these file in respective folders like .js file in javascripts folder and .html file in views folder but i don't able to access these file in project. I used eclipse IDE for this. Is there need to configure path for these folder?

You need to put the JSP file in /index.jsp instead of in /WEB-INF/jsp/index.jsp. This way the whole servlet is superflous by the way.
WebContent
|-- META-INF
|-- WEB-INF
| -- web.xml
-- index.jsp
If you're absolutely positive that you need to invoke a servlet this strange way, then you should map it on an URL pattern of /index.jsp instead of /index. You only need to change it to get the request dispatcher from request instead of from config and get rid of the whole init() method.

These are not Java source files, so it makes no sense to configure them as such. By default in a Dynamic Web Project you only see the src folder under Java Resources. Other folders will be listed at the bottom of the tree. This is by design.
Or if you meant, that you do not see them when you move into the folder by an external file manager: press F5 on the project.

Its based on from which file you are trying to access those files.
If it is in the same folder where your working project file is, then you can use just the file name. no need of path.
If it is in the another folder which is under the same parent folder of your working project file then you can use location like in the following /javascript/sample.js
In your example if you are trying to access your js file from your html file you can use the following location
../javascript/sample.js
the prefix../ will go to the parent folder of the file(Folder upward journey)

I got answer to my question...
Now my directory structure is
WebContent
--javascripts
--stylesheets
--viwes
--META-INF
--WEB-INF
Note: view contain html files
To change path of my welcome html file i made bit change in web.xml present in WEB-INFfolder.
<welcome-file-list>
<welcome-file>/views/welcome.html</welcome-file>
</welcome-file-list>