Git Product home page Git Product logo

umi-server's Introduction

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

umi-server's People

Contributors

winggao avatar ycjcl868 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.