Develop Reference

What aren't my paths working when I change the way I serve my index.html file?

I recently decided to update the way I serve my index.html file from
app.use('/', express.static(__dirname + '/..'));
to
app.get('/', function(req, res) {
res.sendFile(path.join(__dirname + '/../index.html'));
});
Both work fine as they both properly serve my index.html file. However when I switch to using app.get ...
I can no longer get my paths to work in my index.html file.
For example, I have a .svg file inside my index.html file that it serves as follows:
<img src="dist/images/svg/favicon.svg" width="128" height="128">
The request which now fails ( 404 error ) looks like this in the console:
http://localhost:3000/dist/images/svg/favicon.svg
I have tried adding in the root directory as follows:
<img src="ll-server/dist/images/svg/favicon.svg" width="128" height="128">
but this does not help - both give 404 errors.
Why is changing the way I serve my index.html file breaking my paths inside the index.html file?
How can I fix this?

Why is changing the way I serve my index.html file breaking my paths inside the index.html file?
use runs some code for every URL which starts with the specified path. That code (static) looks at the URL, finds a matching file on the specified path, and serves up that file.
get runs some for for a specific URL (at least in this case because you haven’t used * or a parameter) and that code serves up index.html and only index.html.
Your images have stopped working because you removed the code which serves up the the HTML AND the images with code which serves up ONLY the HTML.
How can I fix this?
Put the code back the way it was. The changes you made are not reasonable.
——-
Then fix your security issue.
The directory you are serving your static files from is the parent if the directory your JS module lives in. This means you have given your JS module (and probably all your JS modules) URLs on your webserver.
Don’t expose your server-side business logic.
Change your directory structure. A typical one is:
/ (containing the project)
/src/ (containing the JS)
/static/ (containing the static files)

Serving UI in express.js after logic

I understand how to return a file using express with:
res.sendFile(path.join(__dirname, 'fileName.html'))
And I understand how to serve up a folder using:
app.use('/customAPI', express.static('folderName'));
using the documentation here.
The folder with the UI is created using angular 4 build. So, it all goes into one folder creating a index.html and a bunch of *.bundle.html files.
However, I don't understand how to serve up a the UI after doing some logic. For example:
router.get("/", function (req, res) {
let myParam = req.query.whatever;
if (whatever) {
res.redirect('//google.com'); //this works fine
}
else {
//I don't know what to do here
app.use("/somePath", 'dist'); //won't work because what do I put in "somePath"?
res.sendFile(path.join(__dirname, '../../dist/index.html'));
//^ this only serves up the file but fails because it can't find the library files that index.html needs to load.
}
});
I've tried going down the road of trying to use res.render but I'm not 100% sure if that is what I'm looking for.
Question: How do I serve up a folder containing all ui information correctly

When you serve a specific path these are sending the content only for that path, for example an HTML with the interface, the HTML file can make calls to other files, like CSS, JS etc ...
You need to serve the static files in a public folder
app.use('/static', express.static(path.join(__dirname, 'public')))
All files in the static folder will be served in the url /static/filename
In the html of the path, you must include the resources of the static folder that you need

What is the right way to set JS and CSS paths in express/jade file?

I'm trying to create my first application using Mongo, NodeJS, Express and Sequelize.
If I use link(rel='stylesheet', href='http://localhost:3000/css/style.min.css')everything works fine, but, is it the right way?
How to get the app path (or something like) to use in layout and views files?

In your main file (probably app.js) you need to set your public directory - I usually name the directory "public," and you should put it in the app's root. Here's the code to do that:
app.use(express.static('public'));
Then, to serve your css folder, you can put it in the public directory and use the path /css/style.min.css.
For your jade files, create a folder called views in your app's root. Then, add this to your app.js.
app.set('views', __dirname + '/views');
Put all of your jade files in there. Now, if you have a layout.jade in there and you want to use it in index.jade, you can use the layout's path relative to the view directory to reference it, for example:
extends layout
block content
h1 stuff here

Please use an absolute path, so you dont include the server name
link(rel='stylesheet', href='/css/style.min.css')

Can't serve static files in express

Im using jade with express.
This is my express code for serving static files:
app.use(express.static(__dirname + "/frontend"));
And this is my jade code in layout.jade:
link(rel='stylesheet', href='/css/style.css')
script(src='/bower_components/angular/angular.min.js')
script(src='/app.js')
For some reason stackoverflow doesn't allow me to show my folder structure but I have every file mentioned here in my frontend folder located in the root directory.
I tried commenting out express.static and using the full path but that also doesn't work.
I'm getting the 404 error.

The above code you posted will expose the assets on /. To expose them on /frontend, you need to use the following.
app.use(express.static("frontend", __dirname + "/frontend"));
If you want to create a “virtual” (since the path does not actually exists in the file system) path prefix for the files served by express.static, you can specify a mount path for the static directory, as shown below:
app.use('/static', express.static('public'));

app.use('/frontend', express.static('frontend'));
link(rel='stylesheet', href='/frontend/css/style.css')

angular js can't display bootstrap modal when relocate to another folder

I am using the bootstrap.ui modal and angular as the frontend, and using the node.js as the backend, in the node.js based server, I used /views folder for ejs template and public folder for storing static resources.
app.set('views',__dirname+'/views');
app.engine('.html', ejs.__express);
app.set('view engine', 'html');
app.use(express.static(__dirname+'/public'));
Previously my angular page is in the /public static folder, the modal works fine. but then I moved the angular page to the view folder, the page is loaded fine. but when it comes to the modal, the page can't display the modal, showing error
Error: [$compile:tpload] http://errors.angularjs.org/1.2.7/$compile/tpload?p0=template%2Fmodal%2Fwindow.html
http://errors.angularjs.org/1.2.7/$compile/tpload?p0=template%2Fmodal%2Fbackdrop.html
So the error is caused by the fact that template/modal/window.html and template/modal/backdrop.html are still in the public folder, that my angular page can't find these file again.
Now even I relocate the template folder from public to views, it still doesn't work, how can I fix this problem

I think that the problem comes from the hardwritten templateUrl in modal.js source code (see lines 64 & 86)?
There's a debate about this implementation: Github PR, Github issue.