Good Implementation : Isomorphic react app + Python backend

Question

What is the best way to implement isomorphic react app using webpack with python as backend to serve

Following features are required to be implemented 1. React router 2. Redux store

Answer 1

By Isomorphic, I understand you mean both rendered on the server & on the client - so the first access of the site will return static HTML and a javascript bundle which then replaces the static HTML with the react-rendered version.

Usually this would mean running javascript on the server too with Node.js. This means you can render your JSX / React templates / components on the server and send them as static HTML to the user. If you're working with Python on the server, you cannot use your JSX / Javascript templating & logic on the server, so you'll need to duplicate it in Python.

So since you have to do it all twice - you first need to work out which one you want to do first. Either in Python first, or Javascript.

You can either start by building the whole application server-side-rendered, and then have javascript take over, or build a fully javascript application, and render the first views with Python.

Personally, for content-driven sites, I prefer building a server-side rendered application with Django (the most used Python Web Framework), and then adding Javascript on top once it's all fully working as a javascriptless site. This has the advantage of working even when javascript is disabled, and ensures you have good URLs, etc.

Of course, if it's a really complex application in terms of user interaction, you'll need to do it the other way.

I recomend looking into Django first, Here is a great tutorial from django-girls. However, if you want to go the mainly-JS route, here's some ideas:

Javascript First

Probably the best way is to first design your data structure(s), and make a REST api for your data. (e.g. /api/1.0/cars/rustbucket_94 which sends JSON data.)

Next, figure out your user-facing URL schema, and work out which REST endpoints need to be pulled in to get those pages. (How the URLs should look to the end users. e.g. /cars/rustbucket_94.html)

Design your React app as normal, using those REST / JSON endpoints, and the react router to show it correctly.

Once you have your whole react app working, you can now build a server-side rendered version of the whole thing, which you'll need to re-implement from scratch, and can either access the data through the JSON endpoints (slow) or by making the queries itself inside the pages.

The Python side

Which Python Framework to use on the backend?

I'd recommend Django to start with. It's very capable and can do ANYTHING you want it too. You probably need the Django REST framework too. There are other options available, but this will be the quickest way to get something secure and sane running.

Getting Django to work nicely with your webpack / react workflow is not too complex. There are projects like Django-Webpack-Loader and various tutorials about it online showing how to use it.

Good luck.