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