Building a React Universal Blog App: A Step-by-Step Guide

Building a #ReactJS Universal Blog App: A Step-by-Step Guide  via @sitepointdotcom

  • The Cosmic JS official Node.js client to easily serve our blog content from the Cosmic JS cloud-hosted content API.
  • From we have a pretty basic working example of a blog app with a few different pages.
  • Using Node.js on the server and React on the client, we can build our JavaScript app to be universal (or isomorphic ).
  • // app-client.js import React from ‘react’ import { render } from ‘react-dom’ import { Router } from ‘react-router’ import createBrowserHistory from ‘history/lib/createBrowserHistory’ const history = createBrowserHistory() // Routes import routes from ‘.
  • In the step-by-step tutorial, made of two parts, I will show you how to build a React Universal Blog App that will first render markup on the server side to make our content available to search engines.

Tony Spiro shows how to build a React Universal Blog App that will first render markup on the server side to make your content available to search engines.

@K0YCHEV: Building a #ReactJS Universal Blog App: A Step-by-Step Guide via @sitepointdotcom

When we think of single page applications (SPAs) we think browsers, JavaScript, speed and, in my case, invisibility to search engines. This is because a SPA renders a page’s content using JavaScript and since web crawlers do not use a browser to view web pages, they cannot view and index the content. Or, to better say, most of them can’t. This is a problem that some developers have tried to solve in various ways:

Using Node.js on the server and React on the client, we can build our JavaScript app to be universal (or isomorphic). This could offer several benefits from server-side and browser-side rendering, allowing both search engines and humans using browsers to view our SPA content.

In this step-by-step tutorial, made of two parts, I will show you how to build a React Universal Blog App that will first render markup on the server side to make our content available to search engines. Then, it will let the browser take over in a single page application that is both fast and responsive.

Our universal blog app will make use of the following technologies and tools:

To start, run the following commands:

file and add the following content:

In this file you will notice that we’ve added:

property). We also use loaders to let Babel work its magic on our ES6 and JSX code. React Hot Loader is used for hot-loading (no page refresh!) during development.

Before we jump into React-related stuff, let’s get the look-and-feel of our blog ready to go. Since I’d like you to focus more on functionality than style in this tutorial, here we’ll use a pre-built front-end theme. I’ve chosen one from Start Bootstrap called Clean Blog.

file. Open the HTML file and add the following code:

, you can get them from the GitHub repository. Click here to download the files.

Generally I would use the fantastic React Bootstrap package and refrain from using jQuery. However, for the sake of brevity we’ll keep the theme’s pre-built jQuery functionality.

to our body. Then, we remove this class once React has mounted. It might sound a bit complicated, but I’ll show you how we’ll do this in a minute.

At this point, your app should have the following structure:

Now that we have our static pieces done, let’s start building some React Components.

Let’s begin building the UI for our app by setting up the pages for our blog. Because this is going to be a portfolio blog for a creative professional, our blog will have the following pages:

and add the following content to it:

file to be shared between our server and client entry points.

file:

From here we have a pretty basic working example of a blog app with a few different pages. Now, let’s run our application and check it out! In your terminal run the following commands:

Then navigate to http://localhost:8080 in your browser to see your basic blog in action.

and add this content:

we are loading the basic routes that we’ve set up. These are converting the rendered markup into a string and then passing it as a variable to our template.

, that will allow us to use ES6 in Node.js. Such file will have the following code:

We’re ready to start our server and view our code on it, but first, let’s create a script to do so.

section to look like the following:

script set up, we can run our code on both the server side and the client side. In your terminal execute:

Navigate in your browser to http://localhost:3000. You should see your simple blog content and be able to quickly and easily navigate through the pages in SPA mode.

. Notice our SPA code is there for all robots to find as well. We get the best of both worlds!

In this first part we’ve started digging into the world of React and see how we can use it, together with Node.js, to build a React Universal Blog App.

If you wish to take your blog to the next level and know how to add and edit content, don’t forget to read the second part. We’ll get into the real meat of how to easily scale our React Universal Blog App using React organizational concepts and the Flux pattern.

Great question Mark, thanks for reading! There are 2 different ways to render the content in a Universal app. Either you 1. dump all of the content into place on the page as well as a JSON object in a script tag, or 2. render the content server-side, then render it again client side. This tutorial shows you how to do the latter. For this (first part of the two-part series) the hidden class on the body is not needed. But it will be needed in the next part of the series. The hidden class will be removed with vanilla JavaScript after the content has loaded to prevent a flash when the React client code kicks in. I hope this explains it.

Building a React Universal Blog App: A Step-by-Step Guide