reports.unocha.org

Digital Situation Reports for UN OCHA. Vue+Nuxt produces a SSR+Hydration architecture, ensuring that we serve full HTML responses while taking advantage of modern JS tools for client-side interactivity. We use Contentful as our CMS, offloading all data entry responsibilities to a paid service.

Nuxt setup/development

# install node dependencies
$ npm install

# local development with hot reload at localhost:3000
$ npm run dev

For detailed explanation on how things work, checkout the Nuxt.js docs.

Be aware: While the Nuxt development mode is quite useful, ultimately this app has to run inside Docker for your feature to deploy smoothly. Before submitting a PR be sure to rebuild within Docker and run the server using the commands in the Docker section below.

Contentful setup

All content is stored on Contentful. To access the service you need a Space ID and a Content Delivery API key.

Place them in a file at the repo root called .env:

CTF_SPACE_ID=0123456789ab
CTF_ENVIRONMENT=master
CTF_CDA_ACCESS_TOKEN=0123456789abcdefghijklmnopqrstuvwxyz0123456789abcdefghijklmnopqr

They will be copied to .contentful.json during the docker build step (see below).

Contentful Preview environments

When the CTF_HOST AND CTF_CDA_PREVIEW_TOKEN environment variables are present, the app will configure itself to display all edits and new entries immediately, regardless of whether they have been published.

Docker setup/development

# first-time setup
$ docker-compose build

# run server and view logs
$ docker-compose up

# run server detached so that logs are not shown on screen
$ docker-compose up -d

E2E testing prod/local

There's a file imported by each E2E suite _tests/env/index.js, and you can configure it to point to the environment of your choice. Change the import statement to point at the environment config you'd like to test. Add new ones if you want as well, but be wary of committing sensitive data to verison control.

The environment configs are in the same _tests/env directory. At this time there's just local and production since our other test environments have HTTP basic auth. If we wanted to add support for online dev envs, adding the auth in the config is probably the way to go.

Once you have the environment configured (prod is default), install the node dependencies on your host machine and then run the following:

# run all tests in parallel
yarn run test

# run a specific test file
yarn run test _tests/homepage.test.js

Google Analytics tracking within DSR

In the components/_Global.vue we have a prop called ga — any component or page which uses _Global as a mixin automatically can send events to GA using this.ga.send():

  // Our coding standards use Capitalized Labels
  this.ga.send('event', 'Category', 'Action', 'Label', myValue);

In case the ga() function cannot be found or loaded, we mock the function so that any invocations will result in debug output instead of errors:

ga.send() not found, but we would have sent: event category action label [myValue]