studiolabs / umi-server

A runtime render tool for Umijs Server-Side Rendering.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

umi-server

codecov NPM version NPM downloads CircleCI GitHub Actions status

πŸš€ A runtime render tool for Umijs Server-Side Rendering.

πŸ’Ώ Examples

πŸ“¦ Packages

πŸ“– Quick Start

(config + ctx) => htmlString

npm install umi-server -S
// if using ES6 / TypeScript
// import server from 'umi-server';
const server = require('umi-server');
const http = require('http');
const { readFileSync } = require('fs');
const { join, extname } = require('path');

const render = server({
  filename: join(__dirname, 'dist', 'umi.server.js'),
  manifest: join(__dirname, 'dist', 'ssr-client-mainifest.json'),
  // you can use root rather than filename and manifest
  // if both in the same directory
  // root: join(__dirname, 'dist');
})
const headerMap = {
  '.js': 'text/javascript',
  '.css': 'text/css',
}

// your server
http.createServer(async (req, res) => {
  const ext = extname(req.url);
  const header = {
    'Content-Type': headerMap[ext] || 'text/html'
  }
  res.writeHead(200, header);

  if (req.url === '/') {
    const ctx = {
      req,
      res,
    }
    const { ssrHtml } = await render(ctx);
    res.write(ssrHtml);
    res.end()
  } else {
    const content = await readFileSync(join(root, req.url) , 'utf-8');
    res.end(content, 'utf-8');
  }

}).listen(8000)

console.log('http://localhost:8000')

Visit http://localhost:8000.

πŸ“ˆ Benchmark

https://umijs.github.io/umi-server/dev/bench/index.html

❓FAQ

Dingtalk Group

About

A runtime render tool for Umijs Server-Side Rendering.


Languages

Language:TypeScript 63.0%Language:JavaScript 36.2%Language:HTML 0.5%Language:CSS 0.2%