salishsea.eos.ubc.ca Site Web App
The salishsea.eos.ubc.ca site is a dynamic web application written in Python 3 using the Pyramid web framework. These docs provide a brief explanation of the structure of the app, and details about its development.
salishsea_site directory tree contains the app package:
The app configuration is defined in
salishsea_site/__init__.py. That file also contains functions that map URL paths to route names. It also contains static view functions that serve the site static assets (see below) and model run results figures and other static files produced by the Salish Sea NEMO and SOG 1-D models.
salishsea_site/views/directory contains Python modules that define the view functions that the routes connect to. The view functions handle the HTTP requests coming into the app, and calculate the dynamic elements of the responses which are returned by the functions as
dictobjects. The view modules are organized to correspond to the site’s top-of-page navigation bar.
salishsea_site/templates/directory tree contains the page templates that the view functions pass to the renderer to produce the HTML stream that is sent to the user’s browser in the HTTP response. The
dictobjects returned by the view functions contain the template variable names and the values to substitute for them. The templates are written in HTML5. They use the Bootstrap 3 HTML/CSS/JS framework for layout and client-side dynamic elements. The Mako template library is used to provide variable substitution, inheritance, and flow control in the templates. The templates are organized in sub-directories that correspond to the view modules.
salishsea_site/static/directory tree contains the app’s static assets, CSS files, images, and PDF documents. They are served by a static view defined in
The runtime configurations for running the app in a development environment,
and for its production deployment are contained in the
production.ini files in the top level of the repository.
Please see Web App Package Development for details of how to set up an app development environment, and Running the App in Dev Mode for instructions on how to run the app in development mode on your local machine.
docs/ directory tree contains the reStructuredText source files for these docs,
and the Sphinx configuration and
Makefile to render them to HTML.
Please see Building the Documentation for details.
Web App Package Development
The salishsea-site package is developed, tested, and deployed using Python 3.10. The package uses some Python language features that are not available in versions prior to 3.6, in particular:
Getting the Code
$ git clone firstname.lastname@example.org:SalishSeaCast/salishsea-site.git
$ git clone https://github.com/SalishSeaCast/salishsea-site.git
Setting up an isolated development environment using Conda is strongly recommended. Assuming that you have Anaconda Python Distribution or Miniconda3 installed, you can create and activate an environment called salishsea-site that will have all of the Python packages necessary for development, testing, and building the documentation with the commands:
$ cd salishsea-site
$ conda env create -f env/environment-dev.yaml
The salishsea-site package is installed in editable install mode as part of the conda environment creation process. That means that the package is installed from the cloned repo via symlinks so that it will be automatically updated as the repo evolves.
To deactivate the environment use:
(salishsea-site)$ conda deactivate
black is installed as part of the Development Environment setup.
o run black on the entire code-base use:
$ cd SalishSeaCmd
$ conda activate salishsea-cmd
(salishsea-cmd)$ black ./
in the repository root directory. The output looks something like:
All done! ✨ 🍰 ✨
14 files reformatted, 4 file left unchanged.
Running the App in Dev Mode
You can run the app in a development server on you local machine with the command:
(salishsea-site)$ cd salishsea-site
(salishsea-site)$ pserve --reload development.ini
With the dev server running you can view the site by navigating to http://localhost:6543/ in your browser.
The --reload option in the pserve command causes the dev server to monitor the app files in the
salishsea-site/ directory tree and restart whenever it detects that a file has been changed.
That allows you to easily edit app code and templates and instantly see changes in your browser after a page refresh.
Logger messages from the app appear in the terminal session where you ran the pserve command.
To stop the dev server use Ctrl-C in the terminal session where you ran the pserve command.
Several pages in the app require access to parts of the
/results/ directory tree on skookum.
If you are working on a waterhole machine that has
you are good to go.
If you need to get
/results/ mounted on a waterhole machine,
please open an EOAS IT ticket with the request.
If you are working on a remote machine or a laptop you can use sshfs to mount
/results/ from skookum at a local
/results/ mount point.
Building the Documentation
Additions, improvements, and corrections to these docs are always welcome.
The quickest way to fix typos, etc. on existing pages is to use the Edit on GitHub link in the upper right corner of the page to get to the online editor for the page on GitHub.
For more substantial work, and to add new pages, follow the instructions in the Development Environment section above. In the development environment you can build the docs locally instead of having to push commits to GitHub to trigger a build on readthedocs.org and wait for it to complete. Below are instructions that explain how to:
build the docs with your changes, and preview them in Firefox
check the docs for broken links
Building and Previewing the Documentation
Building the documentation is driven by the
With your salishsea-site development environment activated,
(salishsea-site)$ (cd docs && make clean html)
to do a clean build of the documentation. The output looks something like:
Removing everything under '_build'...
Running Sphinx v3.0.1
making output directory... done
loading intersphinx inventory from https://docs.python.org/3/objects.inv...
loading intersphinx inventory from https://salishsea-meopar-docs.readthedocs.io/en/latest/objects.inv...
building [mo]: targets for 0 po files that are out of date
building [html]: targets for 1 source files that are out of date
updating environment: [new config] 1 added, 0 changed, 0 removed
reading sources... [100%] index
looking for now-outdated files... none found
pickling environment... done
checking consistency... done
preparing documents... done
writing output... [100%] index
generating indices... genindexdone
writing additional pages... searchdone
copying static files... ... done
copying extra files... done
dumping search index in English (code: en)... done
dumping object inventory... done
The HTML pages are in _build/html.
The HTML rendering of the docs ends up in
You can open the
index.html file in that directory tree in your browser to preview the results of the build before committing and pushing your changes to Bitbucket.
Running the Unit Tests
The test suite for the salishsea-site package is in
The pytest tools is used for test fixtures and as the test runner for the suite.
With your salishsea-site development environment activated, use:
(salishsea-site)$ cd salishsea-site/
to run the test suite. The output looks something like:
============================ test session starts ============================
platform linux -- Python 3.8.2, pytest-5.4.1, py-1.8.1, pluggy-0.13.1
collected 76 items
tests/test_mako_filters.py ....... [ 9%]
tests/views/test_bloomcast.py .. [ 11%]
tests/views/test_figures.py ... [ 15%]
============================ 76 passed in 0.72s =============================
(salishsea-site)$ cd salishsea-site/
(salishsea-site)$ pytest --cov=./
The test coverage report will be displayed below the test suite run output.
Alternatively, you can use
(salishsea-site)$ pytest --cov=./ --cov-report html
to produce an HTML report that you can view in your browser by opening
The salishsea-site package unit test suite is run and a coverage report is generated whenever changes are pushed to GitHub. The results are visible on the repo actions page, from the green checkmarks beside commits on the repo commits page, or from the green checkmark to the left of the “Latest commit” message on the repo code overview page . The testing coverage report is uploaded to codecov.io
The GitHub Actions workflow configuration that defines the continuous integration tasks is in the
Version Control Repository
Development tasks, bug reports, and enhancement ideas are recorded and managed in the issue tracker at https://github.com/SalishSeaCast/salishsea-site/issues.
The salishsea.eos.ubc.ca site content, code, and documentation are Copyright 2014 – present by the Mesoscale Ocean and Atmospheric Dynamics (MOAD) group in the Department of Earth, Ocean, and Atmospheric Sciences at The University of British Columbia. Please see https://salishsea.eos.ubc.ca/contributors for details.
They are licensed under the Apache License, Version 2.0. https://www.apache.org/licenses/LICENSE-2.0 Please see the LICENSE file for details of the license.