Public | Automated Build

Last pushed: a day ago
Short Description
climate-explorer-frontend automated build
Full Description

PCIC Climate Explorer

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


Node.js >= 4.0

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


In progress


Uses webpack-dev-server with hot module replacement.


Front end configuration uses environment variables.

npm install
npm start


npm test


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

git clone
cd climate-explorer-frontend

Due to security concerns about DNS rebinding attacks, webpack validates the Host header of requests made to it. If the request's Host doesn't match what webpack thinks its own host is, webpack returns an Invalid Host Header error. While run in docker, webpack's internal IP is, so any requests it receives made to any other address, such as the docker node's public address, will fail. Here's a good article about it.

The solution is to add a "public" argument with the docker node's public domain or ip address to the startup command for webpack in the scripts attribute of climate-explorer-frontend's package.json.

"scripts": {
    "start": "webpack-dev-server --host --public",
    "build": "webpack --progress --colors",
    "test": "jest --verbose",
    "lint": "eslint .",
    "lint:glob": "eslint"

Only addresses are validated, not ports, so it doesn't matter what port you assign the docker container when it is running.

Then build a docker image:

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

You can set the environmental configuration variables each time you run the image using docker's -e flag. You probably only need to set CE_BACKEND_URL to point to wherever you've set up the data server, and maybe CE_ENSEMBLE_NAME.

docker run -it -e "CE_BACKEND_URL=http://location.of.dataserver:dataserverport/api"
               -e "CE_ENSEMBLE_NAME=ce" 
               -p whateverexternalport:8080 
               --name climate-explorer-frontend


Creating a versioned release involves:

  1. Incrementing version in package.json
  2. Summarize the changes from the last version in
  3. Commit these changes, then tag the release:

    git add package.json
    git commit -m"Bump to version x.x.x"
    git tag -a -m"x.x.x" x.x.x
    git push --follow-tags
Docker Pull Command

Comments (0)