A web-based platform for structured conversation. See docs.
##Docs for Major Components
Component | Dependency |
---|---|
Topic Map Provider | BacksideServletKS |
Database | RethinkDB |
Database schema | GraphQL |
Client validation | Joi |
Database hooks | GraphQL |
Forms | redux-form |
Client-side cache | redux |
Socket server | socketcluster |
Authentication | JWTs |
Auth-transport | GraphQL (via HTTP) |
Front-end | React |
Build system | webpack |
CSS | css-modules |
Optimistic UI | redux-optimistic-ui |
Testing | AVA |
Linting | xo |
Routing | redux-simple-router |
##Installation
brew install rethinkdb
...and run itbrew install elasticsearch
...and run itgit clone -b local-testing [email protected]:wenzowski/BacksideServletKS.git
ant && ./run.sh
...from the BacksideServletKS repo to start itgit clone
this repocd dialogue-map
npm install
npm run quickstart
##Client-side development
npm start
- http://localhost:3000
Rebuilds the client code in-memory & uses hot module reload so you can give a break.
##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
This mode enables changes to the server without to client code recompilation. That means you only wait for the server to restart!
##Database development
- http://localhost:8080 for RethinkDB
- All tables are managed in
./src/server/setupDB.js
. Just add your tables & indices to that file and rerun - A standard ORM might 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 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.
####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
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.
##Develop
docker-compose -f docker-compose.yml -f docker-compose.development.yml up --build -d
docker-compose -f docker-compose.yml -f docker-compose.development.yml run --rm web npm i
docker-compose -f docker-compose.yml -f docker-compose.development.yml run --rm web npm run db:migrate
docker-compose -f docker-compose.yml -f docker-compose.development.yml run --rm web npm run test
docker-compose -f docker-compose.yml -f docker-compose.development.yml down
##Deploy
docker-compose -f docker-compose.yml -f docker-compose.development.yml run web npm run build
docker cp `docker ps -aqf "name=dialoguemap_web_1"`:/app/build ./ # if your docker-machine is running remotely
docker build -t wenzowski/dialogue-map .
docker push wenzowski/dialogue-map
docker-machine create --driver digitalocean --digitalocean-access-token=$DIGITAL_OCEAN_TOKEN --digitalocean-size=2gb --digitalocean-region=tor1 dialogue-map.wenzowski.com
eval $(docker-machine env dialogue-map.wenzowski.com)
docker-compose -f docker-compose.yml -f docker-compose.production.yml up -d
docker-compose -f docker-compose.yml -f docker-compose.production.yml run --rm web npm run db:migrate
docker-compose -f docker-compose.yml -f docker-compose.production.yml logs -f
##License Apache 2.0