Javascript not linking in pug - javascript

folder
-static
--images
-public
--js files
-views
--pug files
-css
-home.html
-other webpages
-app.js
base.pug is template where all files are included and later I had extended this for every page and included respective html files
home.pug is homepage pug template[pug template](https://i.stack.imgur.com/Xd41o.png)
I am using express and node js.
When I double click on home.html and open it then everything is fine but when I host it on localhost using node app.js then few images and slideshow do not come up.
When I double click on home.html and open it then everything is fine but when I host it on localhost using node app.js(in which I render pug files and in which I had included css, js and html files) then few images and slideshow do not come up. I guess that problem is with my pug file, most probably js files are not linking to it.app.js

The thing is that js file should be placed in static folder along with all images when I did that then with that path everything worked fine

Related

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

Loading plugins in Webpack for a static website

I'm building a static website,
I have downloaded some template just get things started.
There are three main JS files in this template:
jquery.js
plugins.js
functions.js
They are loaded in the index.html file in that order.
I would like to use webpack for production.
I have created a new file: index.js and in that file, used require to load these files
require('jquery.js')
require('plugins.js')
require('functions.js')
This is not working because of probably scope issues, plugins.js for example doesn't know about jquery and so on.
I can move all the plugins from plugins.js to package.json and have it downloaded to node_modules and use it from there, but because it's a static website and just a FE to my app, I don't care much about updates to its packages (and another reason, there are a lot of plugins there...).
How can I make jquery.js and plugins.js symbols to be seen by functions.js?
Thanks

Liferay portlet + Single page html, css, javascript

I have a static Single Page - html, css and javascript files. I have tested by deploying it into apache-tomcat and it works.
I would like to convert this html, css and javascript as Porlet.
So far, I have done the followings,
Created the liferay - maven project (Through eclipse) [I have build and tested, this porlet is working when i deploy as war in LifeRay)
In liferays maven project: ..src/main/webapp/ folder i have created a new folder called myapp
Have pasted all the html, css, javascripts inside the myapp folder
In the view.jsp file, i have included the myapp/index.html file.
Build the war and deployed into liferay.
Here, it is successfully picking the myapp/index.html in liferay porlet. However, it is not picking any resources inside the index.html (css, javascript).
Here, how can i make this porlet up and working correctly. Please assist. Kindly note that, i have tested this static page in independent tomcat server, it works fine. So that means, all the resource path that I have given is correct in index.html

Handling urls of assets compiled by Rails's assets pipeline?

I'm using an external plugin in my rails project. I've placed the css for it inside vendor/assets/styles/pluginName, and the js in vendor/assets/scripts/pluginName. I've added vendor/assets to config.assets.path in application.rb, and I'm requireing the stylesheet and js file for the plugin in application.js and application.css
My question is, vendor/assets/styles/pluginName/styles.css refers to an image foo.png which is located at vendor/assets/styles/pluginName/foo.png. When the assets are pre-compiled, does foo.png remain at the same path, or do i need to do something so the paths don't break?
Reason for asking: Currently, everything works on localhost, but when i deploy and recompile the assets, the plugin's js seems to work, but the images are missing.

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>

Categories

Resources