React Redux Firestore Application Scaffold by

I’ve been pretty deep in the weeds of how redux works with react. Let’s zoom out and see how all the minutia we’ve learned could all fit together in a deployed app.

One of the things I really miss about Ruby on Rails is that it’s strongly opinionated. The Javascript ecosystem seems to prefer smaller configuration over convention, but this causes strong Javascript Fatigue in all the choices you have to make. I’ll be making some opinionated decisions here to hopefully reduce that fatigue.

My opinionated decisions (inspired by the Rails Doctrine) are:

  • static hosting and cloud functions are better than hosted applications: serving your app as a static bundle of html, css, and javascript means no 4am alerts that your server crashed and your entire app is down. Hosting static apps is practically free. Deploying static apps is usually just a git push or firebase deploy or aws s3 sync. Scaling is stupidly simple - just throw a CloudFront proxy in front of your host. next.js, Ruby on Rails, and Meteor don’t agree with this decision.
  • paying a premium for services that replace devops work is better than doing that work yourself: you know why I love coding? I get to make useful stuff. Configuring postgres or mongo databases so a VPS stops running out of memory from uncleared log files isn’t an activity I enjoy doing, it’s a necessary evil to get my stuff to work. If I can pay firebase to manage my authentication, database, and cloud functions so I can just focus on things that make my application unique, I’d much rather do that. I’d like to treat Heroku the same way, but the end result isn’t as good (I still have to think about how many instances - dynos - I need) and way more expensive.
  • almost every webapp will need a model CRUD, authentication, and routes: I love that next.js, Ruby on Rails, Meteor, and every other sane web framework come with routes baked in. I hate that there’s no standard way to persist models to a database in React/Redux land, and I hate that I can’t rails generate scaffold Person name:string age:integer and get every REST CRUD action and view with tests laid out for me. Let’s invest some time in creating sensible defaults to solve authentication, routes, and model persistence (CRUD) so we never have to think about it again (akin to the Rails Doctrine’s Convention over Configuration).
  • server side rendering is important for SEO on marketing pages, but not for the core application: it used to be that server side rendering was the only kind of rendering, so search engines work much better with server-rendered sites. This is changing (fetch as google will render some javascript-rendered sites), but in the interum can be fixed by statically generating marketing pages you want indexed by google. Server side rendering also makes pages load faster and makes it easier to create an API, but those both have easier solutions than adding universal rendering to our app.
  • re-inventing UI/UX components sucks: every project doesn’t need a new and unique design. It needs a custom logo and a distinctive color. People shouldn’t use things I make because my buttons look cool, they should use things I make because the business logic I’ve written makes their lives easier. Bootstrap used to be my go-to choice for pre-made UI components, but material-ui has much better built-in support for React.
  • popular tools are better than unpopular ones: I’ve spent a lot of time diving deep into technologies that didn’t pan out or do everything I needed them to. Experimenting is great, and being on the cutting edge is fun but for getting stuff done it’s safer to move forward with proven technologies. As of 2017 React is strongly more popular than any other javascript frontend option and Redux and Firebase are solidly popular choices.
  • 11 star authentication
  • TODO: function first vs. feature first folder organization; smart containers, dumb components, and modules directories

First, create a new app with create-react-app and add the redux, react-redux, redux-form, react-router-redux, and material-ui packages:

$ create-react-app blog
$ cd blog
$ yarn add redux react-redux redux-form react-router-redux material-ui@next material-ui-icons
$ cd src && mkdir actions components reducers
src/
├── App.js
├── index.js
├── store.js
├── actions/
├── components/
├── reducers/
│   └── index.js
└── registerServiceWorker.js

Forms

  • http://alexkuz.github.io/react-input-enhancements/
  • https://github.com/formsy/formsy-react/
  • https://github.com/andrewhathaway/winterfell

Todo:

  • ducks: https://github.com/goopscoop/ga-react-tutorial/blob/6-reduxActionsAndReducers/src/redux/modules/toDoApp.js
  • react-router-redux
  • redux-thunk

fbr generate component Blog title:string body:text public:boolean

generates component, redux actions, firebase connections, tests, and storybook files

Generators

https://github.com/react-boilerplate/react-boilerplate has generaters baked in https://github.com/amwmedia/plop https://github.com/terpiljenya/generator-redux-component


I believe firebase is create-react-app for the backend – fbr.teachable.com


Resources

  • http://www.penta-code.com/how-to-add-redux-to-create-react-app/
  • https://github.com/AndersDJohnson/firedux
  • https://github.com/btomashvili/react-redux-firebase-boilerplate
  • https://github.com/douglascorrea/react-hot-redux-firebase-starter

Layouts to copy

  • https://github.com/kriasoft/react-firebase-starter
  • https://github.com/tylermcginnis/re-base

Courses to take

  • https://www.leveluptutorials.com/
  • react and firebase: https://frontendmasters.com/courses/firebase-react/connecting-react-to-firebase/#
  • https://howtofirebase.com/
  • https://www.udemy.com/home/my-courses/collections/
  • https://withouttheloop.com/articles/2018-01-05-react-4-redux/
  • VSCode: https://frontendmasters.com/courses/visual-studio-code/
  • State management in React with Redux: https://frontendmasters.com/courses/react-state/
  • progressive web apps for offline: https://frontendmasters.com/courses/progressive-web-apps/
  • testing with React and Redux: https://frontendmasters.com/courses/testing-javascript/
  • https://egghead.io/courses/build-your-first-production-quality-react-app

Courses Taken

  • Firebase + react: https://fbr.teachable.com/courses/enrolled/250922
  • https://reactforbeginners.com/
  • https://www.reddit.com/r/reactjs/

Inbox

  • embed complicated multi-file examples: https://stackblitz.com/
  • https://www.reactboilerplate.com/
  • https://xkcd.com/1946/