The goal of this guide is to share the core principles of how to use styled-components in a server side rendered React application. The beauty of styled-components really shines through when you realize how seamless it is to setup in your application. Furthermore, styled-components are easy to integrate into existing applications that are using other methods of styling.

In this guide there are no additional libraries such as Redux, React Router, or concepts such as code splitting — let’s start with the basics.

You can view the final working example at: https://github.com/Jobeir/styled-components-server-side-rendering, discuss this post at https://spectrum.chat/thread/b95c9ef2-20cb-4bab-952f-fadd90add391

Getting started by setting up our React app

Application structure

First, let’s take a look at how our application will be structured for this guide. We’ll need to have all our dependencies and scripts within package.json and our build step will be processed through webpack.config.js .

Beyond that, a single server.js file will handle our routing and serving of our React application. The client/ folder contains our the actual application in App.js , Html.js and index.js.

To get started, in a new empty folder of your choice, create an empty package.json by running:

npm init --yes or yarn init --yes

Then paste in the following scripts and dependencies shown below. The dependencies for this application include React, styled-components, Express, Wepback, and Babel.

Now that all our dependancies are accounted for and we’ve setup our scripts to start and build our project we can setup our React application.

1. src/client/App.js

App.js returns a div wrapping the 💅 emoji. It’s a very basic React component that we will be rendering into the browser.

2. src/client/index.js

index.js is the standard way to mount a React application into the DOM. We’re taking out App.js component and rendering it.

3. src/client/Html.js

What we have so far is a package.json that contains all our dependencies and scripts along with a basic React app in the src/client/ folder. This React app will be rendered as HTML through the Html.js file that returns a template string.

Creating the server

To render our app on the server we’ll need to setup express to handle the request and send back our HTML. With express already added, we can get right into creating server.

src/server.js

Configuring Webpack

This guide is focused on the very basics so our Webpack config is kept simple. We are using Webpack to build our React app in production mode and with Babel. There is a single entry point at src/server.js that will be ouput into dist/

Now we have enough to build and serve a server side rendered React application. We can run two commands and be ready.

First, run:

yarn build or npm build

Then to start application run:

yarn start or npm start

If it does not start you may need to add a .babelrc file in the root of your project.

Visiting http://localhost:3000 after a successful yarn build and subsequent yarn start

Adding styled-components

So far, so good. We’ve successfully created a React application that’s rendered on the server. We don’t have any third party libraries like React Router, Redux, and our Webpack config is straight to the point.

Next, let’s start styling our app with styled-components:

src/client/App.js

Let’s create our first styled component. To create a styled component import styled and define your component.

Adding a styled component into our App

2. src/server.js

This is where the biggest changes occur. styled-components exposes ServerStyleSheet that will allow use to create a stylesheet from all the styled components in our <App /> . This stylesheet gets passed into our Html template later on.

Adding 5 lines of code to server.js

3. src/client/Html.js

Adding styles as an argument into our Html function and inserting the ${styles} argument into our template string.

And that’s it! Let’s build and run our server side rendered React application with styled-components.

yarn build or npm build

Then to start application run: