Referencing in html to css and js files - javascript

My css and js functionality dont load properly in VSC.
When I go live, it seems that it cannot find the files.
only when I refer to it from the project root will it work in css.
from src/main/webapp/ <script src="src/main/webapp/js/darkmode.js" type="text/javascript"></script>
in Intellij and Heroku web deployment it works from the webapp root:
from webapp/ <script src="/js/darkmode.js" type="text/javascript"></script>
The same applies to .css files.
And then I am not even talking about referring to REST resources on heroku, as this will work on tomcat local but not on heroku web with the same adress.

It seems my problems in vsc where down to loading in a larger project with Java, when I loaded only the webapp folder then things worked properly !

You can use drag and drop mouse files from project to working file ( VS Studio)
Or using "~"
<link href="~/Content/bootstrap-chosen.css" rel="stylesheet" />

Related

vite build does not produce javascript file in dist folder

I am trying to deploy my vanilla JS app to Firebase hosting.
I am using Vite as a build tool.
When I run it locally, it works fine. But when I deploy it to Firebase hosting, I realized that it was missing main.js file.
I checked my dist folder generated by Vite, and it was indeed missing main.js file.
I never ran into this issue before when using JS framework, but now I am with Vanilla JS.
How can I make sure that my build will contain javascript file as well?
Your script tag should look like this :
<script src="./main.js" type="module"></script>
There must be an attribute :
type="module"

MVC5 bundle url version and content are missing

In my MVC5 web application I use two bundles for a page, one contains the common JavaScript files for all the pages and the other bundle is specific for the page. This works fine in development environment but the page specific bundle does not load in the staging. The Rendered script tags are as below.
<script src="/bundles/jsAll?v=72eJMPeVrT1mvbZw1VAU7y6r7vodOImt5NOMq4Gcp581"></script>
<script src="/bundles/my-page?v="></script>
Could not figure out why this happens...
The problem was locally this works because all the files are available, but did not work after deployment because the script file was not included to the project, hence the file does not get deployed to the destination. Since the file is missing the bundle has nothing to serve, so there won't be a version nor content.

Can't find css and javascript on spring maven project

I have an application using spring framework using maven project. I also have an css and js under WEB-INF folder. When i try to call the javascript and css like this:
<link rel="stylesheet" href="../allDesign/js/vendor/animsition/css/animsition.min.css">
I can open the url to open via project, but when i try to run, i get an error that the browser can't find the source code.
the error show like this :
Here our structure of my project:
can you tell me how to fix the url?, because when i try to click the url on netbeans, netbeans can find my animsition.min.css.
Files in the WEB-INF and META-INF folder are protected, you can not access them directly.
So move your allDesign as a direct subfolder of Web Packages.

How to automate js files join for prod deploy in play framework

I'm working on a project where the front end uses AngularJs (it is a SPA) and the backend uses Play Framework 1.3. Our angularJs file is growing up fast so it would be nice to split it and use some kind of directory structure to keep organized all of the directives, controllers, filters, etc in diferent files. But I only want this in dev enviroment.
When we deploy to a production server we want to find an automated solution to 'join' all the js files into a single minified version.
So for example in production the index.html should look like this:
<script src="some/dir/myAngularCode.min.js"></script>
and in dev environment I want it to look like this:
<script src="/some/dir/controllers/controller-1.js"></script>
<script src="/some/dir/controllers/controller-2.js"></script>
<script src="/some/dir/directives/directive-1.js"></script>
<script src="/some/dir/directives/directive-2.js"></script>
and so on...
Could you guide me to do this? I couldn't find anything related to Play Framework,thereare lots of examples with nodejs but we are not using node here.
Thanks in advance!

Where to include js libraries in Ionic?

thanks for your time! I am battling to get any scripts running in the Ionic framework's sidemenu starter template. I have placed them everywhere (except where they're supposed to be, clearly) but to no avail. I have tried loading them before ionic and also using a lower version of jquery. I have built a decent mobile site with jquery that I've pushed through phonegap and it works perfectly but I would like to use Ionic as a personal challenge. However, I can't seem to get any of the scripts I'm using to work.
Do I include them in the main index file and if so, do they get loaded when each template instantiates? Or must I include them in each of the templates? If you could please be quite specific as to where in the folders I should place them (if indeed there is a specific place) and also where I should call the scripts.
I installed ionic using this yeoman generator https://github.com/diegonetto/generator-ionic if that helps.
If I have note been clear enough please comment and I will elaborate further.
Thank you for your patience - J
I know this is old, but for those who are struggling with this for Ionic 2, add script files to src/assets/scripts, then refer to them via a script tag in src/index.html (not the one in www). When it builds, everything in src/assets will be copied to www/assets, including your scripts. index.html will also be copied to www.
<!-- cordova.js required for cordova apps -->
<script src="cordova.js"></script>
<script src="assets/scripts/openpgp/openpgp.js"></script>
<script src="assets/scripts/openpgp/openpgp.worker.js"></script>
I would add any scripts such as jquery either just before or just after the script tag for cordova. This is in index.html located within the app/ directory of the project that running the yeoman generator created.
<!-- Place scripts such as JQuery here -->
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="scripts/config.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers.js"></script>
Once you have placed the scripts here they will get called when the app runs, and libraries such as jquery will be available globally throughout the app. I hope this helps.
As nice listed by a user here https://github.com/ionic-team/ionic/issues/9422
Install latest ionic
Start your project
Go to /src/
open the assets folder
create a /js/ folder inside assets
copy your .js inside this js folder
goto /src/index.html
Add your path
Go to your typescript file of choice and declare var N;
N.yourFunction
ionic serve

Categories