The ultimate React SSR, Redux-powered example.

Overview

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

Todos

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

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

Have fun!

Releases(v0.0.0)
Redux-Toolkit example with React Hooks CRUD Application, Axios, Rest API, Bootstrap

Redux-Toolkit example with React Hooks CRUD Application, Axios, Rest API, Bootstrap

null 19 Jan 10, 2022
An example real-world Redux CRUD application with no boilerplate

Zero Boilerplate Redux A common criticism of Redux is that it requires writing a lot of boilerplate. This is an application that is meant to show a so

James 17 Oct 24, 2020
A Higher Order Component using react-redux to keep form state in a Redux store

redux-form You build great forms, but do you know HOW users use your forms? Find out with Form Nerd! Professional analytics from the creator of Redux

Redux Form 12.6k Jan 18, 2022
A simple app for study react with redux, redux saga and typescript.

React com Redux, Redux-Saga e TypeScript. ?? Uma aplicação simple para entender o funcionamento do Redux e a melhor maneira de utiliza-lo junto com o

João Marcos Belanga 1 Jan 5, 2022
Redux - Create forms using Redux And React

Exercício de fixação Vamos criar formulários utilizando Redux! \o/ Antes de inic

Márcio Júnior 3 Jan 5, 2022
redux-immutable is used to create an equivalent function of Redux combineReducers that works with Immutable.js state.

redux-immutable redux-immutable is used to create an equivalent function of Redux combineReducers that works with Immutable.js state. When Redux creat

Gajus Kuizinas 1.9k Dec 16, 2021
A chart monitor for Redux DevTools https://www.npmjs.com/package/redux-devtools-chart-monitor

Redux DevTools Chart Monitor This package was merged into redux-devtools monorepo. Please refer to that repository for the latest updates, issues and

Redux 298 Dec 18, 2021
An i18n solution for React/Redux and React Native projects

redux-react-i18n An i18n solution with plural forms support for Redux/React Workers of all countries, unite! Supported languages list with expected co

Dmitry Erzunov 63 Sep 30, 2021
Official React bindings for Redux

React Redux Official React bindings for Redux. Performant and flexible. Installation Using Create React App The recommended way to start new apps with

Redux 21.7k Jan 18, 2022
Ruthlessly simple bindings to keep react-router and redux in sync

Project Deprecated This project is no longer maintained. For your Redux <-> Router syncing needs with React Router 4+, please see one of these librari

React Community 7.9k Jan 15, 2022
A Soundcloud client built with React / Redux

SoundRedux NOTE It seems that SoundCloud has revoked my api client keys without any explanation or warning. Running the app locally no longer works un

Andrew Nguyen 5k Jan 19, 2022
Front-end of the movie application created with React.js and Redux

# Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run:

Bibi 6 Aug 21, 2021
Recipe Catalogue is a React & Redux web app based on a catalog of recipes.

Recipe Catalogue is a React & Redux web app based on a catalog of recipes. It contains a browsable list of meals that you can filter by category or type and access to one meal recipe. The data is retrieved from [Meals DB (https://www.themealdb.com/api.php) and then stored in the Redux store.

John, Uduak Peter 11 Dec 3, 2021
This command line helps you create components, pages and even redux implementation for your react project

react-help-create This command line helps you create components, pages and even redux implementation for your react project. How to install it? To ins

Omar 20 Nov 16, 2021
A sample React TypeScript Redux Toolkit CRUD app

A sample React TypeScript Redux Toolkit CRUD app

Roger NDUTIYE 9 Jan 2, 2022
Notas de estudo sobre o workflow de implementação do React Redux Toolkit.

Resumo: Redux Toolkit Este projeto foi criado com Create React App, usando o Redux e Redux Toolkit como modelos. Documentação: https://redux-toolkit.j

Thomas Ferreira 8 Nov 26, 2021
Pomofocus clone built with React, Redux, & Firebase [WIP]

Pomofocus Clone Pomodoro Timer Pomofocus is a customizable pomodoro timer that works on desktop & mobile browser. The aim of this app is to help you f

Usman Suleiman Babakolo 19 Jan 12, 2022
Single page application for tracking cryptocurrencies. Includes sorting, animations, graphs and more. Made using React & Redux.

Crypto Tracker A single page application meant to keep track of the most popular crypto currencies status. The user can sort the coins by highest gain

Robert Baiesita 16 Oct 24, 2021
SimpleGithub on React/redux

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: ya

Dmitry 1 Oct 30, 2021