Feathers (feathersjs) and React server side rendering

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

 

May 1st, 2017

  • Appreciation to my fatһer who statеd to me on the topic of this web site,
    this website is гeally awesome..

  • My husband and i have been quite fulfilled when John could carry out his investigations while using the precious recommendations he gained from your own blog. It is now and again perplexing to simply always be offering tricks which usually most people may have been making money from. So we know we now have the writer to be grateful to for that. The most important explanations you have made, the simple website navigation, the relationships your site make it easier to create – it’s everything fabulous, and it’s really aiding our son in addition to our family reckon that this issue is awesome, which is seriously vital. Many thanks for all!.

  • I抎 need to check with you here. Which isn’t something I normally do! I enjoy reading a post that may make individuals think. Additionally, thanks for allowing me to remark!.

  • A powerful share, I simply given this onto a colleague who was doing just a little analysis on this. And he in fact purchased me breakfast because I discovered it for him.. smile. So let me reword that: Thnx for the deal with! However yeah Thnkx for spending the time to discuss this, I really feel strongly about it and love reading more on this topic. If potential, as you change into experience, would you mind updating your weblog with extra particulars? It is extremely helpful for me. Huge thumb up for this blog submit!.

  • My spouse and i have been very happy Jordan managed to conclude his basic research by way of the precious recommendations he acquired out of the site. It is now and again perplexing to simply find yourself offering secrets and techniques which often people today may have been selling. We grasp we need you to appreciate because of that. The type of explanations you’ve made, the simple site menu, the relationships you can aid to create – it’s got all spectacular, and it’s letting our son in addition to our family reckon that that theme is interesting, which is wonderfully fundamental. Thanks for the whole thing!.