Skip to content
Digital Situation Reports
Branch: dev
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
_migrations
_stack
_tests
_ui
assets
components
layouts
locales
middleware
pages
plugins
static
store
.editorconfig
.eslintrc.js
.gitignore
.nvmrc
Dockerfile
LICENSE
README.md
app.html
docker-compose.yml
ecosystem.config.js
nuxt.config.js
package-lock.json
package.json
run_node
yarn.lock

README.md

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

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]
You can’t perform that action at this time.