Rendering html on npm start - node.js

Question

I have created one project which has index.html and script.js file. So i have done npm init -y to get package.json. If i explicitly double click the index.html file it is opening it normally and functions as i want but if i do with express as res.sendFile(path.join(__dirname, './index.html')); it is not functioning properly. So i want to write an start script in a such way that it should directly run index.html
i have tried this
router.get('/',function(req,res){
res.sendFile(path.join(__dirname+'/index.html'));
})
But is is not functioning well. It is just rendering raw html in normal function it is asking me for permission to access camera and microphone. But here it asking nothing.
{
"name": "demo",
"version": "1.0.0",
"description": "VideoCall App",
"main": "index.html",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "AkshayK",
"license": "MIT"
}
I want to render index.html when i do npm start.

Answer 1

I have made one application with this same functionality for you. You
can check it here. https://github.com/RajatKaushik/Camera-App
Express is Middleware for handling http requests, you will have to make a GET request from the browser. Once you make the request your express app will match the path and will respond back with the file(index.html) in your case.
So, If you want to deliver the index.html file on the browser, do the following steps:-
Run your node application using node [YOUR_FILE_NAME.js] (node script.js).
If your express server is running on port 4200, then make the request to
localhost:4200/
As that's the path that you have for responding back with the index.html file.
I think the reason why your Camera and Microphone is not working is because the code that initiate that is in some script file that you have include in your HTML file as <script src="index.js"> but you are not delivering that file using express.
You can use the following code snippet to deliver that static files needed.
app.use(express.static('__dirname' + '/public'), () => {
console.log('Request Recived');
});
where the public is the folder in which your index.js file is present.
I have made one application with this same functionality for you. You
can check it here. https://github.com/RajatKaushik/Camera-App