【问题标题】:Setup a single project for Node/Express/Typescript and Angular为 Node/Express/Typescript 和 Angular 设置一个项目
【发布时间】:2019-05-05 22:03:08
【问题描述】:

我是 .NET 开发人员(ASP.NET Core 等),所以我习惯于使用服务器和客户端代码处理单个项目。我想对 Node/Express(使用 Typscript)和 Angular 做同样的事情。

我已经使用它的 CLI 浏览了 Angular 的教程,以及使用它的生成器使用 Node/Express 的教程。所以我知道如何让他们独立工作,但我不确定如何用两者来构建一个项目。

根据经验,我希望是这样的:

  • .git
  • node_modules
  • client
    • src
    • Angular 相关配置
  • server
    • src
    • Node/Express/Typescript 相关配置
  • package.json
  • 与整个项目相关的配置

但是 MEAN 堆栈中有很多活动部分,这令人困惑。我不确定将各种打字稿文件、配置文件等放在哪里。鉴于node_modules 是上一级的,如何为每个文件运行开发服务器。

关于这个的现有问题是固执己见的,或者是对此的批评,或者是过时的(Node 世界变化如此之快!)。但是,我想知道的是不同的:

如何在同一个项目中设置 Node/Express(使用 Typescript)和 Angular:

  • 这样它们就可以提交到同一个 git 存储库
  • 这样我就可以使用同一个 IDE 实例来处理它们
  • 所以我仍然可以使用 express 和 angular 脚手架工具(CLI/生成器/等)
  • 所以在开发时 ng servenode app 服务器仍然可以工作
  • (任何示例代码或存储库也值得赞赏)

【问题讨论】:

    标签: node.js angular typescript express asp.net-core


    【解决方案1】:

    您可以使用这样的设置:

    -client/         // for your angular application (frontend)
    -node_modules/   // node modules
    -routes/         // route files for your express
    -app.js          // your main app
    -package.json    // your package.json with all the dependencies and so on
    

    创建一个项目文件夹并运行npm init,它会自动为您创建一个package.json。然后您可以通过ng new client 创建客户端应用程序。

    然后您只需在项目的根文件夹中运行git init。 如果您不想提交项目的某些部分,请使用.gitignore 文件。

    在您的 node 后端的 app.js 中只需要 express 和其他相关包,例如:

    var express = require('express');
    var path = require( "path" );
    var bodyParser = require('body-parser');
    var expressValidator = require('express-validator');
    var cors = require('cors');
    var app = express();
    var port = 65500;
    var router = express.Router();
    ....
    ..
    

    并定义你的express-routes

    var authRouter = require('./routes/auth')(router);
    var servicesRouter = require('./routes/services')(router);
    ....
    ..
    
    app.use('/auth', authRouter); // Route to authenticate login attempt 
    app.use('/services', servicesRouter); // Route to perform other services
    ....
    ..
    // wildcard:
    app.get('*', (req, res) => {
      res.sendFile(path.join(__dirname + '/public/index.html'));
    });
    
    // INFO: Start the node server */
    app.listen(port, () => console.log(`Node's Express ice-dashboard-new is listening on 
    Port ${port}..`));
    

    例如,在 /client/src/app/components 中,您可以使用 CLI 通过 ng generate component someComponentName 生成任何组件,Angular CLI 将为您完成所有魔法。 (生成 .html .css/.scss、.ts 和 .spec.ts 并将其添加到 app.modules.ts)。

    services 将字体连接到后端也是如此。只需使用像 ng generate service someServiceName 这样的 CLI - 但请记住,您必须将它们添加到 app.module.ts 中 @NgModule-declaration 的“提供者”中。

    如果您有额外的后端资产,只需在应用程序的根文件夹中创建一个文件夹,并在您的 app.js 中额外要求它们以使用它们(如 /config 或 /helperz 等)

    对于前端资产(如图像、i18n 翻译文件或其他),请使用 /client/src/assets 文件夹。

    基本上,您的应用由两部分组成 - 为应用提供服务并为后端操作提供路由的节点后端和 Angular 前端应用(html、css/scss 和 js),这里有一个小图来说明该设置以便更好地理解.

    Nodemon 是一个非常方便的工具,该实用程序将监视源代码中的任何更改并自动重新启动服务器。非常适合开发。

    只需使用 nodemon 而不是 node 来运行您的代码,现在您的进程将在您的代码更改时自动重新启动。要安装,请获取 node.js,然后从您的终端使用 -g 选项通过以下方式全局安装它:

     npm install -g nodemon
    

    为了更好地理解,请查看以下示例,了解其他人如何设置他们的项目:

    【讨论】:

    • client 保留在server 之内有什么原因吗?而不是将它们分开看起来更易于维护?
    • 它们是分开的,客户端仍然是我完整应用程序的一部分;)考虑构建、打包和部署 - 客户端仍然是完整应用程序的一部分(带有 express 和 ng 的节点后端-前端)
    • 如果您有任何其他问题或不清楚的地方,请告诉我 ;)
    • 感谢详细解答,that repo 很有用,我想正是我要找的!
    • 很高兴 - 你会发现有一个陡峭而快速的学习曲线 - 你只需要深入了解它并练习一点来熟悉 node & co ;)
    【解决方案2】:

    你的提议完全没问题。

    典型的做法是将所有服务器文件夹(src/lib/ 等)与包含整个客户端项目的 client/ 文件夹或专用 server/ 文件夹一起放在根级别和专用的client/ 文件夹,顶部/根级别很少。

    这是 Stephen Grider 的全栈 Node/React 代码库示例(同样的原则适用于 Node/Angular)-https://github.com/StephenGrider/FullstackReactCode。他采用了前者的方法,将服务器的根项目级别保留为单独的client/ 文件夹。

    【讨论】:

      猜你喜欢
      • 2017-10-29
      • 2017-11-24
      • 2017-10-23
      • 2017-07-10
      • 1970-01-01
      • 2018-06-10
      • 2012-06-29
      • 1970-01-01
      • 2020-08-29
      相关资源
      最近更新 更多