I have an index.html
<!DOCTYPE html>
<html>
<head>
<title>Server-side Example</title>
<script src="./CircleArea.js"></script>
</head>
<body>
<input
id="ftpd"
type="button"
value="Calculate"
onclick="CircleArea()"
/>
</body>
</html>
It calls the CircleArea.js file.
const PI = 3.14
let radius = 3;
function circleArea(){
var inputField = document.createElement("INPUT");
inputField.setAttribute("type", "text");
inputField.setAttribute("value", (PI*radius*radius));
document.body.appendChild(inputField);
}
module.exports ={circleArea}; // This I added for nodejs
It works fine. But I now want to run Index.html on the server-side.
I added server.js
let http = require('http');
let fs = require('fs');
let handleRequest = (request, response) => {
response.writeHead(200, {
'Content-Type': 'text/html'
});
fs.readFile('./Index.html', null, function (error, data) {
if (error) {
response.writeHead(404);
respone.write('Whoops! File not found!');
} else {
response.write(data);
}
response.end();
});
};
http.createServer(handleRequest).listen(8000);
console.log('Server running at http://localhost:8000');
Now node server.js
gives error
CircleArea.js:1
Uncaught SyntaxError: Unexpected token '<'
(Index):13
Uncaught ReferenceError: CircleArea is not defined
at HTMLInputElement.onclick ((Index):13:6)
My question is how should I modify Index.html and CircleArea.js to run it on nodejs?
Your code has nothing to do with server-side evaluation. You're using Node.js as a web server. The server doesn't evaluate the client code. It doesn't import CircleArea.js. You don't need
module.exports ={circleArea}; // This I added for nodejs
and should remove it. It's a CommonJS module export and not allowed in browser code.
A web browser sends a request for index.html. The server responds with the content of Index.html. The browser evaluates it. It finds a script tag for ./CircleArea.js and sends a request for this file. The server responds with the content of Index.html because there is no routing in the server. Open the dev tools in your browser to see the problem. The server responds with the same data (the content of Index.html) for all requests. You have to implement routing.
let http = require('http');
let fs = require('fs');
let handleRequest = (request, response) => {
let file = 'Index.html';
if (request.url === '/CircleArea.js') {
file = 'CircleArea.js';
response.writeHead(200, {
'Content-Type': 'application/javascript',
});
} else {
response.writeHead(200, {
'Content-Type': 'text/html',
});
}
fs.readFile('./' + file, null, function (error, data) {
if (error) {
response.writeHead(404);
response.write('Whoops! File not found!');
} else {
response.write(data);
}
response.end();
});
};
http.createServer(handleRequest).listen(8000);
console.log('Server running at http://localhost:8000');
This is a very basic and simple solution. You can use it for a very simple routing. For a more complex routing I recommend a framework like Nest.js