Tuesday, 18 April, 2017 UTC

Asynchronous React Component and Server Side Rendering React on Total.js server

Asynchronous React Component and Server Side Rendering React on Total.js server

Summary

Today we will focus on Asynchronous React Component to communication with REST API and  react server side rendering on total.js.
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 total.js server
  • Use Asynchronous React Component to communication with REST API Total.js server
Below presented skeleton/project You can find on my GitHub repository: https://github.com/maxprog/total.js-asynchronous-react.js-server-render-side.git
Structure of directories is following:
  1. Expanded structure directories of total.js:
  1. Expanded structure directories of React.js:
The most important:
In case of catalogs structure:
  1. /client – React.js directory
  2. Remaining directories – Total.js
In case of configuration Total.js:
You have to define React.js directory in config file to block  total.js process  of compiling script – for this process will be responsible Webpack and React.js
If You want use /public to storage css, img or another files then You have change “directory-public” to correct directory e.g. /public/

Please remember about placing @{layout(”)}  in index.html and pay notice on line
@{self.content(model.markup, ‘text/html’)}  responsible for display returned rendered generated html from server side. This is very important.. If You will use another instruction like @{model.markup} then in browser You will see row html text
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
To asynchronous communication both on total.js and React side You have to add async-props module
npm i --save async-props
To asynchronous communication on client side – React.js will be necessary isomorphic-fetch
npm i --save isomorphic-fetch
After installation You have configure .babelrc config file – If You missing this configuration then You will have a lot of errors
MOST IMPORTANT PART OF OUR SOLUTION – server side rendering will be placed in default.js controller:
 
Please pay attention on used async library async-props and changes related with render process where we use additional properties asyncProps with renderProps
Second server controller called as api.js will contain REST API logic and will be responsible for sending data to client
This properties asyncProps with renderProps You have to pass to routerContext.js file and perform modification to use async-props module
 
To communication react client with rest api our server we will use service with implemented isomorphic-fetch module responsible for asynchronous communication with our total.js server
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. node server
  4. Visit http://localhost:8000
  5. That’s all – Now You can create Amazing and Professional SPA applications
In console of Total.js server You can see generated html of react by server side
In terminal server You can see all traffic related with Rest API and rendered generated html by server

... more @ maxprog.net.pl

maxprog.net.pl