https://github.com/phenax/react-isomorphic
Isomorphic react + express app with server-side rendering and declarative isomorphic routing for both front-end and back-end.
https://github.com/phenax/react-isomorphic
Last synced: 3 months ago
JSON representation
Isomorphic react + express app with server-side rendering and declarative isomorphic routing for both front-end and back-end.
- Host: GitHub
- URL: https://github.com/phenax/react-isomorphic
- Owner: phenax
- License: apache-2.0
- Created: 2016-10-21T08:52:27.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-04-28T14:27:53.000Z (about 7 years ago)
- Last Synced: 2025-01-16T19:52:21.744Z (5 months ago)
- Language: JavaScript
- Homepage:
- Size: 205 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Isomorphic React Boilerplate
============================
Isomorphic react + express app with server-side rendering and declarative isomorphic routing for both front-end and back-end.
## Instructions
#### Starting the server
* ```git clone https://github.com/phenax/react-isomorphic.git```
* ```cd react-isomorphic```
* ```npm i```
* ```npm start``` (or ```npm run start:prod``` for production mode)
#### Building the client-side js files
* ```npm run build:js``` to build ./client.js to ./public/js/script.js
* ```npm run build:js:prod``` to build for production(with minification and tree-shaking)
## Routing
#### History API
There are 3 types of routing available - Backend routing(`new NodeHistoryAPI(request)`), Push State routing(`new HistoryAPI(options)`), Hash routing(`new HashHistoryAPI(options)`)(NOTE: The naming is just for consistency)
#### The Router
`history` is the history api instance you pass in depending on the kind of routing you require. (The server side rendering only works for Push State routing on the client side, not Hash routing).
```html
{allRouteDeclarations}
```
#### Declaring a route
If `Homepage` is a react component class and `/` is the url.
```html
```
* `path` (string or regex) - The url to route the request to
* `component` (React component) - The component to be rendered when the route is triggered
* `statusCode` (integer) - The status code for the response
* `caseInsensitive` (boolean) - Set to true if you want the url to be case insensitive
* `errorHandler` (boolean) - Set to true to define a 404 error handler