repository·master·Indexed 27 days ago
https://github.com/alibaba/raxA progressive framework for building universal applications with a single codebase that runs across Web, Weex, Node.js, Alibaba MiniApp, and WeChat MiniProgram. It features a driver-based rendering system with support for DOM, Server, WebGL, and Weex, as well as specialized packages for server-side rendering (rax-server, rax-server-renderer), document structure (rax-document), and state management (rax-redux).
Ctrl + Shift + P or Cmd + Shift + P on Mac) and invoke the Create Application command.Install the driver-server package via npm to use the Rax server driver.
$ npm install --save driver-serverYou can inspect and modify the state of Rax components at runtime using the Rax Developer Tools Chrome extension.
Note: The extension is only functional in development mode and will not work in production mode.
Install the rax-server package using npm to enable Server-Side Rendering (SSR) capabilities.
npm install rax-server --saveIf you are using TypeScript, install the @types/rax package as a development dependency.
$ npm install --save-dev @types/raxInstall the Weex driver for Rax using npm to enable Rax components to run in a Weex environment.
$ npm install --save driver-weexYou can initialize a new Rax project using the create-rax initializer via npm init. This works with npm 6 or higher.
After initialization, navigate to the project directory, install dependencies, and start the local development server.
$ npm init rax <YourProjectName>
$ cd <YourProjectName>
$ npm install
$ npm run startInstall the rax-server-renderer package via npm to enable server-side rendering capabilities for Rax components.
$ npm install --save rax-server-rendererTo use rax-server with the Express framework, initialize the RaxServer instance and call server.render within your Express route handlers.
const express = require('express');
const RaxServer = require('rax-server');
const PORT = 8080;
const app = express();
const server = new RaxServer({
// ... configuration options
});
app.get('/index', (req, res) => {
server.render(req, res, {
page: 'index'
});
});
app.listen(PORT, () => {
console.log(`app listening on port ${PORT}`);
});Install the rax-redux package using npm to integrate Redux with Rax.
npm install --save rax-reduxInstall rax-test-renderer as a development dependency to enable snapshot testing for Rax components.
$ npm install --save-dev rax-test-rendererUse rax-document to provide essential components for constructing the HTML structure of your application, including head elements and body containers. This is particularly useful for SSR (Server-Side Rendering) and MPA (Multi-Page Application) setups.
import { createElement } from 'rax';
import { Root, Data, Style, Script } from 'rax-document';
export default () => {
return (
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>ssr-document-demo</title>
<Style />
</head>
<body>
{/* root container */}
<Root />
{/* initial data from server side */}
<Data />
<Script />
</body>
</html>
);
}