This project provides a web frontend for Signalen, an application that helps cities manage and prioritize nuisance reports.
Make sure you installed the following versions on your machine:
Install the dependencies:
npm install
Note: If the installation fails this might be because some dependencies might need to be compiled.
And start the watch server:
npm start
The server listens on port 3001 by default. You can change the by setting the environment variable PORT
.
Configuration for theming, map and API endpoint URLs is defined in app.base.json
. Override the default configuration by creating the file app.json
. This file is ignored by Git. Changes to the configuration file will only be picked up when the development server is restarted.
You can use the environment variable CONFIG
to specify a different filename instead of app.json
to override the base configuration. Any app.*.json
file will be ignored by Git (except for app.base.json
). This is useful for having different configuration sets ready to go in development, when working for different municipalities for instance. Start the development server, with a specific configuration file to extend the base configuration, with the following command:
CONFIG=app.municipality.json npm start
Run the unit tests and generate a coverage report with:
npm test
First start the backend and frontend with Docker compose:
docker-compose build
docker-compose up -d
Then run the end-to-end tests:
cd e2e-tests/
npm install
npm run open
It is possible to login manually on http://localhost:3001/manage with the following credentials:
We provide Helm charts for production deployments of the Signalen stack on Kubernetes.
Pre-build images of the Signalen frontend are available on DockerHub. To build the frontend Docker image locally use:
docker build -t signalen/frontend .
Start the frontend server with a custom configuration as follows:
docker run -d -p 8080:8080 \
-v /branding/app.json:/app.json \
-v /branding/logo.png:/usr/share/nginx/html/logo.png \
-v /branding/favicon.png:/usr/share/nginx/html/favicon.png \
-v /branding/manifest.json:/usr/share/nginx/html/manifest.json \
-v /branding/android.png:/usr/share/nginx/html/icon_192x192.png \
-v /branding/ios.png:/usr/share/nginx/html/icon_180x180.png \
signalen/frontend
The -v
flags mount a custom configuration from the host in the container:
app.json
with specific configuration for theming, map and API endpoint URLs.logo.url
in app.base.json
(or app.json
).favicon.png
the favicon, needs to be a PNG.manifest.json
with configuration for the PWA.icon_...x....png
the icons for the PWA in various sizes, need to be PNGs.The logo displayed on the website is defined by the logo.url
parameter in app.base.json
. This can be a remote URL or a local file path. Define for instance (in app.json
) /logo.svg
and you can inject your own logo.svg
when starting the docker container.
The manifest.json
file for the PWA is generated by webpack, but you can overwrite it with your own configuration. This file also defines some icons, which, in turn, can be injected into the container as well.
There is an icon for android of 192 x 192 pixels in size, defined in manifest.json
. For iOS there's an icon of 180 x 180 pixels in size, this is defined directly in index.html
. All icons have to be PNGs. The icon for iOS must not contain transparency. For more information on icons see this Stack Overflow question
and the Apple developer documentation.
The Dot icons (icon-dot and icon-dot-selected) made by Pixel perfect from www.flaticon.com.