Itsa-react-server: a React MVC framework

Building modern websites nowadays is complicated. Over the last years, many technologies raised, like React, Redux, Webpack, server side renderable pages, single page apps etc. Itsa-react-server is a framework that tries to make creating web applications as easy as possible, with the most powerful tools available. It is a node.js (hapi.js) MVC framework for building server side renderable single page applications (SPAs) based upon React.js.

Feature list

Itsa-react-server has a rich set of features, among which:

• React.js jsx pages
• Builds with Webpack3: chunks get generates automatically
• MVC driven
• Model data available on server and client
• Automatically serverside- and client side rendered
• Server can push new this.props to the clients
• Automatic client side routing, without React Router
• Build different pages for desktop, tablet and phones
• Easy Internationalization, CDN, authentication and cookie
• Server side ES7 support (with async await)

How it works

With itsa-react-server, React (or React fiber) Components define each web page. Actually, there is one basic template (a React component by itself) that has a container div in which all webpages will be rendered. When building a web application, you just need to build a suitable React component for every page. These components reside in a dedicated folder “views”. The (server-side) router needs to be set up routing the urls to the right view.

Because every view is a React Component, it needs the right “this.props”, which are generated by “models”. These models are created within a dedicated folder “models”, where filenames match the view filename. Models should return an object: the definition of “this.props”, which may be asynchronous by returning Promise.

On building the project, Webpack generates chunks for every view Component. At the client, the SPA doesn’t need a client-side router nor React-Router. The application “knows” about the server-side routing and replaces the default function of matching anchor-link click events: it will use Ajax request to retrieve the right Component, css and its this.props instead.

All initial pages are server side rendered. This leads into great SEO and doesn’t require the client to render before showing the page. To enable React.js its features, the client will do a re-render immediately once loaded, with the Component and “this.props” that were sent together with the page request. To catch user interactions before the page is re-rendered, itsa-react-server makes use of preboot, which captures and replays those events.

How to get started

Step 1

In order to create a new application, we designed itsa-cli. First, you need to install itsa-cli on your system globally. With this cli, you can create new applications. Assuming you already have node.js and npm on your system:

npm install -g itsa-cli

Step 2

Create a new web-application anywhere on your local system. From the console:

itsa create appname

Where appname becomes your project folder.

Step 3

Because the installation comes with a default skeleton, you can launch the Hello World! app from within your new created project folder:

npm run watch

Once the build is ready, open a browser: http://localhost:3001.

More information: https://itsaserver.io

In upcoming articles, I will tell more about how to build a web application with itsa-react-server and its features.