如何使用节点 js 运行 html 文件答案

【问题标题】：How to run html file using node js如何使用节点 js 运行 html 文件
【发布时间】：2016-06-29 22:45:00
【问题描述】：

我有一个带有 Angular js 的简单 html 页面，如下所示：

    //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 文件：

<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>

我是节点 js 的新手。我已经在我的系统中安装了 node js 服务器，但我不确定如何使用 node js 运行一个简单的 html 文件？

【问题讨论】：

“实际上，这甚至可以复制/粘贴到您桌面的某个位置。”
你不能用 node.js “运行 html 文件”。 Node.js 是用于开发服务器端 Web 应用程序的 JavaScript 环境。 Html 文件通常由网络浏览器运行。
Node.js 不会“运行” HTML 文件。您可能只需要一个提供静态文件的服务器。

标签： javascript angularjs node.js

【解决方案1】：

您可以使用内置的 nodejs 网络服务器。

例如添加文件server.js 并输入以下代码：

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);
});

在控制台使用命令node server.js 启动服务器后。您的 index.html 页面将在 URL http://localhost:8080 上可用

【讨论】：

我应该把它放在名为app.js的文件中？
我必须将它添加到html中的脚本标签吗？
@Satyadev 你如何称呼这个文件并不重要。该文件负责服务器端...
我收到这样的错误：2 'require' was used before it was defined. var http = require('http'); 5 Expected an identifier and instead saw 'const'. const PORT=8080; 5 Stopping. (26% scanned). const PORT=8080;
它只是打印It Works!! Path Hit: /index.htm

【解决方案2】：

只需全局安装 http-server

npm install -g http-server

在需要运行 html 文件的地方运行命令 http-server 例如：您的 html 文件位于 /home/project/index.html 你可以做/home/project/$ http-server

这将为您提供访问网页的链接： http-server Starting up http-server, serving ./ Available on: http://127.0.0.1:8080 http://192.168.0.106:8080

【讨论】：

这可能是最直接的吧？
我不认为这是一个很好的解决方案。如果可以避免，则不应全局安装 npm 包。整个 Node 基础设施已经明显不再使用 -g。
我尝试在没有-g 的情况下安装http-server，并且在尝试启动服务器时出现错误。安装此特定软件包时似乎仍需要-g。
全局安装需要 sudo，所以我在项目目录中安装时没有 -g。然后，我运行index.html，它在项目目录中，为node_modules/http-server/bin/http-server。
其实我遇到了一个问题——如何守护它？在上述方法中，它将在 shell 上运行。因此，除非我使用screen 之类的应用程序或能够让我的外壳永远打开，否则服务器会在某个时候被切断。

【解决方案3】：

我也遇到过这样的情况，我必须在 nodejs 中运行一个以 index.html 作为入口点的 Web 应用程序。这是我所做的：

在应用的根目录中运行node init（这将创建一个 package.json 文件）
在应用根目录中安装 express：npm install --save express（保存将使用 express 依赖更新 package.json）
在应用程序的根目录中创建一个公用文件夹，并放置入口点文件 (index.html) 及其所有相关文件（这只是为了简化，在大型应用程序中这可能不是一个好方法）。
在应用程序的根目录中创建一个 server.js 文件，我们将在其中使用 node 的 express 模块，该模块将从其当前目录为公共文件夹提供服务。

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 : 它应该输出“server on 8000”
start http://localhost:8000/ ：您的 index.html 将被调用

File Structure would be something similar

【讨论】：

我找到了比我更好的解决方案：stackoverflow.com/questions/6084360/… 查看 Tony 的答案并在那里投票。
其实我更喜欢你的回答。它快速简单，使用原生 Node 功能，无需安装过多的包。

【解决方案4】：

将您的 HTML 文件移动到“www”文件夹中。使用代码创建文件“server.js”：

var express = require('express');
var app = express();

app.use(express.static(__dirname + '/www'));

app.listen('3000');
console.log('working on 3000');

创建文件后，运行命令“node server.js”

【讨论】：

这是我看到的最简单的配置，并且工作起来很迷人 :)
找不到模块'express'

【解决方案5】：

迄今为止最简单的命令：

npx http-server

这需要在执行此命令的目录中有一个现有的 index.html。

Vijaya Simha 已经提到了这一点，但我认为使用 npx 更简洁更短。几个月以来，我一直在使用这种方法运行网络服务器。

文档：https://www.npmjs.com/package/http-server

【讨论】：

它运行但不在我想要的端口上，请问如何在自定义端口上分配？谢谢
@AljohnYamaro npx http-server -p 8080

【解决方案6】：

http 访问并获取 8080 上提供的 html 文件：

>npm install -g http-server

>http-server

如果您有公共 (./public/index.html) 文件夹，它将是您服务器的根目录，如果没有，它将是您运行服务器的根目录。您可以将文件夹作为参数发送：

http-server [path] [options]

预期结果：

*> 启动 http-server，服务 ./public 可用于：

http://LOCALIP:8080

http://127.0.0.1:8080

按 CTRL-C 停止服务器

http-server 已停止。*

现在，您可以运行： http://localhost:8080

将打开 ./public 文件夹中的 index.html

参考：https://www.npmjs.com/package/http-server

【讨论】：

【解决方案7】：

这是一个简单的 html 文件“demo.htm”，存储在与 node.js 文件相同的文件夹中。

<!DOCTYPE html>
<html>
  <body>
    <h1>Heading</h1>
    <p>Paragraph.</p>
  </body>
</html>

下面是调用这个html文件的node.js文件。

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/');

在命令提示符和消息中启动上述 nodejs 文件显示“运行在http://127.0.0.1:8081/ 的服务器”。现在在您的浏览器中输入“http://127.0.0.1:8081/demo.html”。

【讨论】：

您的代码在这种间距和缩进下非常难以阅读。请更正这些，以便将来的读者更容易阅读。

【解决方案8】：

要么使用框架，要么使用 nodejs 编写自己的服务器。

一个简单的文件服务器可能如下所示：

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);

【讨论】：

@SLaks 不错，我不知道这个包。 PS。发布的代码只是我的调试版本。发布版本仅包含一个server.js 文件。
@Matthias 我遵循了@JILeXanDR 发布的另一个答案，但它在运行后仅打印It Works!! Path Hit: /index.htm。你能告诉我我做错了什么吗？
@Satyadev 是的，这是因为response.end('It Works!! Path Hit: ' + request.url); 这行可能你应该阅读关于nodejs 的简短教程
您可以将import 语句替换为require 语句。 Ans保存此代码。在server.js 文件中。

【解决方案9】：

为了通过 Node JS 项目部署 html 页面，例如部署一个 Angular 构建文件，其中所有请求都需要重定向到 index.html 在这种情况下，我们可以使用 node js 的通配符路由来服务于 Angular 项目，但我们需要确保 Angular 路由和 Node js API 路由没有命名冲突。

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

【讨论】：