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!
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 new to grunt and tests and currently I have setup like this:
Grunt running tasks after which I have build folder where I have my compiled index.html and all his resources (css, js, images)
Now I want to run tests using grunt-mocha-phantomjs and it needs additions to my index.html like:
<link href="../node_modules/mocha/mocha.css" media="screen" rel="stylesheet" type="text/css" />
Inside head tag and:
<div id="mocha"></div>
<script src="../node_modules/mocha/mocha.js" type="text/javascript" charset="utf-8"></script>
<script src="../node_modules/chai/chai.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
mocha.ui('bdd');
expect = chai.expect;
</script>
<script src="test.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
mocha.run();
</script>
Inside body tag.
I want to be able to open that modified index.html in web-browser too. (I have setup apache for it and example test works great both in grunt and web-browser)
So I am planning using task grunt-contrib-copy to copy all files from my build directory to test directory and add those lines to index.html and then launch mocha_phantomjs task.
Is this correct way to do it?
Which NpmTask can do it?
Not sure about "Is this correct way to do it?" part but I solved it.
I used grunt-html-build and its Removing parts feature.
Removing phantom's code for build folder, and keep it for testing folder.
It works great.
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>
My socket.js file can not be found when my Node.js server runs on Heroku, however when it runs on localhost, it is found. In addition, although the app.js file is in the same directory with socket.js file, it can not be found. I've seen some posts suggesting to use
app.use('/', express.static(__dirname));
but i guess it is not the case here.
my index.html file :
<script src="/angular-socket-io/socket.js"></script>
<script src="/socket.js"></script>
<script src="/socket.io/socket.io.js"></script>
Amongst them, the only one couldnt be found is the second directory(/socket.js) which contains the 'socket factory'inside.
My folder tree is as follows;
-app
--assets
---app.js
---socket.js
Any help please?
Just add app.use(express.static(path.join(__dirname, 'app/assets'))); to your main code and after that you can use <script src="/socket.js"></script>
My JavaScript file didn't initialize because of how I imported the JQuery script inside of my index.html.
If your JavaScript file that contains JQuery is not initialized. Make sure to import it with HTTPS not HTTP.
WRONG :
<script src="http://code.jquery.com/jquery-3.5.1.js"></script>
CORRECT :
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
This solved my problem of missing the JavaScript file on Heroku.
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.