Tuesday, 2 May, 2017 UTC


These days server side rendering has become an important feature for heavy client side applications and now most of the client side frameworks support it. In this article we focus on Server Side Rendering React on Feathers (Feathersjs) server. Featherjs is a node.js framework and is one of the best growing express.js based distributions. You can find out about the express.js where it is listed first (https://expressjs.com/en/resources/frameworks.html). Thanks to this framework You can build prototypes in minutes and production ready real-time apps in days. Seriously You can create incredible apps in record time. Additional You can find out about this by example of production applications listed on https://docs.feathersjs.com/ecosystem/readme.html

What makes Feathers so special:

Modern, solid, and 100% JavaScript – Built using promises and ES6 features, Feathers is a tiny, fully compatible wrapper over Express and Socket.io, both of which have been used in production by thousands of companies.
Universal – Feathers can be used in the browser, React Native and server side with Node.js. Using the Feathers client you can quickly add authentication, share code between your server and client, and easily make your apps real-time.
Framework Friendly – Feathers easily integrates with any client side framework. Whether it be Angular, React, or VueJS it doesn’t matter! It plays especially well with React and React Native. They’re practically BFFs.
Service Oriented –Feathers gives you the structure to build service oriented apps from day one. When you eventually need to split up your app into microservices it’s an easy transition and your Feathers apps can scale painlessly.
Instant Real-time REST APIs – Feathers provides instant CRUD functionality via Services, exposing both a RESTful API and real-time backend automatically through Socket.io or Primus.
Datastore Agnostic – Feathers has adapters for 15+ data sources out of the box, including MongoDB, Postgres, RethinkDB and S3. You can have multiple datastores in a single app and swap them out painlessly due to our consistent query interface.
Flexible Plugins – Feathers is a “batteries included but easily swappable framework”. We have entirely optional plugins that allow you to implement 300+ Passport authentication providers, Passport authentication providers, flexible authorization permissions and things like SMS or email messaging out of the box. Include exactly what you need. No more, no less.
More information about this amazing framework You will find on feathers homepage
Assumptions and Benefits our project:
  • Design and build modular applications based on components in React.js
  • Use server side rendering of React with handle routing on feathersjs server
Below presented skeleton/project You can find on my GitHub repository: https://github.com/maxprog/feathers.js-react.js-server-render-side
Structure of directories is following:
  1. Expanded structure directories of feathers:
  1. Expanded structure directories of React.js:
The most important:
In case of catalogs structure:
  1. /src – feathers source code of server
  2. /views – views with main page index.html and rendered react client cont
  3. /public – static files e.g. bundle.js
  4. /src/client – React.js directory
Feathers server side:
In case of present rendered html we will use ejs engine module on the server side and index file with extension .html instead of default .ejs. In order to configure the ejs module on the server side we put the following configurations:
In index.html <%- markup -%> is  responsible for display returned rendered generated html from server side.
In main server file (e.g. server.js) You have to place babel modules by require(‘babel-core/register’); responsible for handle react.js to avoid errors like unexpected error or invalid character  (<App ..>)  in case of parse language composition of .jsx
All necessary modules to handle react and babel source codes are:
npm i --save react react-dom react-router babel-register
npm i --save-dev babel-cli babel-core babel-preset-es2015 babel-preset-react babel-preset-stage-0 webpack babel-loader
After installation You have configure .babelrc config file – If You missing this configuration then You will have a lot of errors
And now MOST IMPORTANT PART OF OUR SOLUTION – server side rendering:
Please pay attention on few things: to configure all request paths don’t use * like in express.js – because feathers doesn’t handle this issue like express. If You will apply * then server will always return root path ‘/’ also for routh path used in react, and our project will be work in incorrect way. Instead of * you have to:
You can serve routing by two alternatives lines:
In case of first one line You have to use react file like
This way can separate all react instructions in /client directory
The last operation it is installation process all necessary modules:
  1. Install the all necesary modules and packages in project directory
    npm install
  2. Start the server from the root directory of project
  3. npm start
  4. Visit http://localhost:3030
In console of Feathers server You can see generated html of react by server side