Skip to content

Home

Jump to bottom
William Goodall edited this page Mar 24, 2017 · 1 revision

Project Layout

The basic project layout is as follows:

  • server.py takes care of serving the frontend (static files built by Webpack) and the API
  • api.py is where all the API logic is
    • This includes user login/auth
    • Adding features will be in here or imported from here
  • lib/db.py takes care of Rethinkdb
    • like connecting to it
    • and setting up the initial tables (sort of like a migration, but low-effort)
  • Everything in client relates to the frontend
  • client/webpack.config.js sets up Webpack (our frontend build system). This takes ES6 JS files, SASS stylesheets, and React JSX and compiles them to a single bundle of standard JS and CSS which will (hopefully) work on all browsers.
  • Webpack also provides dev mode, which has live reload/HMR (As soon as you save, the page is updated without the need to refresh it)
  • client/index.jsx is a (mostly) blank HTML file which is served for all pages. All it does is load the JS bundle and give React a div to put everything in.
  • client/app/index.jsx is the entry point of the app (sort of like a main() method in C or Java). This starts everything up and binds the Router to the div in index.html.
  • client/app/routes.jsx configures the app's routing - this is where all the frontend routes are defined, so if you need to add a page do it here. It maps URLs to React components.
  • Everything in client/app/pages is a component which represents a page
  • Everything in client/app/components is a React component that's not a whole page.

Makefile

Here's what everything in the Makefile does:

Name What it does
setup This installs everything you need and sets up the development environment. It should work on mac and any Debian-flavored Linuxes.
db.start Starts Rethinkdb
db.setup Creates all the tables and indexes needed for the app to work. You have to have the DB running for this to work.
dev.server Starts the development backend. Run this with dev.client for dev work.
dev.client Starts the development frontend. Run this with dev.server. This works through webpack-dev-server, so the application will live reload - just save your changes and they should come up.
Clone this wiki locally