⚠️ Archived

See the buoy-viewer for the current repo

Narragansett Bay Data Explorer

Explore data from the RI Data Discovery Center about the Narragansett Bay.

A web app to explore data about the Narragansett bay. Built using Nuxt (Vue). Uses the buoy-api as a backend.

Build Setup

For the map in the domoic acid page to work, you'll need a .env file with the following keys:

NUXT_ENV_MAPBOX_ACCESS_TOKEN=

Node version: 14

# install dependencies
$ yarn install

# serve with hot reload at localhost:3000
$ yarn dev # connect to production api
$ yarn dev:local # connect to locally running api

# linting
$ yarn lint # report linting errors
$ yarn lint:fix # fix linting errors if possible

# build for production and launch server
$ yarn build
$ yarn start

# generate static project
$ yarn generate

For detailed explanation on how things work, check out Nuxt.js docs.

Generating Static Files and its Dynamic API Call implications

yarn generate configures our web application as a static web application. During this process, it generates every route as an HTML file and exports it to the dist/ directory. This process raises a concern whether our dynamic content gets baked in/cached within the built site.

The theory for why the dynamic content for this project continues to work is that we generally make our API calls in the store actions and retrieve data from the store. Nuxt isn't able to cache the results of these calls and keeps them as javascript.

⚠️ Check whether your API calls are still going out in the built and deployed app.

For more resources, check out NuxtJS Blog: Going Full Static, Nuxt lifecycle, and NuxtJS Docs: Store directory.