Skip to content

darianstlex/vike-react-template

Repository files navigation

Vike + React + Effector + SSR

This template is based on Vike + React + Effector.

vike-react is not used to have better control over rendering mechanism.

Hooks/Events

All standard hooks can be used, plus some extra to control effector values

Data flow:

+data.ts: vike hook for initial data preparation if needed
+onBeforeInit.ts: hook, fires before page init event on server side, have access to the effector scope
+pageInitiated.ts: effector event, fires on page init on server side.
+onAfterInit.ts: hook, fires after page init event on server side, have access to the effector scope
appStarted: effector event, fires on app start on client side. On UI changes will cause diff in server/client render
+onBeforeStart.ts: hook, fires before page start event on client side, have access to the effector scope. On UI changes will cause diff in server/client render
+pageStarted.ts: effector event, fires on page start on client side. Runs after the first render.

Page Components:

+Layout.tsx: custom layout component to override the global one
+Wrapper.tsx: additional page wrapper

Development:

npm i / npm ci
npm run dev

Tests

To run unit tests

npm run unit
npm run unit:open
npm run unit:coverage

To run functional tests

npm run func
npm run func:open
npm run func:coverage

npm run test:coverage

To run all tests wth coverage

npm run test:coverage

Learn More

To learn more about framework, take a look at the following resources: