Skip to content

code-for-canada/start-map

Repository files navigation

StreetARToronto Map

An app for mapping Toronto street art projects.

This app is built in React, a javascript library for user interfaces. We use the create-react-app development framework to have sensible defaults and development practices that will be familiar to those familiar with React.

🛠️ Technologies Used

  • Development
  • App components
    • Google Maps.
    • Javascript.
      • React. A JavaScript library for building user interfaces.
      • Webpack. Static module bundler for modern JavaScript applications. (Hidden within create-react-app.)

For a full inventory of platforms & services used, see our Platform Inventory GDoc (:lock: privileged access only).

💻 Local Development

Setup

npm install

Available Scripts

npm run analyze

Runs source-map-explorer so that you can visualize what contributes to the size of your production build.

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint (code style) errors in the console.

npm run lint

Runs eslint styling checks on our code. This helps ensure clean, readable code that follow specific formatting conventions and can be checked easily.

npm test

Note: We are currently not writing tests, but plan to soon!

Launches the test runner in the interactive watch mode.

For general create-react-app docs, see the section about running tests.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

airtable2geojson

We run an automated script in the cloud via GitHub Actions that:

  1. reads artwork data from our Airtable base,
  2. converts it into GeoJSON, and
  3. pushes any changes to a file on this repo's master branch: public/geojson/ftrs.json

🏃‍♀️ This script runs every hour.

Update GeoJSON file from Airtable

If the badge above is green, it's running successfully. Click the badge to see history of script runs.

Configuration of this script (aka workflow) happens in .github/workflows/airtable2geojson.yml

(This script has its own README in scripts/airtable2geojson.)

Deployment

We use Heroku for deployment. You can see the deployment pipeline here:

Screenshot of Heroku pipeline

We auto-deploy master branch for this GitHub repo to the staging environment: https://streetartto.herokuapp.com/

The staging environment is manually promoted to production: https://streetartpublic.herokuapp.com/

With proper privileges, this promotion can be done via the Heroku pipeline page: https://dashboard.heroku.com/pipelines/a6596f31-75c3-4c3f-951a-018940150284

Some environment variables (e.g., Google Analytics & Maps) use different credentials in the production vs staging/development environments. These are set in the Heroku UI, but see .env.heroku.* and app.json files for reference.

For general create-react-app docs, see the section about deployment.

Metrics

We have the ability to monitor usage of individual features with Google Analytics events, to understand what's valuable. We keep a separate production account so as not to clutter up data during testing.

External Resources

©️ License

MIT License