Snippod-Boilerplate is a webapp baseline sample program using react+flux and django REST architectures. This program was made for Snippod's baseline. We'd like to build this starter kit based on full stack single page web application architecture. Snippod's architecture used a this kind of technology, React + Flux (RefluxJS) + django REST framewrok + RDBMS. This stack is presented by diagram too.
You can check out the hosted version DEMO at http://snippod-boilerplate-dev.elasticbeanstalk.com/.
Frontside Snippod-Boilerplate is based on a Yeogurt Generator and a React news clone like Hacker news site.
Also serverside are maded by django REST framework.
We made this using these technologies.
- React
- Reflux
- Immutable js
- React Router v1.0.0-rc1
- Django and Djnago REST Framework
Preliminaries :
- Python 3.4
- virtualenv (optional)
- npm
You have to git clone this repository.
git clone https://github.com/shalomeir/snippod-boilerplate
In the 'snippod-webapp' directory './snippod_webapp/'
There are a few dependencies that this project relies on: Node.js (v.0.10.36), Grunt & Bower
npm install && bower install
In the 'snippod-server' Root directory './'
virtualenv venvsource venv/bin/activatepip install -r requirements.txtpython manage.py makemigrations && python manage.py migratepython manage.py createsuperuser
In the 'snippod-webapp' directory './snippod_webapp/'
grunt servefor previewing your site/app on a development server. (If you want live debugging, un-comment django dev setting file 69 line and install LiveReload chrome extension.)grunt buildfor build site/app for django 'collectstatic' command.
In the 'snippod-server' Root directory './'
python manage.py runserver
Almost main javascript source are located './snippod_webapp/client/scripts/' directory. Since, We'd like to apply node server for react server-side rendering, but didn't make yet.
This front side ajax call usually doing in Actions. Reflux provide async auto generation for action. We use this and Promise.
Django Rest framework provide browserble API. So you can see all get json by browserble API address too.
- account list: '~/api/v1/accounts/'
- post list: '~/api/v1/posts/'
- post list sorted by upvote count: '~/api/v1/posts/?sorting=upvotes'
- comment list: '~/api/v1/comments/'
- single account, post or comment like this '~/api/v1/posts/:postId/'
- user's posts or comments like this '~/api/v1/user/:userId/posts/'
More information is available at this blog post written in Korean.
Contributions, questions and comments are all welcome and encouraged.
Copyright 2015 Seonggyu Lee.