当我转到 localhost 时，React *create app* 不会呈现

Question

我已经使用 create-react-app 启动了一个 React 应用程序，并且我的 index.js 文件如下所示。

import React{ReactDOM} from "react";
import App from "/componects/App.js";

ReactDOM.render(
  <App/>,
  document.getElementById('root')
);

我的 server.js 文件为

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


app.get("/", function(req,res){
  res.sendFile("fullpath/index.js")
});

app.listen(3000, function(){
  console.log("app listening on port 3000");
})

我检查了我的根路由，当我不发送完整路径时它可以工作。我确实在代码中指定了完整路径，但我想为这篇文章保密。

我确实有一个jsconfig 文件。当我去本地主机时，我收到所有文件的纯文本。我只得到代码本身。我该如何解决这个问题？

Answer 1

快速回答

你完全错了，你在混淆技术：Node.js 和 React。

通常你不能混合使用这些技术。

总而言之，Node.js 不理解 React 代码，这就是为什么您的代码中的以下行是意外的、疯狂的并且会失败：

res.sendFile("fullpath/index.js")

• res.sendFile 用于 Node.js server-side rendering (SSR)
• index.js 是 React 代码

如果您的 create-react-app 工作区正确且标准，请执行此行以在开发人员模式下启动您的 react 代码：

npm run start

如果您的反应代码正常，经典的http://localhost:3000 将在您的本地浏览器上打开。

长答案

概念

Server-side rendering (SSR) — 传统的渲染方式，基本上你页面的所有资源都存放在服务器上。然后，当页面被请求（通常来自网络浏览器）时，会下载 HTML、JavaScript 和 CSS。框架也可以动态地创建基于back end逻辑的HTML并最终下载它。在这一点上，许多框架为立即创建具有“惊人”功能的应用程序提供了奇迹。

技术：Java、C#、Python、Node.js 等

客户端渲染 (CSR) — 有时称为“前端渲染”是一种较新的渲染方法，它依赖于通过客户端（浏览器）执行的 JavaScript 代码JavaScript 框架。因此，当请求页面时，会下载最小的、很少的或空的 index.html、CSS 和 JavaScript 内容。这里 JavaScript 负责发送或接收数据并更新页面的最小部分无需刷新整个页面。。最后，当用户点击或触发某个事件时，JavaScript 代码将使用异步调用 (Ajax) 通常将 数据 发送或接收到 API REST (JSON)。

技术：React、Angular、Vue.js、Aurelia、jQuery、纯 JavaScript 等

Node.js

用于 SSR 框架

React.js

• 是一个 CSR 框架
• 使用 React 开发的 Web 称为 SPAs（单页应用程序）

如何为 CSR 网站提供服务？

在开发阶段（笔记本电脑/PC）你只需要使用某种热重载服务器（通常是 Node.js），它将 React 转换为纯 JavaScript 代码并将其链接到你的浏览器。

这类服务器由框架创建者（Angular、Vue.js、React 等）提供或开发。通常，它们在您的 package.json 中预先配置为：npm run dev 或 npm run start

在测试/生产阶段，你不应该使用热重载服务器。您应该执行将 react 转换为纯 JavaScript 代码的构建。通常是命令 npm run build，结果是工作区中某个文件夹上的新文件：index.html、bundle.js、main.css等

这些文件可以发布在任何 HTTP 服务器上，从最小到复杂的服务器：

• Apache
• nginx
• haproxy
• Tomcat
• WildFly
• IIS
• 免费/付费网络 FTP 服务
• 任何能够提供 HTML 内容的技术上的任何体面的服务器。

在开发者阶段做出反应

如果您以正确和标准的方式使用 create-react-app，则 package.json 中有一个 start 脚本准备使用的文件：

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
}

我建议您将其从 start 更改为 dev 以使其更直观。让我们清空启动脚本，以便为下一阶段正确配置。

在测试/生产阶段做出反应：基本

如果您的 React 代码已准备好在现实世界中被真实用户测试或使用，并且您的 create-react-app 工作区是正确且标准的，那么这些是必需且最少的步骤：

• 安装一个最小的 Node.js HTTP 服务器
  • npm install http-server --save
• 在你的脚本ma​​in中添加这个：
  • "start": "http-server ./build"
• 执行npm run build
• 如果没有错误并且您的静态文件已创建（index.html、CSS、JavaScript 等），请执行：
  • npm run start

有关更多信息（自定义端口等），请查看这个最小的 Node.js HTTP 服务器实现：

• http-server: a simple static HTTP server

在测试/生产阶段反应：Docker

如果您的 package.json 已正确配置标准脚本：

• npm 运行构建
• npm run start（使用 http-server 或其他）

您可以使用 Docker 将其部署在这个宇宙中的任何 Linux 服务器上：

FROM node:10
COPY . /opt/
WORKDIR /opt/
RUN npm install
RUN npm run build
ENV PORT 8080
EXPOSE 8080
ENTRYPOINT ["npm","run","start"]

Linux 是真实环境的唯一选择。 Windows 和 Mac 仅适用于开发者阶段

在测试/生产阶段做出反应：高级服务器

如果您的需求需要怎么办：

• 用户会话
• 登录/注销功能
• 用户不活动到期
• JWTOAuth 2令牌刷新
• React 或任何 CSR/SPA 并非设计用于的任何其他功能

在这种情况下，您需要使用某种技术实现的高级服务器，例如：Node.js、Java、Python、PHP 等。

这些实现：

• 应该公开您的端点，例如：/login, /logout 准备好从您的 React、Angular 或 Vue.js 调用
• 应使用任何常用方式处理用户会话：内存、Redis、MongoDB 等。
• 提供登录：基本身份验证、Google、Microsoft 等。

我的第一次尝试是：

https://github.com/jrichardsz-software-architect-tools/geofrontend-server

我正计划用更多功能和单元测试进行改造。

在测试/生产阶段反应：高级API/microservices

上一段中解释的所有功能都可以在任何后端 REST API 或微服务上实现。

这样，您的 CSR/SPA 构建仍将是静态并且不需要任何疯狂HTTP 服务器。只是本答案开头所解释的基础知识。

Answer 2

Express / Node.js 区分大小写。您需要提供文件的绝对路径：

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

app.get("/", function(req,res) {
  // Absolute path
  res.sendFile("C:/Users/%username%/fullpath/index.js")
});

app.listen(3000, function() {
  console.log("App listerning on port 3000");
});

相对路径是当你在一个目录中，并指定一个没有特定位置的文件：

# Absolute path
C:/Users/John/path/to/file.txt

# Relative path
path/to/file.txt