@citydna/app-townhall-map

citydna-app-townhall-map

This is the experience run on the large TV screens in the town hall commons space. It's final production build is a react component not a react app that is deployed and served.

Instead, the final build is a UMD package that's published to NPM. From there, the platform-host-app consumes the package and side-loads the code in at runtime.

It's important to remember when developing this app that it's just loaded in like a component within the platform-host-app, so any context, theming, etc will influence the final output. This is intentional and allows for rapidly building websocket enabled experiences.

Features

The user flow is almost identical to the citydna-app-townhall-experience and really only differs in what's displayed on screen.

Development

The @citydna/platform exposes a helper component called AppPreview that helps you rapidly create apps for the platform. It's a development environment only and is not intended for production use. When you run yarn start for development, the 'app' will load up an instance of this and mock the devices. Read more.

Common components/code between this experience and the citydna-app-townhall-map have been abstracted out into a special @citydna/experience package for code reusability.

.env file

Important: the .env file is only needed when you are developing locally with yarn start. Otherwise if you are developing using the platform-host-app, these values will come from that packages .env instead.

You'll have to create a .env file in the root of this app that has the following variables:

• REACT_APP_AMPLIFY_USERNAME - amplify login username
• REACT_APP_AMPLIFY_PASSWORD - amplify login password
• PUBLIC_URL - public app URL
• REACT_APP_QR_ORIGIN - public app URL
• REACT_APP_MAPBOX_API_ACCESS_TOKEN - mapbox token

Scripts

• yarn start - enter local development mode.
• yarn start:dev - enter remote development mode. This will build your app using webpack and serve the resulting package at a public URL.
• yarn build:apps - create a package via webpack ready for distribution to NPM

Config

Config for the apps are stored in the citydna-configs-bucket. These control things such as;

• what data/resources are displayed and used
• copy & translations for the apps, as well as custom images
• how the app displays on the user's phone

A local copy of these is kept in /apps/citydna-app-townhall-public/public/config.