{"id":13607578,"url":"https://github.com/Lomray-Software/vite-ssr-boost","last_synced_at":"2025-04-12T14:30:35.436Z","repository":{"id":177634719,"uuid":"657722310","full_name":"Lomray-Software/vite-ssr-boost","owner":"Lomray-Software","description":"Super easy framework based on Vite for create awesome SSR or SPA applications on React and React Router.","archived":false,"fork":false,"pushed_at":"2025-04-10T12:15:24.000Z","size":1392,"stargazers_count":100,"open_issues_count":0,"forks_count":3,"subscribers_count":4,"default_branch":"staging","last_synced_at":"2025-04-10T13:45:01.204Z","etag":null,"topics":["boost","express","nodejs","react","react-router","reactjs","router","serverless","ssr","typescript","vite"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Lomray-Software.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["Lomray-Software"]}},"created_at":"2023-06-23T17:34:03.000Z","updated_at":"2025-04-10T12:06:51.000Z","dependencies_parsed_at":null,"dependency_job_id":"60cafbe4-60f2-45c2-ad5e-8b31951c7128","html_url":"https://github.com/Lomray-Software/vite-ssr-boost","commit_stats":null,"previous_names":["lomray-software/vite-ssr-boost"],"tags_count":149,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lomray-Software%2Fvite-ssr-boost","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lomray-Software%2Fvite-ssr-boost/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lomray-Software%2Fvite-ssr-boost/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lomray-Software%2Fvite-ssr-boost/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Lomray-Software","download_url":"https://codeload.github.com/Lomray-Software/vite-ssr-boost/tar.gz/refs/heads/staging","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248580987,"owners_count":21128087,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["boost","express","nodejs","react","react-router","reactjs","router","serverless","ssr","typescript","vite"],"created_at":"2024-08-01T19:01:19.851Z","updated_at":"2025-04-12T14:30:35.430Z","avatar_url":"https://github.com/Lomray-Software.png","language":"TypeScript","funding_links":["https://github.com/sponsors/Lomray-Software"],"categories":["SSR","Uncategorized","Plugins"],"sub_categories":["Libraries","Uncategorized"],"readme":"\u003ch1 align='center'\u003eVite SSR BOOST\u003c/h1\u003e\n\u003ch4 align='center'\u003eSuper easy framework based on Vite for create awesome SSR or SPA applications on React and React Router.\u003c/h4\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/Lomray-Software/vite-ssr-boost/prod/logo.png\" alt=\"Vite SSR BOOST logo\" width=\"250\" height=\"250\"\u003e\n\u003c/p\u003e\n\n### Key features:\n\n- Develop ⚡charged⚡ server side applications with React streaming 💨 support.\n- Unlocks Suspense for server side applications.\n- Switch between SPA and SSR in 1 second.\n- Charged CLI out of box.\n- Deploy to AWS Amplify/Docker in SPA/SSR mode for 5 sec.\n- Very easy to migrate, very easy to use.\n- All the power of [vite](https://vitejs.dev/)⚡\n- All the power of [react-router](https://reactrouter.com/)🛣\n- Easy-peasy develop for [Capacitor](https://capacitorjs.com/)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://sonarcloud.io/api/project_badges/measure?project=vite-ssr-boost\u0026metric=reliability_rating\" alt=\"reliability\"\u003e\n  \u003cimg src=\"https://sonarcloud.io/api/project_badges/measure?project=vite-ssr-boost\u0026metric=security_rating\" alt=\"Security Rating\"\u003e\n  \u003cimg src=\"https://sonarcloud.io/api/project_badges/measure?project=vite-ssr-boost\u0026metric=sqale_rating\" alt=\"Maintainability Rating\"\u003e\n  \u003cimg src=\"https://sonarcloud.io/api/project_badges/measure?project=vite-ssr-boost\u0026metric=vulnerabilities\" alt=\"Vulnerabilities\"\u003e\n  \u003cimg src=\"https://sonarcloud.io/api/project_badges/measure?project=vite-ssr-boost\u0026metric=bugs\" alt=\"Bugs\"\u003e\n  \u003cimg src=\"https://sonarcloud.io/api/project_badges/measure?project=vite-ssr-boost\u0026metric=ncloc\" alt=\"Lines of Code\"\u003e\n  \u003cimg src=\"https://sonarcloud.io/api/project_badges/measure?project=vite-ssr-boost\u0026metric=coverage\" alt=\"code coverage\"\u003e\n  \u003cimg src=\"https://img.shields.io/npm/v/@lomray/vite-ssr-boost?label=semantic%20release\u0026logo=semantic-release\" alt=\"semantic version\"\u003e\n\u003c/p\u003e\n\n## Table of contents\n- [Getting started](#getting-started)\n- [How to use](#how-to-use)\n- [Example](#how-to-use)\n- [Plugin options](#plugin-options)\n- [Useful imports](#useful-imports)\n- [CLI](#cli)\n- [Warning](#warning)\n- [Use Cases](#use-cases)\n- [Bugs and feature requests](#bugs-and-feature-requests)\n- [License](#license)\n\n## Getting started\n\nThe package is distributed using [npm](https://www.npmjs.com/), the node package manager.\n\n```\nnpm i --save @lomray/vite-ssr-boost\n```\n\n## How to use\n\n**Explore [template](https://github.com/Lomray-Software/vite-template)** to more understand how it works or:\n\n1. Add plugin to vite config:\n```typescript\n/**\n * vite.config.ts\n */\n\nimport { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\n/**\n * Import plugin\n */\nimport SsrBoost from '@lomray/vite-ssr-boost/plugin';\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n  /**\n   * Change root not necessary, but more understandable\n   */\n  root: 'src',\n  publicDir: '../public',\n  build: {\n    outDir: '../build',\n  },\n  /**\n   * Put here\n   */\n  plugins: [SsrBoost(), react()],\n});\n\n```\n2. Create `client` entrypoint:\n\n```typescript jsx\n/**\n * src/client.tsx\n */\nimport entryClient from '@lomray/vite-ssr-boost/browser/entry';\nimport App from './App.tsx'\nimport routes from './routes';\n\nvoid entryClient(App, routes, {\n  /**\n   * (optional). Client configuration \n   */\n  init: () =\u003e {},\n  /**\n   * (optional). Configure router options\n   * @see createBrowserRouter second arg\n   */\n  routerOptions: {},\n  /**\n   * (optional). Customization create router function, e.g. use from sentry one\n   */\n  createRouter: createBrowserRouter,\n  /**\n   * (optional). Change root id\n   */\n  rootId: 'root',\n});\n```\n\n3. Create `server` entrypoint:\n\n```typescript jsx\n/**\n * src/server.ts\n */\nimport entryServer from '@lomray/vite-ssr-boost/node/entry';\nimport App from './App';\nimport routes from './routes';\n\nexport default entryServer(App, routes, {\n  /**\n   * Request timeout (If your backend is slow, increase this value)\n   */\n  abortDelay: 15000, // default: 15000 (ms)\n  /**\n   * Server configuration (optional)\n   */\n  init: () =\u003e ({\n    /**\n     * (optional). Called once after express server creation.\n     * E.g. use for configure express middlewares\n     */\n    onServerCreated: () =\u003e {},\n    /**\n     * (optional). Called once after express server started.\n     */\n    onServerStarted: () =\u003e {},\n    /**\n     * (optional). Called on each incoming request.\n     * E.g. configure request state, create state manager etc.\n     */\n    onRequest: async () =\u003e {},\n    /**\n     * (optional). Called when react router and it's context was created.\n     * E.g. here you can switch stream depends on req.headers, for search crawlers you can disable stream.\n     */\n    onRouterReady: () =\u003e {},\n    /**\n     * (optional). Called when application shell is ready to send on client.\n     * E.g. here you can modify header or footer.\n     */\n    onShellReady: () =\u003e {},\n    /**\n     * (optional). Called when application shell or suspense resolved and sent to the client.\n     * E.g. here you can add some payload like custom state (any manager state) to response. \n     */\n    onResponse: () =\u003e {},\n    /**\n     * (optional). Stream error callback. Catch stream errors.\n     */\n    onError: () =\u003e {},\n    /**\n     * (optional). Called when application shell or all html (depends on stream option) is ready to send on client.\n     * E.g. here you can send any context or state to client.\n     */\n    getState: () =\u003e {},\n  }),\n  /**\n   * (optional). Customize production log handler\n   * @see @lomray/vite-ssr-boost/services/logger\n   */\n  loggerProd: new Logger(),\n  /**\n   * (optional). Customize development log handler\n   * @see @lomray/vite-ssr-boost/services/logger\n   */\n  loggerDev: new Logger(),\n  /**\n   * (optional). Configure pre-builded middlewares\n   */\n  middlewares: {\n    /**\n     * @see CompressionOptions from 'compression' package\n     */\n    compression: {},\n    /**\n     * @see ServeStaticOptions from 'serve-static' package\n     */\n    expressStatic: {},\n  },\n  /**\n   * (optional). Configure router static handler options\n   * @see createStaticHandler second arg\n   */\n  routerOptions: {},\n});\n```\n\n4. Replace `package.json` scripts:\n\n```json\n{\n  ...\n  \"scripts\": {\n    \"develop\": \"ssr-boost dev\",\n    \"build\": \"ssr-boost build\",\n    \"start:ssr\": \"ssr-boost start\",\n    \"start:spa\": \"ssr-boost start --only-client\",\n    \"preview\": \"ssr-boost preview\"\n  },\n  ...\n}\n```\n\n5. Let's do the magic:\n\n```shell\nnpm run develop\n```\n\n## Plugin options\n```typescript\nimport SsrBoost from '@lomray/vite-ssr-boost/plugin';\nimport type { FCRoute } from '@lomray/vite-ssr-boost/interfaces/fc-route';\n\n/**\n * Configuration\n */\nSsrBoost({\n  /**\n   * index.html file path\n   */\n  indexFile: 'index.html', // default: index.html\n  /**\n   * Server entrypoint file\n   */\n  serverFile: 'server.ts', // default: server.ts\n  /**\n   * Client entrypoint file\n   */\n  clientFile: 'client.ts', // default: client.ts\n  /**\n   * Add tsconfig aliases to vite config aliases\n   */\n  tsconfigAliases: true, // default: true\n  /**\n   * Path contains routes declaration files (need to detect route files).\n   */\n  routesPath: undefined, //default: undefined\n  /**\n   * Create additional SPA entrypoint: index-spa.html\n   * Can be used for service worker: createHandlerBoundToURL(\"index-spa.html\")\n   */\n  spaIndex: false, // default: false\n  /**\n   * Additional entry points for build\n   */\n  entrypoint: [], // default: undefined\n})\n```\n\n## Useful imports\n```typescript tsx\n/**\n * Components\n */\n// Navigate component based on react-router-dom with server-side support\nimport Navigate from '@lomray/vite-ssr-boost/components/navigate';\n// Change server response status\nimport ResponseStatus from '@lomray/vite-ssr-boost/components/response-status';\n// Scroll page to top after navigate\nimport ScrollToTop from '@lomray/vite-ssr-boost/components/scroll-to-top';\n// HOC for wrap component in Suspense\nimport withSuspense from '@lomray/vite-ssr-boost/components/with-suspense';\n// Only client side components\nimport OnlyClient from '@lomray/vite-ssr-boost/components/only-client';\n\n/**\n * Helpers\n */\n// Get server state (e.g. state manager) on client side\nimport getServerState from '@lomray/vite-ssr-boost/helpers/get-server-state';\n\n/**\n * Interfaces\n */\n// interfaces for route components\nimport type { FCRoute, FCCRoute } from '@lomray/vite-ssr-boost/interfaces/fc-route';\n// interface for define routes\nimport type { TRouteObject } from '@lomray/vite-ssr-boost/interfaces/route-object';\n```\n\nClient side components import example:\n```typescript jsx\n\u003cOnlyClient load={() =\u003e import('external-package')}\u003e\n  {(LoadedComponent) =\u003e (\n    \u003cLoadedComponent /\u003e\n  )}\n\u003c/OnlyClient\u003e\n```\n\n## CLI\nExplore all commands and options:\n```shell\nssr-boost -h\n```\n\n## WARNING\nRoute imports of the following types are supported:\n```typescript jsx\nimport { RouteObject } from 'react-router-dom';\nimport HomePage from './pages/home'; // not lazy imports should be directly in file where it use\n\nconst importPath = './pages/home';\n\nconst routes: RouteObject[] = [\n  {\n    path: '/home',\n    Component: HomePage, // support\n    element: \u003cAppLayout /\u003e, // support\n    lazy: () =\u003e import('./pages/home'), // support\n    lazy: () =\u003e import(importPath), // not support, but you can move logic in separate file and import it with supported case\n  }\n];\n```\n## Use Cases\n\n### Change `basename`\n```typescript jsx\n/**\n * Configure client\n */\nvoid entryClient(App, routes, {\n  routerOptions: {\n    basename: '/custom',\n  },\n});\n```\n```typescript jsx\n/**\n * Configure server\n */\nexport default entryServer(App, routes, {\n  routerOptions: {\n    basename: '/custom',\n  },\n});\n```\n\n### Change `base` for static assets\n```typescript\n// https://vitejs.dev/config/\nexport default defineConfig({\n  base: '/static',\n});\n```\n\n```typescript jsx\n/**\n * Configure server\n * NOTE: 'basename' should be equal to 'base' from vite config \n */\nexport default entryServer(App, routes, {\n  middlewares: {\n    expressStatic: {\n      basename: '/static',\n    },\n  },\n});\n```\n\n\n### [Capacitor](https://capacitorjs.com/) additional endpoint\n```typescript\n// https://vitejs.dev/config/\nexport default defineConfig({\n  plugins: [\n    SsrBoost({\n      entrypoint: [\n        {\n          name: 'mobile',\n          type: 'spa',\n          clientFile: './src/mobile.tsx',\n          buildOptions: '--mode mobile',\n        },\n      ],\n    }),\n    react(),\n  ],\n});\n```\n```typescript jsx\nconst AppMobile: FC = (props) =\u003e {\n  // some mobile logic\n\n  return \u003cApp {...props} /\u003e;\n}\n\n/**\n * src/mobile.tsx\n */\nvoid entryClient(AppMobile, routes, {});\n```\n\n\n## Bugs and feature requests\n\nBug or a feature request, [please open a new issue](https://github.com/Lomray-Software/vite-ssr-boost/issues/new).\n\n## License\nMade with 💚\n\nPublished under [MIT License](./LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLomray-Software%2Fvite-ssr-boost","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FLomray-Software%2Fvite-ssr-boost","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLomray-Software%2Fvite-ssr-boost/lists"}