https://github.com/artem-malko/react-ssr-template
Simple template for a website with a brand new SSR streaming API from React 18
https://github.com/artem-malko/react-ssr-template
css-in-js esbuild eslint pino react react-query react18 reactjs redux serverside-rendering ssr typescript webpack
Last synced: about 1 month ago
JSON representation
Simple template for a website with a brand new SSR streaming API from React 18
- Host: GitHub
- URL: https://github.com/artem-malko/react-ssr-template
- Owner: artem-malko
- License: mit
- Created: 2021-06-13T14:26:48.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-05-11T18:01:01.000Z (12 months ago)
- Last Synced: 2025-02-27T01:13:42.390Z (about 2 months ago)
- Topics: css-in-js, esbuild, eslint, pino, react, react-query, react18, reactjs, redux, serverside-rendering, ssr, typescript, webpack
- Language: TypeScript
- Homepage: http://174.138.13.187:5000
- Size: 5.48 MB
- Stars: 71
- Watchers: 3
- Forks: 5
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React application with Streaming Server Side Rendering
A simple template for a website with SSR (with streams) and React 18 with a brand new API — https://github.com/reactwg/react-18/discussions 🔥🔥🔥
🚀 Just start with
```bash
npm i && make dev
```
If you want to see this project in action: http://174.138.13.187:5000/
🚧 🛠️ Work In Progress 🛠️ 🚧
## Base commands
First off, I'm using make) It's not necessary, but as I think it is much powerful than npm from the box.
So, let's talk about base commands.
* `make dev` — starts a dev-server with a file-watcher + tsc in a watch mode.
* `make prod` — builds a production version of your application.
* `make start-prod` — starts built application. Quite useful after `make prod`.
* `make test` — starts eslint, prettier, tsc and unit-tests
## Technologies
* [typescript](https://www.typescriptlang.org/) as the main language.
* [Express.js](https://expressjs.com/) as a server. I think about fastify as a replacement for Express.js.
* [React](https://reactjs.org/) as a view layer. Render to a stream is used for SSR.
* [React-query](https://react-query.tanstack.com/) as a layer for working with an external data.
* Own version of CSS-in-JS. Inspired by [aphrodite](https://github.com/Khan/aphrodite). You can find an implementation [here](https://github.com/artem-malko/react-ssr-template/blob/main/src/framework/infrastructure/css). I need my own implementation, cause there is no any other ready solutions in CSS-in-JS, which will work with new React SSR API.
* My own router, which was created to work with redux. Find more info [here](https://github.com/artem-malko/react-ssr-template/blob/main/src/framework/infrastructure/router). Checkout tests, you will find all cases there. Redux is used under the hood. If you'd like to use redux for your own state — you can wrap your application with a Provider. Redux in the router uses its own context.
* [webpack](https://webpack.js.org/) + [esbuild](https://esbuild.github.io/) to build the project.
* [pino](https://github.com/pinojs/pino) as fast and light logger.
* [mocha](https://mochajs.org/) + [chai](https://www.chaijs.com/) + [sinon](https://sinonjs.org/) + [React testing library](https://testing-library.com/docs/react-testing-library/intro/) to work with tests.
* [eslint](https://eslint.org/) to find mistakes in the code.
* [prettier](https://prettier.io/) to forget about code style.
I've tried to add as many comments in the source code as I could. So, all interesting places have dozens of comments to describe, what's happening there. I do apologize for my english)
As you can see, there is no any state manager for your own data. Redux is used in the router only, react-query is used for any data-fetching. So, you can use anything for any additional data-managment.
If you want to figure out, how it works, just start from:
* https://github.com/artem-malko/react-ssr-template/blob/main/src/application/entry/server/index.tsx for a server-side part of the application.
* https://github.com/artem-malko/react-ssr-template/blob/main/src/application/entry/client/index.tsx for a client-side part of the application.
But I recommend you to start from https://github.com/reactwg/react-18/discussions cause, there a lot of useful information, which can help you to work with current repo.
Fell free to ask me anything in the [issues](https://github.com/artem-malko/react-ssr-template/issues/new).