https://github.com/ferrymehdi/ferry

Simple express middleware for server-side routing with React.
https://github.com/ferrymehdi/ferry

expressjs nodejs react react-dom routing

Last synced: about 2 hours ago
JSON representation

Simple express middleware for server-side routing with React.

• Host: GitHub
• URL: https://github.com/ferrymehdi/ferry
• Owner: ferrymehdi
• Created: 2024-02-22T10:39:41.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-06-06T14:21:49.000Z (5 months ago)
• Last Synced: 2024-06-06T17:13:24.745Z (5 months ago)
• Topics: expressjs, nodejs, react, react-dom, routing
• Language: JavaScript
• Homepage:
• Size: 5.86 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Ferry

Simple express middleware for server-side routing with React.

```

npm install ferry

```

# Usage

##1. Call `ferry.route` with your configuration in the express `app.use` function to use ferry as middleware.

```js

var Main = React.createFactory(require('./app/components/Main'));

var ferry = require('./ferry.js');

var app = express();

app.use(ferry.route({ /* config options */ }));

```

### ferry.route options

`ferry.route` accepts an options object, with 3 required parameters:

- `parentComponentFactory` is a React factory.

- `htmlPath` is the file path of the layout HTML file.

- `routes` is a JSON array of route objects consisting of a `path` and `componentFactory`.

```js

app.use(ferry.route({

    parentComponentFactory: Main,

    htmlPath: __dirname + '/public/layout.html',

    routes: [

        {

            path: '/',

            componentFactory: Home

        },

        {

            path: '/work',

            componentFactory: Work

        },

        {

            path: '/contact',

            componentFactory: Contact

        }

    ]

}));

```

##2. Put "ferryTemplate" (without quotes) in the your HTML file. Ferry replaces this string with the HTML generated by your react component factory.

```html

    


        ferryTemplate

    
 


```

# Running tests

`npm test`