react core boilerplate



描述

react core boilerplate是使用ASP.NET Core 3和服务器端渲染构建通用/同构React Web应用程序的起点。所有人都可以开箱即用。这对新手也有帮助。该项目包含一个假授权系统。因此，您可以将其更改为身份或其他身份。
可以使用Typescript和JavaScript版本。

视觉工作室市场

屏幕截图

更改

v。2.0.3（2020-07-03）

• 添加了Docker支持。 ?
• 多亏了Xuhaojun，XSS攻击预防。
• 更新的依赖项，删除了未使用的名称空间。

v。2.0.0（2020-05-08）

• 迁移到.NET Core 3.1 。 ?
• 使用React-Bootstrap迁移到Bootstrap 4 。
• 迁移到formik。
• Redux商店迁移到Redux工具包，以通过REDUX促进开发。减少代码。
• 日志和Serilog配置改进。
• 在server-side rendering中添加了HTTPS支持。
• 在SEO的路线中添加了可编辑状态代码。
• 更新了一些依赖项。
• 稳定性修复。
• 删除了不必要的NPM依赖性。

v。1.7.1（2019-06-02）

• 更新的React ， Redux ， React-Router和其他连接到它们的NPM软件包。
• 更新了关键的NPM依赖性。
• 删除了不必要的NPM依赖性。

v。1.7.0（2019-05-05）

• 存储库重组。
• 添加了react core boilerplate的JavaScript版本。 ?
• 稳定性修复。
• 更新的关键依赖性。

v。1.6.3（2019-03-19）

• 由于不稳定性，删除了image-webpack-loader 。

v。1.6.2（2019-03-15）

• 安装了稳定的Terser插件。
• 更新的React和其他软件包（包括类型）。
• 更新的WebPack 。
• 更新了开发模式的WebPack配置。

v。1.6.0（2019-03-13）

• 更新为v. 2.2 .NET Core依赖关系。
• 更新了关键的NPM软件包。
• 更新的WebPack依赖项。
• 改进的WebPack供应商和捆绑包配置。
• 改进了用于构建和发布方案的.csproj文件。
• 固定源图生成开发模式。
• 固定捆绑包汇编以生产模式。
• 其他稳定性修复。

v。1.5.4（2019-02-04）

• 添加了一些次要功能。
• 错误修复：Bootstrap导航栏， fixed controller and frontend\'s service in person update case collapsing of the Bootstrap navigation bar 。
• 更新的依赖项。

v。1.5.3（2018-12-04）

• 添加了用于支持IE9，IE11： @babel/polyfill ， custom-event-polyfill polyfills。
• 更新的依赖项。

v。1.5.2（2018-12-01）

• 添加了fullText实时搜索示例。
• 添加了Webpack插件： case-sensitive-paths-webpack-plugin ， react-dev-utils
• 添加了示例插件： awesome-debounce-promise以防止在实时搜索中进行频繁的查询， formik以在不泪水中创建反应形式。
• 修复了一些功能和文本错误。

v。1.5.0（1）（2018-11-07）

• 添加了包含托管设置的hosting.json ，将用于生产构建中。
• 添加了bind-decorator软件包和示例。
• 加速了Webpack捆绑式建筑物。
• 更新的域等软件包。此更新允许您防止两次（在服务器prerender及其之后 – 在客户端）呼叫同构fetch请求。
• 更新的redux-thunk软件包。
• 添加了新的React组件，以防止构建Web应用程序时头痛： ModalComponent ， Input ， MultiSelect ， Form 。这些组件用于示例中。

v。1.4.5（2018-11-02）

• 添加的新功能允许Web应用程序与NodeServices共享浏览器的cookie。现在，SSR为身份验证的用户生成HTML代码，并提出身份验证的同构请求。
• 将方法sendFormData添加到ServiceBase.ts ，该ts允许您将文件上传到服务器。

v。1.3.5（2018-10-26）

• 更新的NPM软件包： react ， redux ， react-router 。
• 由于新的连接react-router-redux了折旧connected-react-router 。
• 固定Loader组件在某些情况下遇到麻烦。

v。1.3.2（2018-10-25）

• 删除了未使用的NPM软件包。
• 添加了软件包 – 锁。
• 固定项目。

v。1.3.0（2018-10-22）

• 更新的React软件包。
• 添加了AppComponent组件，该组件使您可以执行“ catucked”组件的“强制更新”（对于LoginPage中的Loader组件）。
• 添加了serilog记录器，其中将登录到文件（ logs/目录）以及Azure Cloud Provider中。

v。1.2.1（2018-10-20）

• 在某些情况下，固定了与SSR不正确的Loader组件。

v。1.2.0（2018-10-18）

