pcic/climate-explorer-frontend

Sponsored OSS

By Pacific Climate Impacts Consortium

Updated about 1 month ago

climate-explorer-frontend automated build

Image
Data Science
Monitoring & Observability
Web Servers

50K+

PCIC Climate Explorer

Build StatusCode Climate

Front end interface for the PCIC Climate Explorer. Node, React.js, Webpack, Babel, ES6+.

Requirements

Node.js >= 4.0

We reccomend using nvm to manage your node/npm install.

Deployment

In progress

Development

Uses webpack-dev-server with hot module replacement.

Config

Front end configuration uses environment variables.

npm install
npm start
Testing
npm test
Linting

Linting is configured with ESLint and largely follows the AirBnb preset.

You can lint all files npm run lint, or a specific file npm run lint:glob <file_name_or_glob>.

Use the git/hooks/pre-commit-eslint (and install into your .git/hooks directory) to abort a commit if any staged *.js files fail linting (warnings OK).

If you really want to skip the linting during a commit, you can always run git commit --no-verify. However, this is not recommended.

Setup using Docker

Build docker image

Clone repo:

git clone https://github.com/pacificclimate/climate-explorer-frontend
cd climate-explorer-frontend

Build a docker image:

docker build -t pcic/climate-explorer-frontend-image .

Run docker image

The following environment variables must be set:

  • NODE_ENV (set to 'production' for production environment; anything other value, including undefined, defaults to dev)
  • CE_BACKEND_URL (base URL of backend API)
  • CE_ENSEMBLE_NAME (final last-ditch fallback in case invalid ensemble name is used in URLs; in all normal use cases is ignored; could reasonably omit)
  • NCWMS_URL (base URL of ncWMS server)
  • TILECACHE_URL (base URL of TileCache server)
  • CE_BASE_PATH (base path of the URL for the Marmot frontend app; set this to the path component of the URL for Marmot configured in our proxy server; e.g., /marmot/app)

Typical production run:

docker run --restart=unless-stopped -d 
  -p <external port>:8080 
  -e NODE_ENV=production 
  -e CE_BACKEND_URL=https://services.pacificclimate.org/marmot/api 
  -e CE_ENSEMBLE_NAME=ce 
  -e NCWMS_URL=https://services.pacificclimate.org/marmot/ncwms 
  -e TILECACHE_URL=https://tiles.pacificclimate.org/tilecache/tilecache.py 
  -e CE_BASE_PATH=/marmot/app 
  --name climate-explorer-frontend
  pcic/climate-explorer-frontend:latest

Releasing

Creating a versioned release involves:

  1. Incrementing version in package.json
  2. Summarize the changes from the last version in NEWS.md
  3. Commit these changes, then tag the release:
git add package.json NEWS.md
git commit -m"Bump to version x.x.x"
git tag -a -m"x.x.x" x.x.x
git push --follow-tags

Code style standard compliance

We have nominally adopted the default ESLint code style. We aren't enforcing it right now, unfortunately.

Enforcement aside, we continue to commit code that is in violation of these standards, which is undesirable for at least two reasons:

  • Following a coding standard makes the code much easier to read.
  • For those of us with an IDE plugin that flags standards violations, they appear all over the place, which is distracting to say the least.

The coding standard we adopted has a lot of rules, but the following are the ones we are violating most. A small effort could radically reduce the number of new violations we introduce. In approximate order of frequency of violation:

  1. Limit line length to 80 characters.
  2. Use single quotes for strings. (Double quotes are visually noisier.)
  3. Place a space after a begin comment delimiter. (// comment..., not //comment....)
  4. Place a space between if and for and the opening parenthesis. (if (cond), not if(cond))
  5. Declare variables with const or let, in that order of preference; avoid var. (const and let are scoped.)
    • Use for (const prop in obj) and for (const val of iterable), but for (let i = 1; i < n; i++)

Docker Pull Command

docker pull pcic/climate-explorer-frontend