lado v0.3.0

lado

A framework to declaratively create applications using any combination of the following:

• express
• graphql
• apollo
• react

Documentation is mostly non-existant at the moment, however the code is well commented and easy to follow.

Recommended Folder Structure

\
	\app
		\actions
		\components
		\containers
		\pages
		\reducers
		\styles
		client.js
		index.js
	\migrations
	\public
	\server
		\config
			app.js
			auth.js
			database.js
			graphql.js
			static.js
			views.js
		\controllers
		\models
		\repositories
		\schema
			\mocks
			\resolvers
			index.js
		\views
		index.js

Server

server/index.js

import path from 'path'
import lado from 'lado'

//have it load all files in the config folder
lado.configure(path.join(__dirname, 'config'))

//graphql middleware
lado.use('/graphql', lado.graphMiddleware())

//lado exposes all express methods, so you can basically
//just treat lado as an express instance
lado.get('/admin*', (req, res, next) => {
	res.render('index', {
		appScript: '/js/admin.js'
	})
})

lado.get('/*', (req, res, next) => {
	res.render('index', {
		appScript: '/js/app.js',
	})
})

lado.listen()

app/index.js

import React from 'react'
import { render } from 'react-dom'
import { ApolloProvider } from 'react-apollo'
import { Router, Route, IndexRoute, browserHistory } from 'react-router'
import { syncHistoryWithStore } from 'react-router-redux'

import {
  client,
  store,
} from './client'

const history = syncHistoryWithStore(browserHistory, store)

import AppContainer from './containers/AppContainer'
import Blog from './pages/Blog'
import Post from './pages/Post'

render(
  <ApolloProvider store={store} client={client}>
    <Router history={history}>
  	  <Route path="/" component={AppContainer}>
  	    <IndexRoute component={Blog} />
  	    <Route path="post/:slug" component={Post} />
  	  </Route>
  	</Router>
  </ApolloProvider>,
  document.getElementById('root')
)

app/client.js

import ApolloClient, { createNetworkInterface } from 'apollo-client';
import { createStore, combineReducers, applyMiddleware } from 'redux'
import ReduxThunk from 'redux-thunk'
import { routerReducer } from 'react-router-redux'
import { auth } from './reducers'

const networkInterface = createNetworkInterface('/graphql')

networkInterface.use([{
  applyMiddleware(req, next) {
    if ( ! req.options.headers) {
      req.options.headers = {};  // Create the header object if needed.
    }
    
    const TOKEN = typeof localStorage !== 'undefined'
      &&  localStorage.getItem('token')

    req.options.headers.Authorization = 'Bearer ' + TOKEN;
    next();
  }
}]);

const client = new ApolloClient({
	networkInterface,
	reduxRootKey: 'myStoreKey',
});

const store = createStore(
  combineReducers({
    auth,
    routing: routerReducer,
    myStoreKey: client.reducer(),
  }),
  applyMiddleware(client.middleware(), ReduxThunk.withExtraArgument(client)),
)

export {
	client,
	store,
}

export default client