Development, in-depth documentation
- MEAN stack, seeded originally with MEAN.js boilerplate: MongoDB, ExpressJS, AngularJS v1, NodeJS. Additionally stuff like Bootstrap, Leaflet etc.
- [[Database]] scheme (look for
*.server.model.jsproject files to check most up to date info)
- We’re migrating the client to React. Read a migration guide.
The mobile app
We have a React Native app for Android written in ClojureScript: https://github.com/Trustroots/Trustroots-React-Native
- Project has .editorconfig file, we recommend to download extension for your IDE.
- Build script checks all the files against our ESLint rules. Fix errors before submitting PR.
- Indentation with 2 spaces
- Beginning brace on the same line as the beginning statement
- File names use dash to separate words. For example: foo-bar.js
- Use camelCase for identifiers. Functions and variable names should be named like
- See Angular 1 Style Guide
- We use LESS CSS for CSS.
- Build as generic modules as possible. Rather
CSS class names
- Name reusable bits of layouts by module names and keep them out of page styles, (eg.
.group-badgecan be used in multiple places around the site.)
- Related elements within a module use the base name as a prefix. For example module
- Prefix state rules with
Convention is as follows:
- Url has the plural like
- The id is the singular name followed by
- The route with the id is called nameSingle like
- Template name matches route name
- Nested routes are simply concatenated like
messagesThread- deviates because it is
Slowly getting there. Any help/experiences appreciated! #228
…mainly to test Mongo models (example).
…as well some critical bits of Angular frontend (example).
… mainly for the API routes (example).
End-to-end tests with Selenium
We have a free Automate account with Browserstack (#199, blog) — this is offered to us for free since we’re an open source project. This makes it very easy for us to test the project on tons of different browsers on various platforms, including MSIE.
Written in Python, using Selenium (#225).
(Selenium tests are currently out of date.)
npm testfor everything,
npm run test:serverfor Mocha tests,
npm run test:server:watchsame with watching,
npm run test:clientfor testing Karma-unit tests and
npm run test:seleniumto run Selenium tests. Requires Python. Make sure Trustroots is running already as this task won’t spin it up first. This task isn’t included in the main test task. If you want to pass custom domain to test for Selenium you can do so by running:
python ./scripts/selenium/test.py http://dev.trustroots.org/
You might want to read the folder structure to get a handle on how things are laid out. A quick summary:
modules/contains one folder for each “component” of the site, this is where most of the interesting stuff lives
modules/**/server/contains all the backend, server side stuff
/modelsdefines the Mongoose models. There are only a few, so it might be worth scanning them to understand the data model. For in depth description, see [[database]].
/controllersas you’d expect, Express controllers live here.
/routeslinks url paths to controllers
/testsdefines tests run server side
/jobsAgenda job scheduler (~cron) jobs (see config/lib/agenda.js for more)
modules/core/server/viewscontains email templates and initial rendered index.html
modules/**/client/contains all the client side stuff
modules/core/client/app/lesscontains the site wide style variables and
application.lessfile which includes rest of the modules.
/lessis where you’ll find CSS styles in LESS format. Each module should have .less file with the module name, which then includes rest of the less files from the same folder. E.g.:
modules/messages/client/app/less/messages.lesswhich then includes
thread.lessfrom the same directory.
/viewsis where you’ll find templates
/servicesis where you’ll find Angular service, mostly for connecting to REST API points
/configcontains the client side routes and other configs
/directivescontains the Angular directives
/controllerscontains the angular client side controllers
config/ta-da, configs! Server side.
/assetsDefines paths for assets (serverside JS, frontend CSS/JS/LESS, lib files etc)
/lib/envprimary config files. Don’t modify anything else here except
/lib/env/local.jsfile overriding other
env/*files. Put here your adjustments you don’t want have publicly at the repo (it’s git-ignored).
/lib/agenda.jsAgenda job scheduler (kinda like cron)
bower.jsfrontend packages, managed with Bower
package.jsbackend packages, managed with NPM
fontello.conf.jsconfig for icon font. Drag it to Fontello to edit.