We Keep Coding

correct way to import CSS and JS in HTML file

I have folder hierarchy like this
how to add css and js file in this index.jsp
browser developer tools

If you want to add css and js files inside one of the jsp files, add these inside head
For CSS
<link rel="stylesheet" href="../css/filename.css">
For JS
<script src="../js/filename.js"></script>
Here .. represents the directory above the jsp (one level up) then /js or /css will goto respective directory.

It all depends on the paths they will have from the browser's perspective. If the browser sees the hierarchy you've shown, then from any of the .jsp files in your jsp directory, you'd use
<link rel="stylesheet" href="../css/filename.css">
The .. goes up one level (from jsp to your root), and then /css goes into the css directory.
You could use root-relative URL like /css/filename.css, but that will break if you put this whole thing somewhere other than the root on the server.

See this answer for the correct way to organise your files in a Tomcat application.
The path to your CSS files should be:
<link rel="stylesheet" type="text/css" href="./css/styles.css" />

Meteor not loading external CSS and JS files

I am trying to load my stylesheets and js files in Meteor. I have an index.html file. This is what I was doing at first:
<link href="assets/plugins/boostrapv3/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/css/animate.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/jquery-scrollbar/jquery.scrollbar.css" rel="stylesheet" type="text/css"/>
There were lots of stylesheet files and script files. This was working fine but if i wrote a url like: 'localhost:3000/manage-user/add', everything stopped working. I have read loads of answers where they have mentioned that I need to make a lib folder and in that folder, I need to make a css and a js folder, but it's not picking up my files, especially my 'style.css' file which overrides styles of bootstrap and all.

assets folder should be inside the /public folder, then try add the / to the begining of the href value.
<link href="/assets/plugins/boostrapv3/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="/assets/css/animate.min.css" rel="stylesheet" type="text/css"/>
<link href="/assets/plugins/jquery-scrollbar/jquery.scrollbar.css" rel="stylesheet" type="text/css"/>

URL can be absolute and relative.
Absolute should starts from protocol value(http://, https://, ftp:// etc) and then domain name, port, path and query part.
Relative can be started either from slash or any other character.
If URL is started from slash it's assumed its value is relative to domain's root.
If URL is started from any other character it's assumed it's value is relative to current URL(or value in tag).
Anyway value localhost:3000/manage-user/add means for browser:
"take current page's URL and append this value to its end".
So your files are tried to be fetched from something like http://localhost:3000/localhost:3000/manage-user/add

To properly add your styles.css and/or your templates/components to your app, you must register/add them as an import path to the body.js.
CSS
Go to your body.js.
Add import '/imports/ui/stylesheets/styles.css' (copy/paste this line)
JS - Templates/pages
Go to your body.js in your layouts folder.
Add import '/imports/ui/pages/[yourDirName]/[yourFileName].js'; (copy/paste this line)
BONUS Content!
JS - Components to import into your html templates (optional)
Go to your pages folder.
Select the proper directory.
Select the js file that is importing your html template file.
Import the component to the js file.
import '../../components/[yourDirName]/[yourFileName].js;
Example import '../../components/hello/hello.js';

How to reference CSS from libraries installed via npm?

So for example say I installed something:
npm install --save something
and it downloads into
./node_modules/something/
and it has a folder in there perhaps called styles and in that folder you have something.css. How would I include that css file in my html document (if my html document was along-side the node-modules folder?
I mean I could do this in my html head:
<link rel="stylesheet" href="./node_modules/something/styles/something.css" type="text/css" media="screen" />
But it feels wrong to go dig in your node_modules directory for stuff. Especially if the html document perhaps needs to get minified and then thrown into some ./dist/ directory. Because then the path to something.css is off..
Isn't there a way to simply just go:
<link rel="stylesheet" href="something.css" type="text/css" media="screen" />
in your html document - regardless of where it's sitting in your project structure - and it'll just know where to go find that css file?

There is a package for this called npm-css
In webpack you can require css like require('bootstrap.css'), this is why installing css via npm quite useful
if you don't have it, you can create a npm script task that would require (with fs.readFile) all the css files from the node_modules, compile them into single file (which is what npm-css does)

Actually there's no need to reference the css files explicitly in your html head.
Because you've already involved the css library via npm ,once you run npm start to run your project , Node.js will load all the node_moudules which also includes the css libraries you need.

Depending on which module loader you are using . For example Webpack
then please read this link https://github.com/JedWatson/react-select/issues/176
Otherwise in your server you need to have node_modules as static file directory and then you can safely do
<link rel="stylesheet" href="./node_modules/something/styles/something.css" type="text/css" media="screen" />
and it correct no harm in that

Combine and minify all bower libraries into one file webpack

I use bower to require my fronted css/js dependencies, I referenced all of them from my index.html view which also include my react app bundle in this html.
For the bundle.js of my react app everything is OK and webpack does the job well.
My question is how can I automate the process of combining all the style import from bower_component directory using webpack (css + js) ?
Does a tool can go throw the index.html file and then when see the import (which in my case is something like this :
<link rel="stylesheet" href="/public/plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/public/plugins/select2/dist/css/select2.min.css">
<link rel="stylesheet" href="/public/plugins/summernote/dist/summernote.css">
<link rel="stylesheet" href="/public/plugins/ion.rangeslider/css/ion.rangeSlider.css">
<link rel="stylesheet" href="/public/plugins/ion.rangeslider/css/ion.rangeSlider.skinFlat.css">
<script src="/public/plugins/summernote/dist/summernote.min.js"></script>
replace the content of the file using the URL of the file, moreover even if the URL is relative and defined static in expressJS.
Gulp can be the tool but it would be great if one tool can do all the job.
Gulp inject seems interesting https://www.npmjs.com/package/gulp-inject but no options for relative URL and to take only the file required in the index.html file.
I cannot use gulp and say all the js/css in the bower component because they are not all used and I don't want to more them to be able to update the component easily.

Referencing directory CSS/JS from a subdirectory

I have a website where I am referencing the CSS/JS in the root directory. I want to create a sub-section of the website under it's own directory. The problem is that I am referencing the
CSS/JS in the main directory and I want to know what the best way to reference the CSS/JS would be for the subdirectory.
If I just use the http address for the files it works, but I think there could be a better way to go about this. Does anyone have any opinion on the matter?

You can use ../ to specify the parent directory when using relative paths. So for example, if your file structure is something like this:
root
index.html
style.css
javascript.js
subdirectory
subpage.html
Then in your subpage.html file, use:
<link rel="stylesheet" href="../style.css">
<script src="../javascript.js"></script>