Skip to content

OpenAerialMap

Vite for building

Vite is used to bundle all the needed assets for the application. There are two commands, both run via pnpm

  • pnpm build - clean & build everything and put it into dist folder
  • pnpm serve - serve the pages and utilize live reload on changes to fonts, images, scripts and HTML.

Configurations and environment variables

This app makes use of the environment variables found in ../.env.example. Copy and paste that file to a new file called ../.env and populate the values.

See Vite's documentation on env variables.

AWS S3 For Deploy

The deployment is:

  • Handled via Justfile deploy-frontend script.
  • The dist is pushed to S3 bucket oam-frontend under path /${GIT_BRANCH}/.
    • This way we host the main/stage/dev deployments in the same bucket, under subpaths.
  • In advance a Cloudfront distribution is made in AWS, attached to *.hotosm.org cert.
  • The workflow will:
    • Build the frontend container image.
    • Push the dist to S3.
    • Find the Cloudfront distribution matching the S3 URL.
    • Invalidate the cache of the cloudfront deployment in all locations.

Linting

Our ESLint rules are based on eslint:recommended rules, with some custom options. To check linting errors run:

npm run lint

Tests

Tests are setup using Jest, and can be run with

npm run test

Coding style

File .editorconfig defines basic code styling rules, like indent sizes.

Prettier is the recommended code formatter. Atom and VSCode have extensions supporting Prettier-ESLint integration, which will help maintain style consistency while following linting rules.

Path alias

Path alias allow you to define aliases for commonly used folders and avoid having very long file paths like ../../../component. This also allows you to more easily move files around without worrying the imports will break.

Paths are defined in the package.json under alias. They start with a $ and point to a folder.

The following paths are predefined, but feel free to change them to whatever is convenient to your project needs.

"alias": {
    "$components": "~/app/scripts/components",
    "$styles": "~/app/scripts/styles",
    "$utils": "~/app/scripts/utils",
    "$test": "~/test"
  }

For example, to import a component from a file called page-header in the "~/app/scripts/components" folder, you'd just need to do import Component from '$components/page-header'.

Pull Request templates

Project seed comes with pull request templates to simplify and standardize the pull requests in the project. This issue on the how repo provides some context to how this works.

To add more templates create them in the .github/PULL_REQUEST_TEMPLATE folder and link them in the PULL_REQUEST_TEMPLATE.md file.