Code Monkey home page Code Monkey logo

feathers-react-mobx-iso-boilerplate's Introduction

feathers-react-mobx-iso-boilerplate1

Note

This repo is a continuation of feathers-react-iso-boilerplate, if all you need is an isomorphic feathers react boilerplate you can use git to checkout commit 38bc50ea16f2eab92b5c2bc021ee30771becc920 if the other boilerplate is not available.

Setup

After cloning repo you first need to mkdir static-assets/js/ and build the JS files with npm run minvendor and npm run minjs before you run npm start for the first time. Git won't track empty directories, and I try not to track generated files because it would greatly increase the size of my repo.

React Server Rendering

Dead simple rendering with a custom router and a few components. The conventional wisdom seems to be use a templating engine on top of React, but renderToStaticMarkup is basically the same, so I use it to render my document template. (at least as of this writing, not sure when that was introduced)

Configuration

Routes config ./src/routes.js Routes paths ./src/components/pages An example of usage is already in each of those destinations.

Client Router

  • Dead simple custom router on the client connects the client React code to the already server rendered React elements.
  • Added ./src/components/utils/Link.js Abstracts links and prevents their default behavior so that when JS loads, the router can take over. These are to be used for all internal links. Should be compatible with react-router as of this writing.
  • renamed all <a /> tags to <Link /> components.

MobX

Isomoriphic usage is domonstrated on the index page: add data, remove data with actions; use of computed to search within the data we already fetched, etc

Persistant data-store in ./src/stores/data.js. with Mongodb Demonstrates

  • @observable
  • @computed
  • @action

Store is consumed in ./src/components/DataList.js, with provider in ./src/components/pages/index.js. Demonstrates

  • Provider
  • inject
  • observer

All files involved with rendering are going to be accessed on the server and client, so to make sure the service doesn't try anything funny on the server we initialize the function (setupDataStore) that integrates the service into the MobX store from the client router.

setupDataStore :

  • connect event listeners for [ created , patched , removed ] to the store (client only)
  • set initial state by populating from the service

Scripts

script use
start use nodemon to monitor dev server in ./src/server.js
watchjs browserify client script with watchify (continuous monitoring). entry point: ./src/lib/router.js exports vendor scripts: [ react , react-dom , mobx , mobx-react ]
go run dev server without nodemon (faster version for only working on client files) and launches watchjs
minvendor bundle vendor scripts (minified) as separate from custom code bundle for better caching
build-server transpile server code to node compatible js in ./dist for more efficient node environment
minjs minifies custom code into a bundle (excluding vendor code). endtry point: ./src/lib/router.js
prod launch node server in ./dist/server.js with env=production and store the PID in pid.txt
kill read PID from ./pid.txt and end (only used if running server with prod)

feathers-react-mobx-iso-boilerplate's People

Contributors

aallen-dev avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.