{"id":14969188,"url":"https://github.com/effector/vike-react-template","last_synced_at":"2025-10-26T06:31:08.352Z","repository":{"id":252546100,"uuid":"840705765","full_name":"effector/vike-react-template","owner":"effector","description":"Template for quickly starting a SSR Node.js application with vite, react, effector, and fastify","archived":false,"fork":false,"pushed_at":"2024-08-16T00:55:32.000Z","size":74,"stargazers_count":24,"open_issues_count":2,"forks_count":3,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-02-09T19:15:57.246Z","etag":null,"topics":["effector","fastify","react","vike","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/effector.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-10T12:40:45.000Z","updated_at":"2024-12-17T18:02:24.000Z","dependencies_parsed_at":"2024-08-19T10:40:52.557Z","dependency_job_id":null,"html_url":"https://github.com/effector/vike-react-template","commit_stats":{"total_commits":8,"total_committers":2,"mean_commits":4.0,"dds":0.375,"last_synced_commit":"bdf53368eb767f59a76dd76eb90902eb62691257"},"previous_names":["effector/vike-react-template"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/effector%2Fvike-react-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/effector%2Fvike-react-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/effector%2Fvike-react-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/effector%2Fvike-react-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/effector","download_url":"https://codeload.github.com/effector/vike-react-template/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238276074,"owners_count":19445344,"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":["effector","fastify","react","vike","vite"],"created_at":"2024-09-24T13:41:19.173Z","updated_at":"2025-10-26T06:31:03.048Z","avatar_url":"https://github.com/effector.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Effector SSR Vike Application Template\n\nThis project is a template for quickly starting a Server-Side Rendering (SSR) Node.js application, combining a powerful set of vite, react, effector, and fastify.\n\n## Features\n\n- **File-system routing** implemented by Vike;\n- **Effector** to cover state management cases;\n- **React.js** to use the giant ecosystem of UI components;\n\n## Used Tools\n\n- **TypeScript**: v5 with [ts-node](https://npmjs.com/ts-node)\n- **React**: v18\n- **Vite**: v5 with [vite-plugin-svgr](https://npmjs.com/vite-plugin-svgr), [@vitejs/plugin-react](https://npmjs.com/@vitejs/plugin-react)\n- **Vike**: v0.4 with [vike-react](https://npmjs.com/vike-react) and few hooks in ./renderer\n- **Fastify**: v4 with [cookie](https://npmjs.com/cookie), [cors](https://npmjs.com/cors), [early-hints](https://npmjs.com/early-hints), [helmet](https://npmjs.com/helmet), [rate-limit](https://npmjs.com/rate-limit), more.\n- **Effector**: v23 with [patronum](https://npmjs.com/patronum), [reflect](https://npmjs.com/@effector/reflect), [factorio](https://npmjs.com/effector-factorio)\n- **Zod**: v3\n- **SVGR**: as [vite-plugin-svgr](https://npmjs.com/vite-plugin-svgr) v4\n- **Prettier**: v3 with [plugin-sort-imports](@trivago/prettier-plugin-sort-imports) by trivago\n\n## Requirements\n\n- Node.js 18.6+\n- corepack enabled (but can be used without)\n\n## Use this template\n\n0. Press \"Use this template\" to create a copy of repository.\n\n1. Clone your repository:\n\n```bash\ngit clone https://github.com/effector/vike-react-template my-app\n# OR\ngh repo clone effector/vike-react-template my-app\n```\n\n2. Navigate to the project directory:\n\n```bash\ncd my-app\n```\n\n3. Install package manager and dependencies:\n\n```bash\ncorepack enable\ncorepack prepare\npnpm install\n```\n\n## Usage\n\n1. Run in development mode:\n\n```bash\npnpm dev\n```\n\n2. Build for production:\n\n```bash\npnpm build\n```\n\n3. Run production version:\n\n```bash\npnpm start\n```\n\n## Project Structure\n\nStrongly recommend to carefully **review each file** in this repository, before using it in production.\n\nThis project inherites [Vike project structure](https://vike.dev/file-structure):\n\n    dist/\n    pages/\n    public/\n    renderer/\n    server/\n    src/\n\n- `dist` contains result of `pnpm build`, it is production build;\n- `pages` is a Vike's [filesystem routing](https://vike.dev/routing#filesystem-routing);\n- `public` is a [static files directory](https://vike.dev/static-directory#public);\n- `renderer` is a react + effector [integration hooks](https://vike.dev/file-structure#renderer);\n- `server` is a fastify server, builds with `tsc`, runs with `ts-node`;\n- `src` is a [FSD](https://feature-sliced.design) basis, with code imported into `pages`, and `renderer`;\n\n### `pages/`\n\n#### `pages/+Wrapper.tsx`\n\nIt is a data provider for logic uses effector.\n\n#### `pages/+Layout.tsx`\n\nTo wrap up components with some layout use [`+Layout.tsx`](https://vike.dev/Layout).\n\nAlso, you can [nest multiple layouts](https://vike.dev/Layout#nested-layouts).\n\n#### `pages/index/+pageStarted.ts`\n\nThis vike hook describes what event Vike should call on server when page logic can be started.\n\nUsually looks like this:\n\n```ts\nimport { createPageStart } from \"~/shared/init\";\n\nexport const pageStarted = createPageStart();\n\n// pageStarted has type:\npageStarted: EventCallable\u003c{\n  params: Record\u003cstring, string\u003e;\n  data: void;\n}\u003e;\n```\n\n`params` looks like `{ id: \"foo\" }` for route `pages/example/@id` and pathname `/example/foo`.\n\n| Url          | Route             | `params`        |\n| ------------ | ----------------- | --------------- |\n| /            | pages/index       | `{}`            |\n| /example/100 | pages/example/@id | `{ id: \"100\" }` |\n\n#### `pages/index/+Page.tsx`\n\nThis is a page component. It can import `model.ts` and all from src using `~/` alias.\n\nUse `export default` and named functions:\n\n```tsx\nexport default function PageHome() {\n  return \u003ch1\u003eHello World\u003c/h1\u003e;\n}\n```\n\n#### `pages/index/model.ts`\n\nThis is a logic file written in effector. It can import `+pageStarted.ts` and all from src using `~/` alias.\n\n```ts\nimport { createEffect, sample } from \"effector\";\n\nimport { pageStarted } from \"./+pageStarted\";\n\nconst helloFx = createEffect((name: string) =\u003e {\n  console.info(`Hello ${name}`);\n});\n\nsample({\n  clock: pageStarted,\n  fn: () =\u003e \"World\",\n  target: helloFx,\n});\n```\n\nWhen user opened http://localhost:3000, `pageStarted` fired, then sample with `clock: pageStarted` reacts and triggers `helloFx` with `\"World\"` argument.\n\nIn our dynamic and event driven kind of environment, this is the powerful way to describe logic.\n**Without needing to deal with React**, Hooks, Rerenders, StrictMode, Next.js, etc.\n\n### `pages/example/@id`\n\nLet's talk about data loading.\n\nYou can always use simple `createEffect` to load data in Browser, just react on user actions, not `pageStarted` nor `appStarted`.\n\nUntil, you read [Data Fetching article](https://vike.dev/data-fetching) from Vike.dev. It will works until [Client-Side Routing](https://vike.dev/client-routing).\nVike has `+data.ts` hook to fetch data on client and server navigation.\n\n\u003e In case of refetch data using triggering some event on client side, or changing filters in user interface consider making client navigation with query parameters.\n\n#### `pages/example/@id/+data.ts`\n\nDeclare your data fetcher. Name of the exported function must be `data`. Use this as starting point:\n\n```ts\nimport type { PageContextServer } from \"vike/types\";\n\nexport async function data(pageContext: PageContextServer) {\n  const { routeParams } = pageContext;\n  const { id } = routeParams;\n\n  // await api.someItems.getById(id)\n\n  return {\n    sampleData: { id: id ?? \"\u003cempty\u003e\" },\n  };\n}\n```\n\nConsider placing all reusable API requests into `src/shared/api`.\nUsing barrel file pattern is optional but very useful.\n\n#### `pages/example/@id/+pageStarted.ts`\n\nIn case of data loading, hook pageStarted should be modified:\n\n```ts\nimport { createPageStart } from \"~/shared/init\";\n\nimport type { data } from \"./+data\";\n\nexport const pageStarted = createPageStart\u003cAwaited\u003cReturnType\u003ctypeof data\u003e\u003e\u003e();\n```\n\nYou need just bind resulting type of your `data` loader function. Vike passes result of `data()` call into `pageStarted` like `{ params: { id }, data }`.\n\n#### `pages/example/@id/model.ts`\n\nSo, you can access data from `model` like this:\n\n```ts\nimport { createStore, sample } from \"effector\";\n\nimport { pageStarted } from \"./+pageStarted\";\n\nsample({\n  clock: pageStarted,\n  fn: ({ data, params: { id } }) =\u003e data,\n  target: insertHereAnyUnit,\n});\n// you can actually use `source, filter` in sample\n```\n\n### `pages/_error`\n\nComponent created as `pages/_error/+Page.tsx` is used to show [error page](https://vike.dev/error-page).\n\n### `renderer/`\n\nHere described exact integration of vike, react, and effector.\nYou may need to read this before changing:\n\n- [Vike Hooks](https://vike.dev/hooks);\n- [Build Your Own Framework](https://vike.dev/build-your-own-framework) on top of Vike;\n- Don't be shy, read source files, it has links to documentation;\n\n### `server/`\n\n#### `server/config.ts`\n\nContains resolvers of configuration variables.\n\n```ts\nexport const CONFIG = {\n  get SERVER_PORT() {\n    return Number.parseInt(globalThis.process.env.SERVER_PORT ?? \"3000\", 10);\n  },\n};\n```\n\n\u003e This is the only way it works on Cloudflare Workers. If you have a better solution please [Leave an issue](https://github.com/effector/vike-react-template/issues).\n\n#### `server/directory-root.ts`\n\nDeclares project root directory, to resolve static assets from.\n\n#### `server/index.ts`\n\nCreates instance of `server/server`, handles signals SIGINT, SIGTERM.\n\n#### `server/server.ts`\n\nCreates fastify instance, configures plugins, read cookies, renders using vike/server.\n\nYou can modify any part of this and any other files. Please, explore documentation before.\n\n#### `server/tsconfig.json`\n\nUsed here to describe different environment for files in this directory.\n\nIt builds for production with `tsc -p server`. It runs for development with `ts-node` ESM-loader.\n\nThere is no hot reload in `server/` directory. Restart manually after changing these files.\n\n### `src/`\n\nConsider using [Feature-Sliced Design](https://feature-sliced.design/) structuring this directory.\n\n#### `src/vike.d.ts`\n\nHandles [`pageContext` typings](https://vike.dev/pageContext#typescript).\n\n#### `src/vite-env.d.ts`\n\nHandles [Vite client types](https://vitejs.dev/guide/features.html#client-types).\n\n## Customization\n\n\u003e What kind of customizations needs to be described? integration with supabase? [Leave an issue](https://github.com/effector/vike-react-template/issues).\n\n### Use different Package Manager\n\nFirst of all, delete `pnpm-lock.yaml`, dist, and node_modules:\n\n```bash\nrm pnpm-lock.yaml\nrm -rf node_modules dist\n```\n\n#### Node.js v18.x:\n\nSet exact version into `packageManager` field of `package.json`:\n\n```json\n// package.json\n{\n  \"packageManager\": \"npm@10.8.2\" // \"yarn@3.8.4\",\n}\n```\n\nSave and navigate to your terminal into the project directory:\n\n```bash\n# Enable corepack for your shell\ncorepack enable\n\n# Install package manager for your project\ncorepack prepare\n\n# Install dependencies\nnpm install\n```\n\n#### Node.js v20+:\n\nNode.js v20 has different version of corepack, so we can use `corepack use`.\n\n```bash\n# Enable corepack for your shell\ncorepack enable\n\n# Install package manager for your project\ncorepack use npm@latest # yarn@3\n\n# Install dependencies\nnpm install\n\n# Check packageManager field in package.json\njq .packageManager package.json\n#\u003e \"yarn@3.8.4+sha256.1ee0e26fb669143425371ab8727fe4c5841640a2fd944863a8e8c28be966aca2\"\n# It's OK\n```\n\n## Supported OS and Node.js\n\nThis template has been tested on:\n\n- macOS Sonoma 14.5, Node.js v20.10.0\n\n## Contributing\n\nWe welcome contributions to the project! Please read our contribution guidelines before submitting a pull request.\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feffector%2Fvike-react-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feffector%2Fvike-react-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feffector%2Fvike-react-template/lists"}