How to run html file using node js

user_1800583 0
Viewed 180350

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?

angularjs node.js javascript
10 Answers

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"

user_54236770

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.

Docs: https://www.npmjs.com/package/http-server

user_23115570

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

http://127.0.0.1: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

user_11177900

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'));
});
user_161487960 
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);
user_186888720
Related