git ssb

1+

dinoworm 🐛 / catstack



Tree:
📄.babelrc
📄.gitignore
📄.nvmrc
📄.python-version
📄.travis.yml
📄README.md
📄api.js
📁app
📁build
📁config
📁features
📄knexfile.js
📁migrations
📄package.json
📄proxy.js
📄render.js
📄static.js
README.md

business-stack

work in progress

real-world, production-quality stack for Craftworks

resources

stack

scripts

install

npm install

start

dev

starts development environment

npm run dev

prod

starts production environment

npm run prod

test

runs tests

npm test

test:spec

runs ava tests

can optionally take a glob

npm run test:spec -- './app/todos/**/*.spec.js'

default glob is ./app/**/*.spec.js

test:feature

runs cucumber tests

can optionally take a glob

npm run test:feature -- './features/todo.feature`

default glob is ./features/**/*.feature

lint

checks for standard style

can optionally take a glob

npm run lint -- './app/todos/**/*.js'

default glob is ./**/*.js ignoring node_modules

format

converts to standard if possible

can optionally take a glob

npm run format -- './app/**/*.js'

default glob is ./**/*.js ignoring node_modules

database

pg

to run a local postgres db with docker installed,

knex

run any knex command with npm run knex -- [command] [args]

for example, run latest sql migrations with

npm run knex -- migrate:latest

and generate new sql migration with

npm run knex -- migrate:make add_some_columns_and_stuff

directory structure

app entry points

our server code is run as separate processes, namely:

our client code for render is bundled using browserify, which similar to the server render process also uses react-dom, feathers-client, and more...

each server process has a separate url available to other entry points via the ./config

app modules

in contrast to frameworks like Rails which split our app into directories for each "type" of file (models, views, controllers), our app is split into directories for each module, where each module contains the various types of files within that module.

each module directory may contain any of:

FAQ

how do i do relations between models?

implement them in your getters.js file as selectors.

// app/groups/getter.js
import { createSelector } from 'reselect'
import { getMemberships } from 'app/memberships/getters'

export const getGroups = (state) => state.groups

export const getMembersByGroupId = createSelector (
  getGroups,
  getMemberships,
  (groups, memberships) => {
    const isInGroup = (group) => (membership) => {
      return group.id === membership.groupId
    }

    return Object.values(groups).map((group) => {
      return Object.values(memberships)
        .filter(isInGroup(group))
        .map((membership) => membership.memberId)
    })
  }
)

in the future, we should extract common relations into helper creators.

how to set default props

import React from 'react'

export default class Thing extends React.Component {
  static displayName = 'Thing'

  static defaultProps = {
    isAwesome: true
  }

  ...
}

how to set prop types

import React, { PropTypes } from 'react'

export default class Thing extends React.Component {
  static displayName = 'Thing'

  static propTypes = {
    increment: PropTypes.function
  }

  ...
}

how to bind functions to parent component when passing them down?

import React, { PropTypes } from 'react'

export class Parent extends React.Component {
  constructor(props) {
    super(props)
    this.state = { a: 0 }
  }

  render () {
    return <Child increment={this.increment} />
  }

  increment = () => {
    this.setState({ a: this.state.a + 1 })
  }
}

export class Child extends React.Component {
  static propTypes = {
    increment: PropTypes.function
  }

  render () {
    return <button onClick={this.props.increment}>click me</button>
  }
}

known issues

Built with git-ssb-web