How to run html file using node js
Question
I have a simple html page with angular js as follows:
//Application name
var app = angular.module("myTmoApppdl", []);
app.controller("myCtrl", function ($scope) {
//Sample login function
$scope.signin = function () {
var formData =
{
email: $scope.email,
password: $scope.password
};
console.log("Form data is:" + JSON.stringify(formData));
};
});
HTML file:
<html>
<head>
<link href="bootstrap.min.css" rel="stylesheet" type="text/css"/>
</head>
<body ng-app="myTmoApppdl" ng-controller="myCtrl">
<div class="container">
<div class="form-group">
<form class="form" role="form" method="post" ng-submit="signin()">
<div class="form-group col-md-6">
<label class="">Email address</label>
<input type="email" class="form-control" ng-model="email" id="exampleInputEmail2" placeholder="Email address" required>
</div>
<div class="form-group col-md-6">
<label class="">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" ng-model="password" placeholder="Password" required>
</div>
</form>
<button type="submit" class="btn btn-primary btn-block">Sign in</button>
</div>
</div>
</body>
<script src="angular.min.js" type="text/javascript"></script>
<!--User defined JS files-->
<script src="app.js" type="text/javascript"></script>
<script src="jsonParsingService.js" type="text/javascript"></script>
</html>
I am new to node.js. I have installed node.js server in my system but I am not sure how to run a simple html file using node.js?
10 answers
solution1
38 2016-03-14 18:38:14
You can use built-in nodejs web server.
Add file server.js for example and put following code:
var http = require('http');
var fs = require('fs');
const PORT=8080;
fs.readFile('./index.html', function (err, html) {
if (err) throw err;
http.createServer(function(request, response) {
response.writeHeader(200, {"Content-Type": "text/html"});
response.write(html);
response.end();
}).listen(PORT);
});
And after start server from console with command node server.js . Your index.html page will be available on URL http://localhost:8080
solution2
25 2018-03-15 16:34:36
Just install http-server globally
npm install -g http-server
where ever you need to run a html file run the command http-server For ex: your html file is in /home/project/index.html you can do /home/project/$ http-server
That will give you a link to accessyour webpages: http-server Starting up http-server, serving ./ Available on: http://127.0.0.1:8080 http://192.168.0.106:8080
solution3
13 2017-01-09 14:53:36
I too faced such scenario where I had to run a web app in nodejs with index.html being the entry point. Here is what I did:
- run
node initin root of app (this will create a package.json file) - install express in root of app :
npm install --save express(save will update package.json with express dependency) - create a public folder in root of your app and put your entry point file (index.html) and all its dependent files (this is just for simplification, in large application this might not be a good approach).
- Create a server.js file in root of app where in we will use express module of node which will serve the public folder from its current directory.
server.js
var express = require('express'); var app = express(); app.use(express.static(__dirname + '/public')); //__dir and not _dir var port = 8000; // you can use any port app.listen(port); console.log('server on' + port);do
node server: it should output "server on 8000"start http://localhost:8000/ : your index.html will be called
solution4
8 2019-01-24 12:46:38
Move your HTML file in a folder "www". Create a file "server.js" with code :
var express = require('express');
var app = express();
app.use(express.static(__dirname + '/www'));
app.listen('3000');
console.log('working on 3000');
After creation of file, run the command "node server.js"
solution5
5 2019-09-21 17:58:17
The simplest command by far:
npx http-server
This requires an existing index.html at the dir at where this command is being executed.
This was already mentioned by Vijaya Simha, but I thought using npx is way cleaner and shorter. I am running a webserver with this approach since months.
solution6
3 2020-08-30 15:28:18
http access and get the html files served on 8080:
>npm install -g http-server
>http-server
if you have public (./public/index.html) folder it will be the root of your server if not will be the one that you run the server. you could send the folder as paramenter ex:
http-server [path] [options]
expected Result:
*> Starting up http-server, serving ./public Available on:
http://LOCALIP:8080
Hit CTRL-C to stop the server
http-server stopped.*
Now, you can run: http://localhost:8080
will open the index.html on the ./public folder
references: https://www.npmjs.com/package/http-server
solution7
1 2016-03-14 18:35:16
Either you use a framework or you write your own server with nodejs.
A simple fileserver may look like this:
import * as http from 'http';
import * as url from 'url';
import * as fs from 'fs';
import * as path from 'path';
var mimeTypes = {
"html": "text/html",
"jpeg": "image/jpeg",
"jpg": "image/jpeg",
"png": "image/png",
"js": "text/javascript",
"css": "text/css"};
http.createServer((request, response)=>{
var pathname = url.parse(request.url).pathname;
var filename : string;
if(pathname === "/"){
filename = "index.html";
}
else
filename = path.join(process.cwd(), pathname);
try{
fs.accessSync(filename, fs.F_OK);
var fileStream = fs.createReadStream(filename);
var mimeType = mimeTypes[path.extname(filename).split(".")[1]];
response.writeHead(200, {'Content-Type':mimeType});
fileStream.pipe(response);
}
catch(e) {
console.log('File not exists: ' + filename);
response.writeHead(404, {'Content-Type': 'text/plain'});
response.write('404 Not Found\n');
response.end();
return;
}
return;
}
}).listen(5000);
solution8
1 2018-02-27 17:09:56
This is a simple html file "demo.htm" stored in the same folder as the node.js file.
<!DOCTYPE html>
<html>
<body>
<h1>Heading</h1>
<p>Paragraph.</p>
</body>
</html>
Below is the node.js file to call this html file.
var http = require('http');
var fs = require('fs');
var server = http.createServer(function(req, resp){
// Print the name of the file for which request is made.
console.log("Request for demo file received.");
fs.readFile("Documents/nodejs/demo.html",function(error, data){
if (error) {
resp.writeHead(404);
resp.write('Contents you are looking for-not found');
resp.end();
} else {
resp.writeHead(200, {
'Content-Type': 'text/html'
});
resp.write(data.toString());
resp.end();
}
});
});
server.listen(8081, '127.0.0.1');
console.log('Server running at http://127.0.0.1:8081/');
Intiate the above nodejs file in command prompt and the message "Server running at http://127.0.0.1:8081/ " is displayed.Now in your browser type " http://127.0.0.1:8081/demo.html ".
solution9
1 2021-06-14 10:37:15
In order to deploy a html pages via Node JS project, For example to deploy an Angular build file where the all the requests needed to be redirected to index.html in that case we can use the wild card route of node js to serve the Angular project but we need to make sure that there are no naming conflicts of Angular route and Node js API route.
app.js
//Angular App Hosting Production Build
app.use(express.static(__dirname + '/dist/ShoppingCart'));
// For all GET requests, send back index.html (PathLocationStrategy) (Refresh Error)
app.get('*', (req,res) => {
res.sendFile(path.join(__dirname, '/dist/ShoppingCart/index.html'));
});
solution10
0 2022-04-03 06:05:18
const http = require('http');
const fs = require('fs');
var mimeTypes = {
"html": "text/html",
"jpeg": "image/jpeg",
"jpg": "image/jpeg",
"png": "image/png",
"js": "text/javascript",
"css": "text/css"
};
var server = http.createServer((req, res) => {
if (req.url === '/') {
res.writeHeader(200, { "Content-Type": "text/html" });
fs.createReadStream('./public/index.html').pipe(res)
}
var filesDepences = req.url.match(/\.js|.css/);
if (filesDepences) {
var extetion = mimeTypes[filesDepences[0].toString().split('.')[1]];
res.writeHead(200, { 'Content-Type': extetion });
fs.createReadStream(__dirname + "/public" + req.url).pipe(res)
}
})
server.listen(8080);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.