node package manager
Loosely couple your services. Use Orgs to version and reuse your code. Create a free org ¬Ľ

packs

Packs survey generator tool ūüēä

Packs is a command-line tool for developing and bundling React-based survey components with a declarative format. The cli tool utilizes the packs-framework to package components into a single-page application.

Installation

It's recommended to install packs within each survey project directory as a development dependency for better version control. (Yarn is the recommended package manager to ensure deterministic lockfiles, but npm also works fine).

yarn add -D packs

Then you can specify commands from your package.json scripts field for local development, building and testing your survey:

{
  "scripts": {
    "start": "packs --serve",
    "build": "packs --build",
    "test": "packs --test"
  }
}

Directory structure

Your survey project must include a /modules directory and a survey.json configuration file.

The /modules directory can only include indexed module JSON files, indexed with left-padding 000.json, 001.json, 002.json etc.

Each module JSON file must specify a survey component package / name and any module parameters, e.g.:

{
  "component": "packs-components/Markdown",
¬†¬†"body":¬†"#¬†Hello,¬†World¬†ūüĆć"
}

Make sure each survey components package is installed, e.g. to install common components from packs-components.

yarn add packs-components

Your survey.json file must specify a survey name, component and wrapper package dependencies (which must also be installed under /node_modules) as well as an initialState object, if required.

{
  "name": "your-survey",
  "components": [
    "packs-components",
    "your-survey-components"
  ],
  "wrapper": "your-survey-wrapper",
  "initialState": {
    "counter": 0
  }
}

Local development

To run a survey locally at http://localhost:9000:

yarn start

Any changes to your module JSON files or survey.json file will be reflected on browser reload. Under the hood, packs uses webpack-dev-middleware to lazy load and package your survey components.

Deployment

To build static files for deployment under ./public/index.html and ./public/app.js with minification and production flags, run:

yarn build

Testing

After building static files you can test module responses and state with:

yarn test

Packs will run the Component.simulate method for each survey component to simulate response states for each module and the whole survey.

Survey versioning

It's required that you use git for version control of your survey project or else your builds will fail. Packs will use the hash of your latest commit, e.g. abcd123, which it will suppy to a survey through the initialState object under the surveyVersion field. If you named your survey your-survey, then packs will supply the following fields to your survey:

{
  "surveyName": "your-survey",
  "surveyVersion": "abcd123"
}

If you are running the survey locally, or you have uncommited changes in your directory, then packs will append -local and -changed to your surveryVersion respectively.

GitLab CI for deployment

You can easily deploy and manage a survey project using GitLab CI / Pages, without requiring collaborators to install additional local dependencies beyond git or a GitLab account.

For example, the following gitlab-ci.yml file will build, publish and test the survey with GitLab Pages:

image: node:8
 
pages:
  cache:
    paths:
    - node_modules/
 
  script:
  - yarn install --frozen-lockfile
  - yarn build
  - yarn test
  artifacts:
    paths:
    - public
  only:
  - master