https://github.com/effector/razzle-template

SSR template with React, Effector, TypeScript, ReactRouter, and StyledComponents
https://github.com/effector/razzle-template

effector razzle react react-router styled-components typescript

Last synced: 3 months ago
JSON representation

SSR template with React, Effector, TypeScript, ReactRouter, and StyledComponents

• Host: GitHub
• URL: https://github.com/effector/razzle-template
• Owner: effector
• License: mit
• Archived: true
• Created: 2020-02-15T15:36:46.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T02:34:04.000Z (almost 2 years ago)
• Last Synced: 2024-04-14T02:33:27.953Z (7 months ago)
• Topics: effector, razzle, react, react-router, styled-components, typescript
• Language: TypeScript
• Homepage:
• Size: 3.13 MB
• Stars: 65
• Watchers: 14
• Forks: 4
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome - effector SSR - SSR on React, TypeScript, Razzle and Styled. (Templates / Form management)

README

        
# Effector SSR Template

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](http://prettier.io) [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/) [![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://conventionalcommits.org) [![](https://img.shields.io/badge/feature/slices-1.0-blue)](https://featureslices.dev/v1.0)

> Note: this is template slightly outdated and will be updated as soon as possible.

## How to use

1. Press `Use this template` button.

2. Clone it, install and run:

```bash

yarn install

yarn start

```

- Use `import {} from "effector-root"` instead of `"effector"`. All units should be created in the root domain.

- Use `createStart`, `withStart` and `useStart` from `page-routing.ts` for pages start events.

## Structure

https://sova.dev/application-structure

- `src/server.tsx` — Express server, that renders React to stream

- `src/index.tsx` — Node.js entry point, that have hot module replacement and imports server

- `src/client.tsx` — Browser side entry point, that hydrates stores and react app

- `src/application.tsx` — Application component, that have global styles and effector provider

- `src/pages/index.tsx` — Pages component

- `src/pages/routes.ts` — Static routes config

- `src/pages/:page-name/index.tsx` — View for single specific page

- `src/pages/:page-name/model.ts` — Business-logic for specific page, that contains single level logic layer

- `src/lib` — Internal libraries

- `src/lib/effector` — START event name to use as page property