Development, in-depth documentation
- MEAN stack, seeded originally with MEAN.js boilerplate: MongoDB, ExpressJS, AngularJS v1 (we’re migrating to React), NodeJS. Additionally stuff like Bootstrap v3 for component styles, Leaflet for the map, 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 basic Webview app written in React Native and Expo.io which mostly just gets you push notifications and an icon on phone’s screen. :-)
- We have in-the-works React Native app.
- 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 and add integration for your IDE.
- Prettier codeformatter is configured so you might want to install integration for your IDE.
- File names use dash to separate words. For example: foo-bar.js (except for React Components
- 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 and re-usable components 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).
Clientside Component tests
- Look for
- Written with React Testing Library
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 old outdated 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 https://dev2.trustroots.org/
You might want to read the folder structure to get a handle on how things are laid out, although we’ve started deviating from it with Angular.js to React migration. 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 Angular.js templates
/apifunctions for communicating with REST API points, used in React components and not with Angular.js stuff; Angular uses
/servicesis where you’ll find Angular service, mostly for connecting to REST API points. Not used in React components; those use
/configcontains the client side routes and other configs
/directivescontains the Angular directives
/controllerscontains the angular client side controllers
/componentscontains React components. Read more about our React migration
/utilscontaints utility functions used mostly with React components.
/imagesImages for the module.
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)
/lib/worker.jsConfigures all cron jobs with above Agenda
/lib/express.jsSets up the server side application and routes
/lib/app.jsBoot up function for the serverside app.
/lib/facebook-api.jsSets up Facebook Graph API client
/lib/firebase-messaging.jsSets up Firebase for push notifications
/lib/mongoose.jsSets up database connection and related utilities.
/lib/render.jsConfiguration for Nunjucs, a serverside template renderer
/lib/logger.jsConfigures error logging service
/lib/exponent-notifications.jsExpo.io based mobile app push notifications
server.jsserver entrypoint; for APIs and serving the fontend client
worker.jsbackground job runner entrypoint, for running Agenda
package.jsdependencies, managed with NPM