Skip to content

mapboard development

Jump to bottom
Andy Rothwell edited this page Jul 13, 2020 · 15 revisions

Back To Home

This section is only appicable to people at the City of Philadelphia who have Github permission to edit the mapboard repo, or the phila-vue-comps, -mapping, and -datafetch repos.

Development of mapboard is done using the Git Feature Branch Workflow.

Developing Locally

Development of a site that uses mapboard (such as Atlas) sometimes requires making changes to mapboard and its City of Philadelphia dependencies (@phila/vue-comps, @phila/vue-mapping, and @phila/vue-datafetch). While developing a mapboard site (like Atlas), you can link to those projects locally on your computer like this:

yarn link @phila/mapboard
yarn link @phila/vue-comps
yarn link @phila/vue-mapping
yarn link @phila/vue-datafetch

If working on -comps, -mapping, or -datafetch, you also have to link from the mapboard project to them:

yarn link @phila/vue-comps
yarn link @phila/vue-mapping
yarn link @phila/vue-datafetch

Linking projects locally allows changes you make to a different library, @phila/vue-mapping for instance, to be run with the Atlas and mapboard projects on your computer in real time.

Pushing to a development site

To push changes to a development site (such as atlas-dev.phila.gov), you have to follow one of these processes:

If the change is to mapboard

  1. Make changes to the development branch or a feature branch of mapboard.
  2. Run yarn build to compile new files in the dist folder.
  3. Commit all changes (including the files in the dist folder) to that branch of the mapboard Github repo.
  4. In Atlas (or whatever project using mapboard), change your mapboard import to use the new mapboard commit:

if using a nonbundled project, in index.html use:

<script src="//cdn.rawgit.com/CityOfPhiladelphia/mapboard/develop/dist/mapboard.js"></script>

or use the specfic commit:

<script src="//cdn.rawgit.com/CityOfPhiladelphia/mapboard/1493903d1043ac16e83264fd3d349d02fef3c82b/dist/mapboard.js"></script>

if using a bundled project, in package.json use:

"dependencies": {
  "@cityofphiladelphia/mapboard": "https://github.com/CityOfPhiladelphia/mapboard#1493903d1043ac16e83264fd3d349d02fef3c82b",
  ...

If the change is to a City of Philadelphia dependency of mapboard

  1. Make changes to the development branch or a feature branch of the mapboard dependency (such as phila-vue-mapping).
  2. Run yarn build on the dependency library to compile new files in the dist folder.
  3. Commit all changes (including the files in the dist folder) to the the dependency's Github repo (such as phila-vue-mapping)
  4. Set a mapboard branch (develop or a feature branch only) to use that commit.
    Note - never do this in the master branch of mapboard!

The mapboard master branch package.json will always look like this:

"dependencies": {
  "@cityofphiladelphia/phila-vue-comps": "1.0.4",
  "@cityofphiladelphia/phila-vue-datafetch": "0.0.10",
  "@cityofphiladelphia/phila-vue-mapping": "1.0.5",
  ...

But, for example, a mapboard develop branch set to use a specific commit of phila-vue-mapping would have a package.json that looks like this.

"dependencies": {
  "@cityofphiladelphia/phila-vue-comps": "1.0.4",
  "@cityofphiladelphia/phila-vue-datafetch": "0.0.10",
  "@cityofphiladelphia/phila-vue-mapping": "https://github.com/CityOfPhiladelphia/phila-vue-mapping#6f4e26ea8136d8c931381958264c132bba73dd30",
  ...
  1. Run yarn build on mapboard to compile new files in the dist folder.
  2. Commit all changes (including the files in the dist folder) to that branch of the mapboard Github repo.
  3. Whatever way Atlas imports mapboard and the dependency that was changed, change it to use the new mapboard commit:

if using a nonbundled project, in index.html use:

<script src="//cdn.rawgit.com/CityOfPhiladelphia/phila-vue-mapping/dist/phila-vue-mapping.js"></script>
<script src="//cdn.rawgit.com/CityOfPhiladelphia/mapboard/develop/dist/mapboard.js"></script>

or use the specfic commits:

<script src="//cdn.rawgit.com/CityOfPhiladelphia/phila-vue-mapping/f4414b74d66b63f5965a7af0814c5aee4cf46127/dist/phila-vue-mapping.js"></script>
<script src="//cdn.rawgit.com/CityOfPhiladelphia/mapboard/1493903d1043ac16e83264fd3d349d02fef3c82b/dist/mapboard.js"></script>

if using a bundled project, in package.json use:

"dependencies": {
  "@cityofphiladelphia/mapboard": "https://github.com/CityOfPhiladelphia/mapboard#1493903d1043ac16e83264fd3d349d02fef3c82b",
  ...

This allows us to less frequently release patches and versions of the dependency libraries.

Clone this wiki locally