Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Minor Fix to format of README.md #181

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 14 additions & 14 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ Some of my chief complaints with Meteor
| Routing | [FlowRouter](https://github.com/kadirahq/flow-router) | [react-router-redux](https://github.com/reactjs/react-router-redux) | stick the route in the state, react-router SSR, async routes |
| Server | Node 0.10.41 | Node 5 | Faster, maintained, not a dinosaur... | |

##Installation
## Installation
- `brew install rethinkdb`
- make sure you are using [email protected] (not a v1 installed globally)
- `rethinkdb` (in second terminal window)
Expand All @@ -45,14 +45,14 @@ Some of my chief complaints with Meteor
- `npm install`
- `npm run quickstart`

##Client-side development
## Client-side development
- `npm start`
- http://localhost:3000

Rebuilds the client code in-memory & uses hot module reload so you can develop super fast!
On my 2013 MBA an initial build takes about 8 seconds and updates usually take 800ms

##Server-side development
## Server-side development
- `npm run prod`
- http://localhost:3000
- If you edit any client or universal files, run `npm run bs` to rebuild & serve the bundle
Expand All @@ -66,29 +66,29 @@ That means you only wait for the server to restart! GAME CHANGER!
- A standard ORM would check for tables & ensure indices at least once per build, doing it this way keeps your build times down
- http://localhost:3000/graphql for testing out new queries/mutations

##Webpack configs
####Development config
## Webpack configs
#### Development config
When the page is opened, a basic HTML layout is sent to the client along with a stringified redux store and a request for the common chunk of the JS.
The client then injects the redux store & router to create the page.
The redux devtools & logger are also loaded so you track your every state-changing action.
The routes are loaded async, check your networks tab in chrome devtools and you'll see funny js files load now & again.
If this isn't crazy amazing to you, then go away.

####Production config
#### Production config
Builds the website & saves it to the `build` folder.
Maps the styles to the components, but uses the prerendered CSS from the server config (below)
Separates the `vendor` packages and the `app` packages for a super quick, cachable second visit.
Creates a webpack manifest to enable longterm caching (eg can push new vendor.js without pushing a new app.js)
Optimizes the number of chunks, sometimes it's better to have the modules of 2 routes in the same chunk if they're small

####Server config
#### Server config
A webpack config builds the entire contents of the routes on the server side.
This is required because node doesn't know how to require `.css`.
When a request is sent to the server, react-router matches the url to the correct route & sends it to the client.
Any browser dependency is ignored & uglified away.
To test this, disable javascript in the browser. You'll see the site & css loads without a FOUC.

##How it works
## How it works
When the page loads, it checks your localStorage for `Meatier.token` & will automatically log you in if the token is legit.
If not, just head to the 'Sign up' page. The 'Sign up' page uses redux-form, which handles all errors, schema validation,
and submissions. Your credentials are set as variables in a GraphQL mutation & sent to the GraphQL endpoint and a user document (similar to Meteor's) and authToken is returned to your state.
Expand All @@ -110,26 +110,26 @@ The kanban lane titles & notes are really basic, you click them & they turn into
The notes can be dragged from lane to lane. This is to showcase a local state change that doesn't affect the persisted state.
When the note is dropped to its new location, the change is persisted.

##Tutorials (not for beginners...but then again, neither is meatier)
## Tutorials (not for beginners...but then again, neither is meatier)
- [A production-ready realtime SaaS with webpack](https://medium.com/@matt.krick/a-production-ready-realtime-saas-with-webpack-7b11ba2fa5b0#.bifdf5iz8)
- [GraphQL Field Guide to Auth](https://medium.com/@matt.krick/graphql-field-guide-to-auth-ead84f657ab#.f3tg2sf3d)

##Similar Projects
## Similar Projects
- https://github.com/erikras/react-redux-universal-hot-example (Really nice, but no auth or DB)
- https://github.com/kriasoft/react-starter-kit (nice, I borrowed their layout, but no sockets, no DB)
- https://github.com/GordyD/3ree (uses RethinkDB, but no optimistic UI)
- http://survivejs.com/ (A nice alt-flux & react tutorial for a kanban)

##In Action
## In Action
I don't know of any place that hosts RethinkDB for free...so here's a gif.
![Meatier](http://i.imgur.com/B3IErZr.gif)

##Contributing
## Contributing
- Pull requests welcomed!
- Use the gitter for any questions
- No donations necessary (but if you know of any jobs that'll let me move back to San Diego, let me know :wink:)

##Changelog
## Changelog
- 0.10
- Use the redux devtools chrome extension
- Update just about all the deps
Expand All @@ -144,5 +144,5 @@ I don't know of any place that hosts RethinkDB for free...so here's a gif.
- Add graphiql (http://localhost:3000/graphql) as a component & pattern to create an admin site
- Break out auth, landing page, kanban page, and admin into 4 separate modules in the folder hierarchy

##License
## License
MIT