[英]Setup a single project for Node/Express/Typescript and Angular
I'm a .NET dev (ASP.NET Core etc.) So I'm used to working on a single project with both server and client code. 我是.NET开发人员(ASP.NET Core等),所以我习惯于使用服务器和客户端代码来处理单个项目。 I want to do the same with Node/Express (using Typscript) and Angular.
我想对Node / Express(使用Typscript)和Angular做同样的事情。
I've gone through the tutorials for Angular using its CLI, and with Node/Express using its generator. 我已经使用Angular的CLI查看了Angular的教程,并使用了它的生成器查看了Node / Express的教程。 So I understand how to get them to work independently, but I'm not sure how to structure a single project with both.
因此,我了解如何使它们独立工作,但我不确定如何同时使用它们来构建单个项目。
From experience I expect something like this: 根据经验,我期望这样的事情:
.git
node_modules
client
src
server
src
package.json
But there are so many moving parts in a MEAN stack, it's confusing. 但是,在MEAN堆栈中有许多活动部件,这令人困惑。 I'm not sure where to put the various typescript files, config files, etc. And how to run the dev servers for each given that
node_modules
is one level up. 我不确定将各种打字稿文件,配置文件等放在哪里。对于给定的
node_modules
,如何为每个服务器运行开发服务器是一个更高的层次。
There are existing questions about this which are opinionated, or are criticisms against this, or are obsolete (the Node world changes so quickly!). 有一些对此存在疑问的问题,或者对此有批评,或者已经过时了(Node世界变化如此之快!)。 However, what I want to know is different:
但是,我想知道的是不同的:
How do I setup Node/Express (using Typescript) and Angular from the same project: 如何在同一项目中设置Node / Express(使用Typescript)和Angular:
ng serve
and node app
servers still work ng serve
和node app
服务器仍然可以工作 You could use a setup like this: 您可以使用如下设置:
-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
Create a project-folder and run npm init which automatically creates a package.json for you. 创建一个项目文件夹并运行npm init ,它会自动为您创建package.json 。 Then you could create the client app via
ng new client
. 然后,您可以通过
ng new client
创建客户端应用程序。
Then you just run git init
in the rootfolder of your project. 然后,您只需在项目的根文件夹中运行
git init
。 In case you don't want to have the certain parts of the project committed make use of the .gitignore file. 如果您不想提交项目的某些部分,请使用.gitignore文件。
In your app.js of your node backend simply require express and other relevant packages like: 在节点后端的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();
....
..
and define your 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}..`));
In /client/src/app/components for example you can generate any component with CLI via ng generate component someComponentName
and the Angular CLI will do all the magic for you. 例如,在/ client / src / app / components中,您可以通过
ng generate component someComponentName
使用CLI生成任何组件,而Angular CLI会为您做所有的事情。 (generating .html .css/.scss, .ts & .spec.ts and adding it to app.modules.ts). (生成.html .css / .scss,.ts和.spec.ts并将其添加到app.modules.ts中)。
Same works for services connecting the font to backend. 同一作品的服务连接的字体后端。 Just use the CLI like
ng generate service someServiceName
- but keep in mind that you have to add those to the 'providers' of the @NgModule-declaration in the app.module.ts. 只需使用
ng generate service someServiceName
类的CLI,但请记住,您必须将它们添加到app.module.ts中@ NgModule-declaration的“提供者”中。
If you have additional backend-assets just create a folder in the root folder of your app and require them additionally in your app.js to make of use them (like /config or /helperz etc..) 如果您还有其他后端资产,只需在应用程序的根文件夹中创建一个文件夹,并在app.js中另外要求它们以使用它们(例如/ config或/ helperz等。)
For front-end assets (like images, i18n translation files or whatever) use the /client/src/assets folder. 对于前端资产(例如图像,i18n转换文件等),请使用/ client / src / assets文件夹。
Basically your app consists of two parts - the node backend serving the app and providing the routes for backend ops and the angular frontend application (html,css/scss & js), here's a little graphic to illustrate that setup for better understanding. 基本上,您的应用程序由两部分组成-节点后端为应用程序提供服务,并为后端操作提供路由,以及角度前端应用程序(html,css / scss和js),下面是一个小图形来说明该设置,以便于更好地理解。
A quite handy tool is Nodemon , a utility that will monitor for any changes in your source and automatically restart your server. Nodemon是一个非常方便的工具,该实用程序将监视源中的任何更改并自动重新启动服务器。 Perfect for development.
适合发展。
Just use nodemon instead of node to run your code, and now your process will automatically restart when your code changes. 只需使用nodemon而不是node来运行代码,现在,当代码更改时,您的进程将自动重新启动。 To install, get node.js, then from your terminal install it globally with the
-g
option via: 要安装,请获取node.js,然后从终端通过
-g
选项在全球范围内进行安装:
npm install -g nodemon
To get a better understanding, have a look at these examples on how others have set up their project: 为了更好地理解,请看以下有关其他人如何设置项目的示例:
What you have proposed is perfectly fine. 您提出的建议非常好。
It is typical to either have all of the server folders on the root level ( src/
, lib/
, etc.) with a client/
folder that contains the entire client project, or a dedicated server/
folder and dedicated client/
folder with very little on the top/root level. 通常,将所有服务器文件夹都放在根级别(
src/
, lib/
等)中,并在其中包含包含整个客户端项目的client/
文件夹,或者在专用server/
文件夹和专用client/
文件夹中包含非常完整的客户端项目。在顶层/根目录上几乎没有。
Here is an example of Stephen Grider's fullstack Node/React codebase (same principal would apply for Node/Angular) - https://github.com/StephenGrider/FullstackReactCode . 这是Stephen Grider的全栈Node / React代码库的示例(相同的主体将应用于Node / Angular)-https: //github.com/StephenGrider/FullstackReactCode 。 He takes the approach of the former, keeping the root project level for the server with a separate
client/
folder. 他采用前者的方法,通过单独的
client/
文件夹保持服务器的根项目级别。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.