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

How to include static files in express js

I am using the the express js framework with node js and in my server.js file , i have used
app.use('/api',router);
In my ejs file , when i use a script tag
<script src = main.js>
I get an error "Cannot get http://localhost:3000/api/main.js"
How can i include these files in the ejs
please help!!!

in app.js you have to add static folder directory access
app.use(express.static(path.join(__dirname, 'public')));
in public folder add your folders files
--public
----javascript
----css
----img
inside javascript add your main.js
and in ejs add
<script src = "javascript/main.js"></script>

You can use express.static middleware
app.use('/public', express.static('directory/containing/your/files'));
The parameter of express.static is the path to the directory containing all your files that you wish to make static (the path that you provide can be relative to the directory where you launch your node process, or an absolute path), the directory should be available in your file system.
Then you can require your resources like: <img src='/public/imagesA.jpg'>
The '/public' mount path is optional, but recommended

You serve static files through an included middleware in Express - express.static('folder/with/resources'). You do so by adding it to the middleware chain using app.use.
Let's say you want to serve your static files located in the local folder /dist through the public URL /static.
import express from 'express';
const app = express();
app.use('static', express.static('dist'));
Read more about it here.

How can I serve external css/js files to html files displayed by a NodeJS app?

I would like to serve html files at given URLs using only NodeJS, or a very lightweight and flexible other way. I've been able to serve those html pages using Express but there are things I don't like (the fact we must use a public folder and all the dependencies), and the external css/js just don't load.
I use something in the server.js file like :
app.get('/', function() { app.sendFile('index.html')});
And in the index.html file :
<link rel="stylesheet" href="style.css">
All the files are in the same folder.

In express you could you static middleware.
In the example below you define public directory to store it.
app.use(express.static(__dirname + '/public'));
Now you can put your style.css to this folder and it will be served as a static content.
More about middleware: http://expressjs.com/en/guide/using-middleware.html

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')