Redux server-side

The ultimate React SSR, Redux-powered example.

But why?

Does any of the following sentences describe your SSR adventures?

You'd love to introduce SSR in your project yet you're scared by the level of vendor lock-in that comes with Next.js or Gatsby.
You've got what it takes to implement SSR yourself, yet the sheer awareness of the amount of work needed makes you procrastinate.
You're looking for a good SSR example on the web yet they're all either overly complex (half of the code being webpack configuration mess), or oversimplified (a crappy demo).

It does? You're in the right place. Keep on reading.

The app

Surprise, surprise - this example implements a well-known, "todo app" concept. Nothing interesting, you say? Well, I say it's got some pros:

no domain knowledge required (how many todo apps have you built so far? 10? 20?)
a fair amount of implicit complexity (sync stuff, async stuff, routing, storage, race conditions)
once you familiarize yourself with the SSR implementation, you can use it to plan implementing yours; how cool is that?

The app uses monorepo structure for better separation and to ease code reuse, along with simple automation to make your life easier. It consists of the following packages:

@rss/app - This is the core package. It holds components (used both on the client and on the server), routes and services.
@rss/client - The client-side package. It encapsulates all the code needed to render (match routes, resolve dependencies, handle errors) the app in the browser.
@rss/server - A simple Express-based server. Apart from routing, resolving dependencies and putting together HTML responses, it also exposes API for the client.
@rss/state - All the state-related code resides here as it's shared between client and server. Types, redux-related boilerplate, store utils - it's all there.
@rss/db - A database server. This sounds like computer science, yet we're just talking about a JSON Server instance. More than enough for an example app.
@rss/shared - Remaining common chunks. Utility functions and types. Stuff that's shared across, yet doesn't really belong into any of the aforementioned packages.
@rss/prettier - Shared Prettier configuration. Read more on sharing configuration here.

Setup

Prerequisites

Make sure you've installed the latest stable versions of Node.js and Yarn.

Running the app

Clone the repository.
Run yarn from the root directory to install all dependencies.
Copy .env.example into .env (the defaults will work just fine but feel free to tweak them if needed)
Run yarn allthethings. This is gonna clean, build, lint and start the app.
In your web browser, navigate to http://localhost:<port> (you'll find the port number under SERVER_PORT inside .env; it defaults to 4000)