ExpressJS for rendering content on a GET request
Question
I have an html page as below
<!doctype html>
<html lang="en">
<head><meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Report</title>
<link rel="stylesheet" href="assets/app.css"/></head><body>
//Content//
<div id="report"></div><script src="assets/app.js"></script></body></html>
This html page lies on below folder with structure
report
--assets
--app.js
--app.css
--myfile.html
Now i have my application which is trying to render this html. Below is located in routes.js and the structure is as follows
app.use('/Users/report/assets', express.static('/Users/report/assets'));
app.get('/api/testresults/:id', (req, res) => {
const id = req.params.id;
res.sendFile('/Users/report/myfile.html');
});
My Application structure is as following
MyApp
app
—routes
—index.js
—routes.js
node_modules
package.json
server.js
What should i add here. I do not want to change the html as i believe it should be able to find the files once i use express.static() I keep on getting the error app.js not found 404
NOTE : If I change href of my html to
/Users/report/assets/app.js
and same for css, it works but i do not want that.
3 answers
solution1
1 ACCPTED 2018-09-04 21:46:59
If you want your resources such as assets/app.css to be independent of the URL of the page they come from so they can live anywhere in your file system, then stop using relative URLs. Use absolute URLs to refer to them in your web page such as:
/assets/app.css
/assets/app.js
Then, you can very easy configure an express.static() route to handle them for all pages.
app.use(express.static("put directory here that contains the assets folder"));
Which, I'm inferring from your question would be this:
app.use(express.static('/Users/report'));
When Express gets a request for /assets/app.css , it will check the express.static() route handler. If you've specified the parent directory for your assets folder in the express.static() , then that route handler will look IN THAT DIRECTORY for /assets/app.css which is what you want.
So, in the example above, it would take the request for /assets/app.css and combine it with the path specified in express.static('/Users/report') and look in:
/Users/report/assets/app.css
Which would be what you want.
When the path you use on the resource in your HTML file does not start with http:// or with / , then the browser considers it to be relative to the URL of the page so the browser takes the path of the web page and preprends it to the URL specified in your HTML. That really complicates static resources so that is usually not what you want. Instead, you want to make them absolute paths by making sure they start with a / . Then, they are easy to set up a route for because the route will be the same no matter what the path of the page that contains them is.
solution2
1 2018-09-04 21:47:37
You're still trying to refer the path with /Users/report/assets where in the html <script src="assets/app.js"></script>
Try to change the below code,
app.use('/Users/report/assets', express.static('/Users/report/assets'));
to
app.use('assets', express.static('/Users/report/assets'));
solution3
1 2018-09-04 21:50:30
Since you have:
app.use('/Users/report/assets', express.static('/Users/report/assets'));
You should use as path app.js instead of assets/app.js either way with app.css
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.