https://github.com/jiaronggu/reactcoretemplate
https://github.com/jiaronggu/reactcoretemplate
code-splitting netcore react redux ssr
Last synced: 13 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/jiaronggu/reactcoretemplate
- Owner: JiarongGu
- Created: 2018-10-01T15:09:42.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T15:17:06.000Z (about 3 years ago)
- Last Synced: 2025-05-20T10:14:24.707Z (8 months ago)
- Topics: code-splitting, netcore, react, redux, ssr
- Language: TypeScript
- Size: 2.55 MB
- Stars: 10
- Watchers: 1
- Forks: 2
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ReactCoreTemplate
Example for .Net Core + React + Redux + Typescript + Server Rendering + Code Split + Scss
Using creat-react-app (react-script) with react-app-rewired
hope this can help someone who is seeking for .net core + react
## Getting Started
This project is using .net core 2.2, please ensure you have the right sdk.
https://dotnet.microsoft.com/download/dotnet-core/2.2
Run the complie in ClientApp before you start the .net core webapp
```
npm run build:all
```
The proxy for api to .net core using https port 5001
## Rewire Overrides
[react-app-rewired](https://github.com/timarney/react-app-rewired]) for override react-script default config.
currently used for:
- apply typescript alias
- override config to generate server bundle
## SCSS Typing
css-module typing is a marjor problem for using typescript, so I used a helper library to do it.
[typed-scss-modules](https://github.com/skovy/typed-scss-modules) for generate scss.d.ts files to use for css module.
generate typing files use:
```
npm run scss
```
watch scss file changes auto-generate use:
```
npm run scss:watch
```
## Server Side Rendering
because this project used .net core to follow that we need to create a separated bundle for server, which current react-script does not support, so I did some hack
build in server mode when pass ``--server`` in ``react-app-rewire build``, the bundle will be built in server mode.
postbuild scripts to move the files from ``build`` to ``dist`` to avoid file clean up by second run of react-script.
``server.tsx`` uses ``aspnet-prerendering`` as interface wrapper for .net core use
## Redux Creator
[redux-creator](https://github.com/JiarongGu/banbrick-redux-creator) is a library I created for redux code-spliting, and also used for ssr. It will gives a simpler use for redux, also ``processLocationTasks`` and ``getEffectTasks`` to ensure the data is completely loaded when rendering server html.