The Cash Program Design Wizard tries to help Aid Workers who want to set up best practice Cash Programs for People Affected in multiple contexts.
Latest releases and notable changes are in the CHANGELOG.
Preview of the latest (development) versions:
Stable, staging versions:
Latest test-runs:
Latest deployments:
Install Node.js: https://nodejs.org/en/download/
Install the version specified in the .node-version
-file.
To prevent conflicts it is recommended to use a 'version manager'.
fnm
(for Windows/macOS/Linux) After installing, run in this directory:
fnm use
NVM - Node Version Manager (for macOS/Linux) After installing, run in this directory:
nvm install && nvm use
Install Docker
Run npm install
from this directory. Or:
npm run install:client
for the front-end onlynpm run install:server
for the back-end onlyTo finish you local set-up, run (required only once):
npm run prepare
To set-up running all relevant lint/test scripts with their related git actions.
Automated tests are configured and can be run with:
npm test
- for both client & servernpm run test:client
- for the front-end onlynpm run test:server
- for the back-end onlyAll initial database-contents are hard-coded in the server/src/seed-data
-folder.
program-demo.json
attribute | type | explanation |
---|---|---|
name |
string | identifier of the program |
sections.json
attribute | type | explanation |
---|---|---|
name |
string | identifier of the section (must be unique) |
label |
translations-object | what users see in the app |
orderPriority |
number |
Example:
{
"name": "pa-info",
"label": {
"en": "The people we will help are mostly..."
},
"orderPriority": 1
}
subsections.json
attribute | type | explanation |
---|---|---|
name |
string | identifier of the subsection (must be unique) |
orderPriority |
number | |
section |
string | must match a name of a section |
Example:
{
"name": "pa-gender",
"orderPriority": 1,
"section": "pa-info"
},
questions.json
attribute | type | explanation |
---|---|---|
name |
string | identifier of the question (must be unique, used in the narrative report) |
type |
string | possible values: select-1 , select-n , text , text-long , numeric |
label |
{translations} | what users see in the app |
orderPriority |
number | |
subsection |
string | must match a name of a subsection |
tags |
[string] | array of strings. possible values: cash , people , data . write it as: "cash", "data" |
optionChoices |
[optionChoice] | array of optionChoice objects, used only for types select-1 and select-n |
optionChoice
(s)
Part of the optionChoices
array attribute inside questions with types select-1
and select-2
)
attribute | type | explanation |
---|---|---|
label |
{translations} | what users see in the app |
name |
string | identifier of the option |
orderPriority |
number |
Example:
{
"name": "pa-gender-01",
"type": "select-n",
"label": {
"en": "PA Gender"
},
"orderPriority": 1,
"subsection": "pa-gender",
"tags": ["people"],
"optionChoices": [
{
"label": {
"en": "Currently Unknown"
},
"name": "unknown",
"orderPriority": 1
},
{
"label": {
"en": "Female"
},
"name": "female",
"orderPriority": 2
},
{
"label": {
"en": "Male"
},
"name": "male",
"orderPriority": 3
},
{
"label": {
"en": "Non Binary"
},
"name": "non-binary",
"orderPriority": 4
}
]
}
{translations}
-object(s)Some text-labels (what users see in the app) should be created by a translations
-object, this can contain multiple versions of the same text in multiple languages/locales.
Example:
{
"en": "An English text",
"en_US": "An American text",
"nl": "Een Nederlandse tekst",
"nl_BE": "Een Vlaamse tekst"
}
Switching between multiple languages/locales isn't currently available in the front-end/app, but should be prepared for, by having the data in the database in this format.
The text of the narrative report is based on this template.
For marking up and lay-outing the contents, Markdown can be used.
See the working examples for the demo
-report or the test
-report.
A good introduction to the possibilities can be found on:
GiHub Docs: Basic writing and formatting syntax
Variables (or the filled-in answers)
The filled-in answers of the program can be used by including variables in the template in the form of: {{name-of-question}}
.
Where name-of-question
is the value of the name
-attributes of a question. (see Question above.)
Answers on multiple-choice questions ("type": "select-n"
) will be rendered as a bullet-list.
Example:
## Section-heading
Multi-line paragraphs,
can be used.
Put _emphasis_ on some words, or make them **stand out** more.
### Example:
The people we want to help identify mostly as:
{{pa-gender-01}}
We will spend {{currency}} {{montly-amount}} per month, per {{household-type}}.
program
section
(1 or more)subsection
(1 or more)
question
(1 or more)When these files are changed, a 'reset' of the database is required. This can be done via the endpoint: http://localhost:3001/scripts/reset
After this initial set-up, you can start with:
npm start
- for both client & servernpm run start:client
- for the front-end onlynpm run start:server
- for the back-end onlyThe front-end client should be running at: http://localhost:4200/.
The back-end server should be running at: http://localhost:3001/api/.
During development the database-structure will change (e.g. an extra column in a table) while there is already data stored that cannot be lost. In this case we have to apply a migration.
Any time, the database-structure is adapted, before pushing, run:
npm run migration:generate <name>
This stores all edits in a migration-file, which should be committed and pushed along with your code changes.
On test- and production-server, this file is automatically run by npm
in the prestart
stage.
To run this file manually, locally, do:
npm run migration:run
During development, tests can be run continuously with:
npm run watch:test --prefix client
- for the front-end onlynpm run watch:test --prefix server
- for the back-end onlyTo simulate a production-environment locally and be able to use all (offline) features, use:
npm run start:production --prefix client
For both the front- & back-end a shared configuration is used.
Prepare the correct configuration in the .env
-file, based on the example: .env.example.
For more information, see: dotenv
.
cp .env.example .env
The front-end/client app can be deployed as a static single-page-app or PWA.
Make sure the .env
-configuration is prepared.
Run: (from the root-folder)
npm run build:production --prefix client
This will generate a folder with all HTML, JS, JSON and SVG assets: client/www
This can be deployed to any hosting-solution (supporting HTTPS), using this server configuration.
The development-preview is automatically deployed using:
.github/workflows/azure-static-web-apps-....yml
staticwebapp.config.json
The back-end/server API can be deployed as a stand-alone Node.js web-app (connected to a database).
Make sure the .env
-configuration is prepared.
Run: (from the root-folder)
npm run build --prefix server
This will generate a folder with all required code: server/dist/
This can be deployed/run as a Node.js service with npm start
The development-preview is automatically deployed via Azure App Service using:
.github/workflows/main_CPDW-development.yml
Released under the Apache 2.0 License. See LICENSE.