Skip to content

Deploying the OER Geomatics visualizations

Jump to bottom
kyjzhou edited this page Jun 1, 2022 · 7 revisions

The OER Geomatics project involves the creation of React-Three-Fiber visualizations to support selected chapters in the UBC Geomatics Textbook. Here is some information to assist with building and deploying these visualizations alongside the textbook.

Directory structure

The OER Geomatics project visualizations are located in the docs/viz folder in the UBC Geomatics Textbook repository. There are two relevant folders for each visualization:

  • The folder with the visualization name (e.g. docs/viz/geodesy) contains the visualization's source code.
  • The folder that ends with -viz (e.g. docs/viz/geodesy-viz) contains the generated build. The contents of this folder can be re-generated by following the build and deployment steps.

Visualization source code directory structure

The source code directory of each visualization (e.g. docs/viz/geodesy) is structured as follows:

  • docs/viz/geodesy/
    • build: Automatically created by the yarn build or npm run build command. This folder is not tracked by version control. The contents of the build folder comprise the final build.
    • node_modules: Holds the dependencies of the project. It is automatically created when you run the command yarn install or npm install. This folder is not tracked by version control.
    • public: Contains the public objects and assets, such as images and index.html, used in the visualization.
    • src: Contains the JavaScript source code of the visualization.

Correspondence to EML-owned repository

The OER Geomatics project source code was originally developed in the OER Geomatics repository, a private repository within the EML organization. The correspondence between the repositories' structure is as follows:

  • docs/viz/emspectrum => src/emspectrum: Source code for EM Spectrum visualization.
  • docs/viz/geodesy => src/geodesy: Source code for Geodesy visualization.
  • docs/viz/lidar => src/lidar: Source code for LiDAR visualization.

Building and deploying visualizations to GitHub Pages

Each visualization is served from its own folder inside docs/viz.

  1. In the terminal, navigate to the root directory of the visualization you wish to build (e.g. docs/viz/geodesy)

  2. Open package.json and verify that the homepage variable matches the intended destination after deployment. For example, for the geodesy visualization, it may look like: https://ubc-geomatics-textbook.github.io/geomatics-textbook/viz/geodesy-viz

  3. Run the command yarn build (or npm run build) and wait for it to complete. This builds the visualization and places the build files in the build folder. Here is what the output should look like:

  1. Copy the contents of the build folder generated above into docs/viz/[VIZ NAME]-viz in the UBC Geomatics Textbook repository. For example, for the geodesy visualization, copy the contents of the build folder into docs/viz/geodesy-viz. Here is what the folder should now look like:

  1. Commit and push the changes to docs/viz/[VIZ NAME]-viz.

  2. Once the changes are merged into the main branch, they should appear on GitHub Pages. Verify the deployment by accessing the visualization at the url in the homepage variable (e.g. https://ubc-geomatics-textbook.github.io/geomatics-textbook/viz/geodesy-viz/).

Locations of hard-coded paths

/ In progress – subject to change! /

EM Spectrum visualization (src/emspectrum)

  • Lines 31 and 40, src/App.js/: Links back to the textbook chapter the emspectrum visualization is associated with. line-31 line-40

Geodesy visualization (src/geodesy/)

  • Line 28, src/App.js/: Has a link back to the textbook chapter the geodesy visualization is associated with.
Clone this wiki locally