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
Related
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)
i am trying to access the static file from the same directory but it is not working problem is it isn't loading the image in the live server
app.use('/static',express.static('/public'))
Here public is the main directory where I creat 'css'& 'img' folder and put my 'js' and 'html'file.
Before I used to access the file out side of the same directory from where I creat a css and img folder & inside those folder I creat a 'css' file and put a image . on that time it was working properly but when I put my 'js' and 'html' in the same directory where I creat my 'css' and 'img' folder it is not working means server is creating but in the 'HTML' file the 'image' is not loading in the live server.
hear is the code:
const express= require('express')
const app= express()
app.use('/static',express.static('/public'))
app.set('view','./public/view')
app.get('/',(req,res)=>{
res.send('user accessed')
})
app.listen(5000,()=>{
console.log("server is running at 5000")
})
Firstly, if you want to hear right answer you need to provide as more as possible information about your problem. For example, you need to provide at least folder structure of your app, files which you want to include to your app and paths which you use. And another point for you, why not to use best-practice solution which suggested by node js express creators? Here is express app generator https://expressjs.com/en/starter/generator.html . If you keep to use the best practice solution then you will not have such questions.
After watching Node.js apps on Firebase Hosting I tried to create a project with Polymer and NodeJs/express and firebase hosting.In the linked Video it is shown that firebase would serve by default the static public/index.html file which is why they remove it to then serve a dynamic one. However, this particular file is in the same functions directory and not anymore placed in the public folder.Does this mean that my whole project should be placed in the functions folder or just the app entry-point? I am not able to send a file that is placed in my public folder as shown below.
project
functions
server.js
public
index.html
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, '/public/index.html'));
})
I believe firebase is hosting the public and the function folder differently or am I referencing just wrong?
You'll need to nest your public folder inside the functions folder to be able to reference files from it in your functions. You can do this just by changing the public setting in firebase.json to be e.g. functions/public and then moving the directory inside functions.
You would then be able to do something like you're describing.
I think no need to move entire public folder into functions folder. You can use the relative path like this
app.get('*', (req, res) => {
res.sendFile( './../public/index.html'));
})
It worked for me... try this.
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
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')