paint-brush
Making CRA apps work with SSRby@zhirzh
2,916 reads
2,916 reads

Making CRA apps work with SSR

by Shirsh ZibbuNovember 7th, 2017
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

This series of posts is all about rendering react apps on the <a href="https://hackernoon.com/tagged/server" target="_blank">server</a> that were built using <a href="https://github.com/facebook/create-react-app" target="_blank">create-react-app</a>. The code is <a href="https://github.com/zhirzh/cra-with-ssr" target="_blank">here on github</a>.

Companies Mentioned

Mention Thumbnail
Mention Thumbnail
featured image - Making CRA apps work with SSR
Shirsh Zibbu HackerNoon profile picture

Make SSR simple again

I have updated the articles in this series for React v16. The code for older versions of react is now here on github.

This series of posts is all about rendering react apps on the server that were built using create-react-app. The code is here on github.

Part 1: Off to a simple start

A simple start with a barebones app that can’t even deal with CSS. It does help explain the process involved though.

Part 2: Adding support for static assets

Once the base system is up and running, it’s time to make it work with CSS (and other assets).

Part 3: Integrating Redux

It’s no surprise that redux is a popular choice for data management and it’s a must to have strong support for it in the server rendering pipeline.

Part 4: Routing with react-router

We’ll explore static and dynamic routing with react-router, along with handling route params and redux integration.

The “why” and The “how” Part

Ever since I came across React back in 2015, I have loved working with it. The experience was a massive paradigm shift. From cluttered, spaghetti jQuery to something more refined.

Eventually, I started feeling effects of “the” fatigue. Starting each new project required a ton of manual labour which always seemed tiny at first, but grew in size rapidly.

I started looking for a solution. Templates, boilerplates and fair chunk of generators later, I found create-react-app.

create-react-app

CRA was the solution I was looking for. In time, it became my goto starting point. Best of all, it plays pretty well with other projects from react ecosystem.

But by no means is it be all end all solution as CRA doesn’t support server rendering. Yet.🤞

Server rendering

I took all the bits and pieces I found and tried to put glue together into something that just works. This series is my way of documenting the process.