在没有WebPack的情况下使用Deno和React构建同构应用程序

最新推荐文章于 2024-05-21 09:51:10 发布

weixin_26750481

最新推荐文章于 2024-05-21 09:51:10 发布

阅读量1.1k

点赞数

文章标签： python react vue java ViewUI

原文链接：https://medium.com/swlh/build-an-isomorphic-application-using-deno-and-react-without-webpack-deno-by-example-6c748abb3243

版权

Currently setting up a Server Side Render (SSR) application is a pain in nodejs. There are many scaffolds available for nodejs. But it comes with its own tech-depth and learning curves. This also includes hidden configurations of Webpack.

当前，在Nodejs中设置服务器端渲染(SSR)应用程序很麻烦。有许多可用于nodejs的支架。但是它具有自己的技术深度和学习曲线 。这还包括Webpack的隐藏配置。

All in all, when you give Webpack a chance, your encounter will rarely be a pleasant one.

总而言之，当您给Webpack一个机会时，遇到的机会很少会是一件愉快的事。

1.概述 (1. Overview)

According to the wiki, An isomorphic JavaScript(also known as Universal JavaScript) is described as JavaScript applications that run both on the client and the server.

根据 Wiki的描述 ，同构JavaScript(也称为 Universal JavaScript )被描述为可在客户端和服务器上运行JavaScript应用程序。

If I say, you can build an entire SSR without setting up installing any external nodejs dependency. Would you believe it? I guess NO.

如果我说的话，您可以构建整个SSR，而无需设置安装任何外部nodejs依赖项。 你会相信吗？ 我猜NO 。

However, In this tutorial, I will explain how to set up a simple SSR app without installing a single nodejs library or bundler. That also including a hydrate react app(isomorphic app).

但是，在本教程中，我将解释如何在不安装单个nodejs库或bundler的情况下设置简单的SSR应用程序。这还包括水合物React应用程序( 同构应用程序 )。

2.设置 (2. Set-up)

a. Start an app with npm inits: Don’t be afraid, To do things differently, we will not install any nodejs libraries. However, I still like npm as a task runner. So let’s use it. Create a folder SSR and init npm package.json

一个。 使用npm inits启动应用程序：不要害怕，要做不同的事情，我们不会安装任何nodejs库。但是，我仍然喜欢npm作为任务运行程序 。因此，让我们使用它。创建一个文件夹SSR并初始化npm package.json

$ md -p examples/ssr$ cd examples/ssr## init npm package
$ npm init --y

3.后端 (3. Backend)

a. Add Basic Deno server: Create server.tsx a file and add below code

一个。 添加基本Deno服务器：创建server.tsx文件并添加以下代码

import { Application, Router } from "https://deno.land/x/oak@v6.0.1/mod.ts";const app = new Application();const router = new Router();
router.get("/", handlePage);app.use(router.routes());
app.use(router.allowedMethods());console.log("server is running on http://localhost:8000/");
await app.listen({ port: 8000 });function handlePage(ctx: any) {
       
  try {
       
    ctx.response.body = `<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body >
    <div id="root"><h1>Hello SSR</h1></div>
  </body>
  </html>`;
  } catch (error) {
       
    console.error(error);
  }
}

note: We will use oak module here to create Deno server. You can create your own server. For that read my article Creating Routing/Controller in Deno Server(From Scratch)

注意：我们将在此处使用Oak模块创建Deno服务器。您可以创建自己的服务器。为此，请阅读我在Deno Server中创建路由/控制器的文章(从头开始)

Add below command in package.json.

在package.json添加以下命令。

"scripts": {
       
    "start": "deno run --allow-net server.ts",
    "test": "echo \"Error: no test specified\" && exit 1"
 },

Run: Now we can run the application and verify on http://localhost:8000/.

运行：现在我们可以运行应用程序并在http://localhost:8000/上进行验证。

npm run start

b. Add React Server Render: Now we can run the application. Let us add our first rendering code. For that, we need to ReactJS. Since Deno uses

最低0.47元/天解锁文章

weixin_26750481

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在没有WebPack的情况下使用Deno和React构建同构应用程序

Currently setting up a Server Side Render (SSR) application is a pain in nodejs. There are many scaffolds available for nodejs. But it comes with its own tech-depth and learning curves. This also incl...
复制链接

扫一扫