You have not provided a lot of info in the question but from what you provide I can have few suggestions:
Suggestions
Instead of adding a lot of express.static
uses:
app.use(express.static(__dirname + '/images'));
app.use(express.static(__dirname + '/CSS'));
app.use(express.static(__dirname + '/font'));
app.use(express.static(__dirname ));
app.use(express.static(__dirname +'/ketcher'));
app.use(express.static(__dirname +'/ChemAlive_JS'));
put those files (and directories) that you want to be served into one directory, e.g. called static
, and use express.static
once:
app.use(express.static(__dirname + '/static'));
or better yet, using the path
module:
app.use(express.static(path.join(__dirname, 'static')));
you need to require the path
module first with:
var path = require('path');
Now, instead of serving the single file for the '/'
route with:
app.get('/', function(req, res) {
res.sendFile('/home/laetitia/Project/ChemAlive_Interface_Node/ChemAlive_Interface.html');
});
just put that file into the static
directory as index.html so it will be served by the express.static
middleware automatically.
Rationale
The way you have it configured currently, is that e.g. everyone can download your Node application - app.js
with all of its configuration and even submodules etc.
Also, by using the express.static
middleware many times I suspect that you are not sure how the files in those directories will be mapped to URLs.
Having a one place for static files makes it easy to verify whether any script tags have correct paths etc.
My guess
You don't provide enough info to be sure but my guess is that the JavaScript files for the main HTML file are not loaded correctly but you provide not enough info to be sure.
You can open the developer tools console in the browser and reload the page while the console is open and see for errors.
I suspect that the ketcher.init()
method is being run but either the method, or the ketcher
object is undefined, because some <script>
tags failed to be loaded.
Example
The full example after following my suggestions would be much simpler:
var path = require('path');
var express = require ('express');
var app = express();
app.use(express.static(path.join(__dirname, 'static')));
app.listen(8080);
Maybe I would add some output to see what's going on:
var path = require('path');
var express = require ('express');
console.log('starting app.js');
var app = express();
app.use(express.static(path.join(__dirname, 'static')));
app.listen(8080, function () {
console.log('listening on http://localhost:8080/');
});
And now you will have all files that can be served to the browser in one place: in the static
directory in this example.
Working app
You can see my example of a working Express application serving static files on GitHub:
In this example the directory for static files is called html
but you can call it how you want, as long as it's consistent with how you use the express.static
middleware.
You can start from this example project and just put your own files into the directory where express.static
is told to look for files to serve.
You can also change the port number to match your needs.
More examples to do the same with and without Express, plus better explanation:
More hints
The onload callback may not be fired if the page is waiting for some resources to load.
To see if your onload callback is firing you can change it to:
<body onload="alert('onload callback fired');">
Also the ketcher
object may be not initialized or it may not have the init()
method. After the page is loaded you can open the JavaScript Console and try running the method manually to see if it would work if it was fired:
ketcher.init();
You can also try commands like:
console.dir(ketcher.init);
console.dir(ketcher);
console.log(typeof ketcher.init);
console.log(typeof ketcher);
to see if the ketcher
object contains what it should.
Even if the GET localhost:8080/ketcher.js
gives a 200 OK status, it can still load some other resources that are not available or, as is very common with code that serve files with res.sendFile()
(though unlikely in this case), it can serve HTML instead of JavaScript and result in a cryptic parse error on the <
character - see this question for example:
Other related answers: