Skip to content
An example progressive web app (PWA) using the ArcGIS API for JavaScript built with Preact
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
config
src
.editorconfig
.gitignore
.nvmrc
license
package.json
readme.md
yarn.lock

readme.md

esri-preact-pwa

An example progressive web app (PWA) using the ArcGIS API for JavaScript built with Preact.

View it live

screen shot

The non-map routes get a near perfect Lighthouse performance score, and even the map route scores in the mid 70s (out of 100), which is outright decent for a web mapping application.

performance audit results

This repository was cloned from preact-starter and uses esri-loader to lazy load an ArcGIS web map. See those repositories for more detailed information.

Install

❗️ Pro Tip: Use Yarn to install dependencies 3x faster than NPM!

git clone https://github.com/tomwayson/esri-preact-pwa
cd tomwayson/esri-preact-pwa
npm install
npm run build
npm start

Features

  • Offline Caching (via serviceWorker)

  • SASS & Autoprefixer

  • Asset Versioning (aka "cache-busting")

  • ES2015 (ES6) and ES2016 (ES7) support

  • Hot Module Replacement (HMR) for all files

  • Preact's Developer Tools

  • Lighthouse certified

    lightouse

Development

Commands

Any of the following commands can (and should 😉) be run from the command line.

If using Yarn, all instances of npm can be replaced with yarn. 👌

build

$ npm run build

Compiles all files. Output is sent to the dist directory.

start

$ npm start

Runs your application (from the dist directory) in the browser.

watch

$ npm run watch

Like start, but will auto-compile & auto-reload the server after any file changes within the src directory.

Preact Developer Tools

You can inspect and modify the state of your Preact UI components at runtime using the React Developer Tools browser extension.

  1. Install the React Developer Tools extension
  2. Import the preact/devtools module in your app
  3. Reload and go to the 'React' tab in the browser's development tools

License

MIT

You can’t perform that action at this time.