https://github.com/mrblueblue/isomorphic-react
an isomorphic react-flux/alt application using the twitter api
https://github.com/mrblueblue/isomorphic-react
Last synced: about 2 months ago
JSON representation
an isomorphic react-flux/alt application using the twitter api
- Host: GitHub
- URL: https://github.com/mrblueblue/isomorphic-react
- Owner: mrblueblue
- Created: 2015-07-05T00:05:27.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2015-07-12T05:10:12.000Z (almost 10 years ago)
- Last Synced: 2025-03-29T16:41:29.680Z (3 months ago)
- Language: JavaScript
- Size: 363 KB
- Stars: 7
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# isomorphic-react
An isomorphic React/Alt application that uses the Twitter API, React-Router, and ES6 Generators.
## Technology Stack
* *Client* - React and Alt (Flux)
* *Server* - Node/iojs/Express
* *Routing* - React-Router
* *Helpers* - Iso, node-geocoder
* *Build* - Webpack + Gulp
* *Dev* - Eslint, Babel
* *Templating* - Jade
* *Stlying* - Sass
## Overview
The application bootstraps server rendered React components onto the client. Making use of the React-Router as server middleware, each client-side route is also a server-route where boostrapping occurs.
This boostrapping technique where code is mirrored on both the client and server is colloquially (although not accurately) refered to as [isomorphism](http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/) (AKA ['Universal' JavaScript](https://medium.com/@mjackson/universal-javascript-4761051b7ae9)).
In this specific case, when a user navigates to a defined server-route, the server
1. grabs the appropriate data from Twitter,
2. 'hydrates' the Flux store,
3. renders the React component according to this data,
4. and lastly, sends an HTML string with all this in mind to the client.
## Running Locally
#### Dependencies
To run this project locally, you will need to first set-up several dependencies.
1. Create a `config.js` file in `src/api`.
* Use the API keys from [registering a Twitter application](https://apps.twitter.com/) and [registering a Google Maps application](https://developers.google.com/maps/documentation/javascript/tutorial).
* See the `example-config.js` for details.
2. Install `iojs`. You will need `nvm` first.
git clone https://github.com/creationix/nvm.git ~/.nvm && cd ~/.nvm && git checkout `git describe --abbrev=0 --tags`
Source it to activate nvm:
. ~/.nvm/nvm.sh
Then you can install and use iojs:
nvm install iojs
nvm use iojs
3. To get the rest of the dependencies:
npm install
npm install -g gulp
#### Building
To build the necessary files, run:
gulp
or
gulp build
#### Running
nodemon server.js
Go to `127.0.0.1:8080` to see the application in action.
## Application Structure
```bash
$ tree src
├── app.js # Express server
├── server.js # Server entry point file
├── public/ # Static files to be served
├── src/ # Application source
│ ├── routes/ # Application routes
│ │ ├── routes.express.js # Express routes
│ │ └── routes.react.js # React-router routes
│ ├── apis/ # APIs used by application
│ │ ├── config.js # API keys and auth
│ │ ├── google.js # Google API functions
│ │ ├── twitter.js # Twitter API functions
│ │ └── web.js # Server API functions
│ ├── actions/ # Flux actions
│ │ └── TweetActions.js # Actions that dispatch to the Tweet Store
│ ├── stores/ # Flux stores
│ │ └── TweetStore.js # Store for Tweet data
│ ├── components/ # React components folder
│ │ ├── ... # Collection of stateless ('dumb') components
│ │ └── controller-views/ # Route handlers (high-order components or 'views')
│ │ │ └── ...
│ ├── utils/ # Utility funcitons
│ │ ├── saveTwitterStream.js # Function that initializes saving tweets
│ │ ├── formatTweets.js # Function that transforms tweet collection
│ │ ├── handleTweetRequest.js # Express route middleware/handler
│ │ ├── worker.js # Reads and writes tweets to tmp folder
│ │ ├── run.js # Function that resolves generators for async
│ │ └── thunkify.js # Function that turns node function into a thunk
│ ├── styles/ # Sass styles folder
│ │ └── ...
│ ├── alt.js # Flux / Alt instance
│ └── client.js # Main React application file
├── tmp/ # Saved tweets directory
└── templates/ # Jade templates for rendering
```