How to server side render with create-react-app and react-router



Today we’ll be taking a create-react-app application, implementing react-router, rendering it on the server, and finally, deploying to Heroku.

Here you can view the application (it’s on a free Heroku dino, so you’ll have to wait for the startup time of the Node server):
https://tutorial-december-2016.herokuapp.com/

Here you can view the source code of the application:
https://github.com/mini-eggs/Server-side-rendering-with-create-react-app-and-react-router

Happy coding!

Evan Jones
http://evansapps.com/
evanjones4040@gmail.com

Related Posts
React Static – 5 Minute Quick Start

Start coding your next static-progressive website or app with React-Static in less then 5 minutes!!! Includes: - Installation - Creating Read more

APP ANDROID e IOS com WORDPRESS, ANGULAR, IONIC e CORDOVA

Veja neste vídeo como criar uma APP ANDROID e IOS com WORDPRESS, ANGULAR, IONIC e CORDOVA utilizando a solução WordPress Read more

How To | Building an App to Text from your Computer with Android | Electron.js

Learn how to build an Electron.js application to be able to be able to access your Android texts from your Read more

Publish Your Own npm Module: Creating a Local Module (1 of 2)

Original post: http://mead.io/publish-an-npm-module/

24 thoughts on “How to server side render with create-react-app and react-router”

  1. Hey folks, at this point this video is very outdated. I don't recommend doing some things in this video in a production environment. Next.js is a great lib for doing ssr with React. Check it out!

    Reply
  2. hey am getting errors from my css.. any idea why ?

    .headingMain {
    | ^
    2 | font-size: 25px;
    3 | font-weight: 300;
    4 | color: #444;

    Reply
  3. Error: 'react-router' does not contain an export named 'browserHistory'.

    Solution:
    – change your react-router version to 3.2.0 in your package.json file

    Reply
  4. Great video. I love your code style as well. Remove semi colons, add space inside brackets and extra return inside code blocks.

    Reply
  5. It's not server-side rendering. It's server-side rendering just to render empty components. What about prefetching data from DB in server?

    Reply
  6. Very useful, thanks a lot! But as somebody has already said it would be really cool if the video was zoomed in because many people (including me, of course) watch it on relatively small laptop screens so it's very hard to see any coding

    Reply
  7. Very helpful, thanks for sharing. One question, how to use this with dynamic routes? ex. instead of /item use /item/:number?

    Reply
  8. Great tutorial, but it is currently outdated, because of the Router update… match function throws an error. Could you explain how to handle it? All the best!

    Reply
  9. would you be following up with a ssr tutorial that uses redux?
    server-side rendering + react-router + redux(Provider, Connect)
    that would be really helpful.

    Reply
  10. ser if you could zoom in on your code a little, that would be great. it's kind of hard to read -_-. thank you so much for the tutorial. got something up and running…feelsGoodMan

    Reply

Leave a Comment