feat: support SSR

.gitignore

@@ -7,3 +7,5 @@ node_modules
 
 # Artifacts
 dist
+
+examples/**/package-lock.json

README.md

@@ -192,8 +192,11 @@ With this `{rootDir}/src/ui/tsconfig.json`:
 - `forkTsCheker` (`false | ForkTsCheckerWebpackPluginOptions`) - config for ForkTsCheckerWebpackPlugin [more](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin#options). If `false`, ForkTsCheckerWebpackPlugin will be disabled.
 - `cache` (`boolean | FileCacheOptions | MemoryCacheOptions`) — Cache the generated webpack modules and chunks to improve build speed. [more](https://webpack.js.org/configuration/cache/)
 - `babelCacheDirectory` (`boolean | string`) — Set directory for babel-loader cache (`default: node_modules/.cache/babel-loader``)
-- `babel` (`(config: babel.TransformOptions, options: {configType: 'development' | 'production'}) => babel.TransformOptions | Promise<babel.TransformOptions>`) - Allow override the default babel transform options.
-- `webpack` (`(config: webpack.Configuration, options: {configType: 'development' | 'production'}) => webpack.Configuration | Promise<webpack.Configuration>`) - Allow override the default configuration.
+- `babel` (`(config: babel.TransformOptions, options: {configType: 'development' | 'production'; isSsr: boolean}) => babel.TransformOptions | Promise<babel.TransformOptions>`) - Allow override the default babel transform options.
+- `webpack` (`(config: webpack.Configuration, options: {configType: 'development' | 'production'; isSsr: boolean}) => webpack.Configuration | Promise<webpack.Configuration>`) - Allow override the default configuration.
+- `ssr` - build SSR bundle. The SSR entries should be inside `src/ui/ssr` directory and match the client entries.
+  - `noExternal` (`string | RegExp | (string | RegExp)[] | true`) - prevent listed dependencies from being externalized for SSR. By default, all dependencies are externalized.
+  - `moduleType`: (`'commonjs' | 'esm'`) - library type for the SSR bundle, by default `commonjs`.
 
 ##### Dev build
 

examples/ssr/.eslintignore

@@ -0,0 +1,2 @@
+node_modules
+dist/

examples/ssr/.eslintrc

@@ -0,0 +1,4 @@
+{
+    "extends": ["@gravity-ui/eslint-config", "@gravity-ui/eslint-config/import-order", "@gravity-ui/eslint-config/prettier"],
+    "root": true
+}

examples/ssr/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

examples/ssr/.npmrc

@@ -0,0 +1 @@
+package-lock=false

examples/ssr/.prettierignore

@@ -0,0 +1,2 @@
+dist
+package-lock.json

examples/ssr/.prettierrc.json

@@ -0,0 +1 @@
+"@gravity-ui/prettier-config"

examples/ssr/.stylelintrc

@@ -0,0 +1,7 @@
+{
+    "extends": [
+        "@gravity-ui/stylelint-config",
+        "@gravity-ui/stylelint-config/order",
+        "@gravity-ui/stylelint-config/prettier"
+    ]
+}

examples/ssr/.tool-versions

@@ -0,0 +1 @@
+nodejs 22.12.0

examples/ssr/README.md

@@ -0,0 +1,32 @@
+# gravity-ui-app-builder-example
+
+App-builder template with: typescript, sass and Gravity UI.
+
+## ⚗️ Technologies list
+
+- [Gravity UI](https://gravity-ui.com/)
+- [TypeScript](https://www.typescriptlang.org/)
+- [Sass](https://sass-lang.com/)
+- [ESlint](https://eslint.org/) & [Prettier](https://prettier.io/)
+
+## 🚀 Start using it
+
+To use this template for your app you can run:
+
+```sh
+npx degit gravity-ui/app-builder/examples/ssr#main my-project
+cd my-project
+
+npm install
+npm run dev
+```
+
+or
+
+```sh
+pnpx degit gravity-ui/app-builder/examples/ssr#main my-project
+cd my-project
+
+pnpm install
+pnpm run dev
+```

examples/ssr/app-builder.config.ts

@@ -0,0 +1,18 @@
+import {defineConfig} from '@gravity-ui/app-builder';
+
+export default defineConfig(() => {
+    return {
+        client: {
+            devServer: {
+                port: true,
+            },
+            ssr: {
+                noExternal: [/@gravity-ui\/.+/], // dependencies with ccs imports in sources or not correct esm modules should be bundled.
+                moduleType: 'esm', // default commonjs
+            },
+        },
+        server: {
+            port: true,
+        },
+    };
+});

examples/ssr/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "ssr",
+  "version": "1.0.0",
+  "description": "",
+  "type": "module",
+  "scripts": {
+    "dev": "app-builder dev",
+    "build": "app-builder build",
+    "start": "NODE_ENV=production node dist/server",
+    "lint": "npm run lint:code && npm run lint:styles",
+    "lint:code": "eslint --ext .js,.jsx,.ts,.tsx .",
+    "lint:styles": "stylelint \"src/ui/**/*.scss\""
+  },
+  "keywords": [],
+  "license": "MIT",
+  "devDependencies": {
+    "@gravity-ui/app-builder": "*",
+    "@gravity-ui/eslint-config": "^3.2.0",
+    "@gravity-ui/prettier-config": "^1.1.0",
+    "@gravity-ui/stylelint-config": "^4.0.1",
+    "@gravity-ui/tsconfig": "^1.0.0",
+    "@types/cookie-parser": "^1.4.8",
+    "@types/express": "^5",
+    "@types/node": "^22",
+    "@types/react": "^18.3.2",
+    "@types/react-dom": "^18.3.0",
+    "eslint": "^8",
+    "prettier": "^3.2.5",
+    "stylelint": "^15",
+    "typescript": "~5.6.3"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.26.0",
+    "@bem-react/classname": "^1.6.0",
+    "@gravity-ui/icons": "^2.11.0",
+    "@gravity-ui/uikit": "^6.37.0",
+    "cookie-parser": "^1.4.7",
+    "express": "^5",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router": "^7.0.2",
+    "zustand": "^5.0.2"
+  }
+}

examples/ssr/src/server/.eslintrc

@@ -0,0 +1,3 @@
+{
+    "extends": ["@gravity-ui/eslint-config/server"]
+}

examples/ssr/src/server/index.ts

@@ -0,0 +1,60 @@
+import {randomUUID} from 'node:crypto';
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+import * as url from 'node:url';
+
+import cookieParser from 'cookie-parser';
+import express from 'express';
+import * as ReactDOM from 'react-dom/server';
+
+const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
+
+const manifest = JSON.parse(
+    fs.readFileSync(path.join(__dirname, '../public/build/assets-manifest.json'), 'utf-8'),
+);
+const ssrManifest = JSON.parse(
+    fs.readFileSync(path.join(__dirname, '../ssr/assets-manifest.json'), 'utf-8'),
+);
+
+const cssAssets = manifest.entrypoints.main.assets.css ?? [];
+const links = cssAssets.map((v: string) => ({rel: 'stylesheet', href: `/build/${v}`}));
+
+const app = express();
+
+app.use(cookieParser());
+app.use('/build', express.static(path.join(__dirname, '../public/build')));
+
+const isProduction = process.env.NODE_ENV === 'production';
+
+app.get('*all', async (req, res) => {
+    const {render} = await import(
+        '../ssr/' + ssrManifest['main.mjs'] + (isProduction ? '' : `?q=${randomUUID()}`)
+    );
+    const theme = getUserTheme(req);
+    const {pipe} = ReactDOM.renderToPipeableStream(render({links, theme, url: req.url}), {
+        bootstrapScripts: manifest.entrypoints.main.assets.js.map((v: string) => `/build/${v}`),
+        bootstrapScriptContent: `window.links = ${JSON.stringify(links)};`,
+        onShellReady() {
+            res.setHeader('content-type', 'text/html');
+            pipe(res);
+        },
+    });
+});
+
+const port = Number(process.env.APP_PORT || 3015);
+
+app.listen(port, () => {
+    console.log(`Server is running on port ${port}`);
+});
+
+function getUserTheme(req: express.Request) {
+    const cookie = req.cookies['theme-storage'];
+    try {
+        const {
+            state: {theme},
+        } = JSON.parse(cookie);
+        return theme;
+    } catch {
+        return 'light';
+    }
+}

examples/ssr/src/server/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/server"
+  },
+  "include": ["**/*"],
+  "exclude": []
+}

examples/ssr/src/ui/.eslintrc

@@ -0,0 +1,8 @@
+{
+    "extends": "@gravity-ui/eslint-config/client",
+    "rules": {
+        "react/jsx-uses-react": "off",
+        "react/react-in-jsx-scope": "off",
+        "valid-jsdoc": "off"
+    }
+}

examples/ssr/src/ui/containers/About/About.tsx

@@ -0,0 +1,11 @@
+import {Text} from '@gravity-ui/uikit';
+
+export function About() {
+    return (
+        <div
+            style={{display: 'grid', alignItems: 'center', justifyItems: 'center', height: '100%'}}
+        >
+            <Text variant="display-4">About</Text>
+        </div>
+    );
+}

examples/ssr/src/ui/containers/App/App.scss

@@ -0,0 +1,9 @@
+$block: '.app';
+
+#{$block} {
+    &__theme-button {
+        position: fixed;
+        inset-block-start: 0;
+        inset-inline-end: 0;
+    }
+}