I have the following folder structure in my node project (using node, webpack, and express):
dist/ (folder containing .js files)
views/ (folder containing static .html files referencing .js files in above mentioned dist folder)
The index.html (located in the above mentioned views folder) file contains the following:
<script type="text/javascript" src="../dist/test.js" ></script>
In the app.js for the node application I am serving the static .html page in the following manner:
router.get('/setup', function(req, res){
res.sendFile(path.join(__dirname, './views/index.html'));
});
The problem is that the .html renders properly but it is unable to find the .js file which it references. How do I fix this?
Inside your app.js file add line:
app.use('/source/', express.static(__dirname + '/path_to_js_folder'));
And modify your < script > tag as:
<script type="text/javascript" src="/source/test.js" ></script>
Use this src="./dist/test.js" instead of src="../dist/test.js". May be this will be the problem
You can do the following -
app.use(express.static('dist'));
router.get('/setup', function(req,res) {
res.sendFile(__dirname + '/views/hello.html');
})
And in your html file just do this -
<script type="text/javascript" src="test.js" ></script>
Related
My folder structure is as the following:
public
css
html
main
pllanet.html
server
server.js
src
img
js
The public folder contains all HTML and CSS codes, and src folder contains img and js files. In server.js, I am using Express to indicated the static files directories as the following:
app.use(express.static(path.join(__dirname, "../public")));
app.use(express.static(path.join(__dirname, "../src")));
When I open pllanet.html, it doesn't seem like the app is picking up the second directory, since the images don't load.
In the pllanet.html file, I have the css route as the following:
<link rel="stylesheet" href="../../css/main/pllanet.css">
<link rel="stylesheet" href="../../css/main/home.css">
Could somebody help me, please? I am really stuck. Also, is it my folder structure a good practice?
Really appreciate your help guys.
You can implemet virtual path
To create a virtual path prefix (where the path does not actually exist in the file system) for files that are served by the express.static
app.use('/static', express.static('public'))
In your code, you could:
app.use('/public', express.static(path.join(__dirname, "../public")));
app.use('/resource', express.static(path.join(__dirname, "../src")));
// and link in html like
<link rel="stylesheet" href="/public/css/main/pllanet.css">
// img or js
<link rel="stylesheet" href="/resource/img/someimage.jpg">
I am trying to use Express for my Node.js server. I put my web page in /views/page.ejs as required. Yet, I have something like this in my code.
<script type="text/javascript" src="jsfile1.js"></script>
<script type="text/javascript" src="jsfile2.js"></script>
<script type="text/javascript" src="jsfile3.js"></script>
<script type="text/javascript" src="jsfile4.js"></script>
I also have a .css file to load.
My question is: how to load them ? I encounter 404 errors. My files are in the same directory as server.js (the Node.js app that I am running).
Thank you for your answers!
Noël.
You will need to include in your server.js, an express static route to the directory where you want to serve the files.
I have my static assets in /public, So the code that I use to include the static files located in /public is:
app.use(express.static(path.join(__dirname, 'public')));
With that static route in place, if you had a file /public/stylesheets/test.css, then you would reference the file like this in your .ejs:
<link rel="stylesheet" href="stylesheets/style.css">
Hope that helps!
I guess the title might be confusing. I didn't know how to word it but say i have a directory as follows:
/
app.js
/static
/styles
main.css
/views
index.html
/files
1.html
2.html
If I serve 1.html and have in it, i have a css file as
<link rel="stylesheet" type="text/css" href="static/styles/main.css">
This does not load the css file. It works fine on the index page I'm assuming because it is directly inside the views folder. Because I'm trying to access something in the files folder, its not working. Could someone point me in the right direction?
Also note I have set
server.set('views', __dirname + '/views')
server.use('/static', express.static(__dirname + '/static'));
Try removing static from href attribute
<link rel="stylesheet" type="text/css" href="/styles/main.css">
And change the static files serving configuration to
server.use(express.static(path.join(__dirname, 'static')));
I am trying to include jquery in my socket io served file which is served like this -
app.get('/:file', function(req, res){
res.set('Content-Type', 'text/html');
res.sendfile('shrib.html');
});
Now in shrib.html when i try to send -
<script type="text/javascript" src="/jquery-1.11.0.min.js"></script>
or
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
I get the error of jquery not found, but when i try to use the CDN version of jquery it runs fine. In my directory structure i have the jquery-1.11.0.min.js in both the main directory and also in the node_modules directory yet i don't see it and get error like this -
Uncaught SyntaxError: Unexpected token < jquery-1.11.0.min.js:1
Uncaught ReferenceError: $ is not defined
did You mistaken socket.io with express?
Because Your problem looks like its related to express, not socketio, and i see no sockets here...
If yes, You should set static files like this:
app.use('/js', express.static(__dirname + '/js'));
put all js files in your project/js folder, and then do:
<script type="text/javascript" src="/js/jquery-1.11.0.min.js"></script>
Tried all possible combinations I can think of but not able to load static files using express server.
Dir Structure
app
--todoApp.html
----server.js //node file
----jquery.js
----backbone.js
Node server
var http = require('http'),
express = require('express');
var app = express();
app.listen(3000);
app.set('views', __dirname);
app.use(express.static(__dirname));
app.engine('html', require('ejs').renderFile);
console.log(__dirname);
app.get('/', function(req, res){
//res.send('Whats up?');
res.render('../todoApp.html');
});
__dirname prints as app/js ehich is correct. But page loads with error the server responded with a status of 404 (Not Found) http://localhost:3000/js/jquery.js.
HTML loads the script like this:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/underscore-min.js"></script>
<script type="text/javascript" src="js/backbone.js"></script>
I tried multiple things but it does not work.
Tried following:
app.use('/js',express.static(__dirname));
or
app.use('/',express.static(__dirname));
Please help.
Since the current directory is already the js directory, you don't need to specify it in the <script> tags when loading your JavaScript files:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="underscore-min.js"></script>
<script type="text/javascript" src="backbone.js"></script>
When you set a static directory in express, that directory effectively becomes the root, so all of your static file paths should be relative to that directory.
Also, it is probably not a good idea to have your server-side code in a static directory, since this would allow anyone using your server access to your server side code. It would be better to put all of your static files in a different directory, and set that as the static directory in express.