• 由于漏洞，更新了“ ASP.NET Core”软件包的依赖关系。
• 添加的功能使您可以将JSON对象传递到URL查询获取和删除方法。

v。1.1.0（2018-10-16）

• 固定AppRoute组件。通过将参数传递给React路由器的组件的问题解决了问题。如果您想手动修复它，请在此处查看提交。

用法

安装

1. 通过链接安装最新的.NET Core SDK和运行时。
2. 安装最新的稳定节点。
3. 在第一次运行中，如果项目在Visual Studio或其他IDE中运行，则必须关闭该项目。在控制台中打开Project的文件夹并运行命令npm install 。
4. 在您的项目目录中执行以下开发命令。它将编译主和供应商捆绑包。

npm run build:dev

5. 如果您使用的是Visual Studio 20XX，而不是IIS Express选择YourProjectName或ReactCoreBoilerplate ：单击IIS Express附近的向下箭头，然后选择Docker或其他选项。
6. 构建和运行项目。它将从Windows控制台开始。

修改WebPack供应商配置

如果修改WebPack供应商配置，则必须手动重新编译供应商捆绑包。在您的项目目录中执行以下命令以执行此操作：

npm run build:dev

与Docker一起运行

Visual Studio 20xx

只需在工具栏中选择Docker选项即可。

构建一个容器

在您的项目目录中执行以下命令：

docker build -t [my image name] . 

[my image name]是您的Docker图像名称。

使用HTTPS支持（用于测试）在Windows上运行生产容器

1. 信任Windows和MacOS上的ASP.NET Core HTTPS开发证书：

dotnet dev-certs https -ep %USERPROFILE% \\. aspnet \\h ttps \\a spnetapp.pfx -p [my password]

[my password]是您的密码。
2。执行：

dotnet dev-certs https --trust

3. 构建您的容器。
4. 执行：

docker run --rm -it -p 7000:7000 -p 7001:7001 -e ASPNETCORE_URLS= \" https://+;**http:/*/+ \" -e ASPNETCORE_Kestrel__Certificates__Default__Password= \" [my password] \" -e ASPNETCORE_Kestrel__Certificates__Default__Path=/https/aspnetapp.pfx -v %USERPROFILE% \\. aspnet \\h ttps:/https/ [my image name]

在哪里[my password] – 您的证书密码（从第一步）， [my image name] – 您的Docker映像名称。

元素

第三方图书馆：

• Typescript-基于打字稿的所有前端。
• fork-ts-checker-webpack-plugin- Webpack插件，该插件在单独的过程上运行打字稿类型Checker。
• REACT-主要库，可作为同构。
• React路由器 – 反应的路由器。
• React –bootstrap -Bootstrap 4用于React。
• 反应螺旋 – 同构SEO助手。
• redux-商店。
• REDUX工具包 – 用于使用Redux增强开发的库。
• formik-用于构建形式的库。
• 连接的反应路由器 – 反应路由器的REDUX结合。
• SASS -CSS预处理器。
• Webpack 4 -Bundler。
• Axios-同构提取util。
• ts-nameof-允许您使用表单中输入的类型安全名称。
• JSON-to-url-允许您将JSON对象传递到url查询获取和删除方法。
• Serilog-允许您登录文件（ logs/目录）以及Azure Cloud Provider。

自己的库 /固定叉：

• 域等 – 与异步/等待支持和新功能的域任务更换。
• NVAL-类似jQuery-validation的香草JS验证器。
• NVAL -TIPPY-带有很棒工具提示的香草JS验证。
• nserializejson-基于香草JS的JSON Serializer的灵活形式。

问题

已知问题

• ./clientapp/styles/loaders/xxx.scss（./node_modules/css-loader/dist/cjs.js！[…]）
  在您的项目目录中执行npm i和npm rebuild node-sass 。

• WebPack热模块替换[HMR]不适用于IIS
  将被固定。改用Kestrel进行开发。

• HTTP错误500
  您可能没有最新版本的node.js。

• HTTP错误502.5
  您必须使用此链接安装最新的“ ASP.NET Core SDK”和“ Runtime and Hosting Bundle”：https：//www.microsoft.com/net/down/download/dotnet-core/2.1

• HTTP错误500在Azure托管时
  在Azure中的“应用程序设置”中将“ weblity_node_default_version”设置为6.11.2。

• 发布后在开发模式下运行时出错
  执行npm run build:dev命令。

其他问题

• 如果您对项目启动有任何问题，则可以在日志中看到错误（“/logs”目录）。请在Github上打开问题之前执行此操作。不要忘记提及react core boilerplate的版本（ JavaScript或TypeScript ）

执照

麻省理工学院