Over the past few years, the Web community has been abuzz with “isomorphic apps”. They are apps where the markup is rendered on the server and fed to the browser as complete HTML, and the successive user interactions are handled by client side rendering. This is useful as it lead to outcomes like faster page loading, better search engine indexing, and better user experience. In this tutorial, we’ll crate a simple isomorphic app that uses Node, React, and Express to understand the underlying process behind it.
The Tech Stack
In this article, we’re going to use following software:
- React: the UI framework that can rendered on both server and client.
- webpack: a module bundler to be used for bundling JavaScript.
- Express: the application server framework for Node.js.
- react-router: the routing solution specially developed for React.js.
- Babel: the JavaScript compiler with built-in support for ES2015 syntax and JSX.
- Jade: a JavaScript powered templating engine that works on both server and client side.
Project Setup
Let's start the project by upgrading to Node v.0.12.6 and creating an empty directory that will act as our project folder. Once done, run the npm init command in the newly created directory and fill up the presented questions. The next thing we need to do is to install all the required packages. Execute the following command to achieve this task:
$ npm install --save-dev babel babel-loader express jade react react-hot-loader react-router webpack webpack-dev-sever nodemon
When the installation process is completed, we have to create a src folder inside our project folder. Then, we have to create the following directories inside src:
server: where the backend Node.js server and webpack dev server will reside.client: this will be the entry point to handle React bundle.shared: this folder will hold app's components, flux, routes, etc.
Continue reading %Creating Isomorphic Apps with Node.js, React, and Express%
by Preetish Panda via SitePoint
Weekly