Skip to main content

1. Set up your custom app

Within GeoApps, it is possible to build and import a custom app. With custom apps, it is possible to build dedicated UI/UX for specific applications.

This document describes how a custom app can be created, and how it can be imported within GeoApps.

1. Preparing your development environment

To get start, make sure you have at least NodeJS and the NPM Package Manager available on your machine. When this is available, continue to download the GeoApps CLI from npm and install this as a global package:

npm i -g @mapgear/geoapps-cli

To develop an app, we suggest to make use of Visual Studio Code. We advice to install the Visual Studio Code Extension for GeoApps to provide instellisense whenm modifying the manifest and configuration files related to GeoApps apps. You can find this extension here: https://marketplace.visualstudio.com/items?itemName=mapgear.geoapps-vscode

2. Get started with your app

Create a new folder as the base folder of your app. In this folder, run the following commands:

npm init
geoapps init --only-config

Running these command will ask you a couple of questions related to the app you are going to create. After completely answering these questions, two new files are created: geoapps.json and manifest.yaml.

Make sure that during this configuration you provide a single startup file, for now select here the default index.html. This will be used during the debug process when continue the development of the app in your local environment.

geoapps.json

The geoapps.json file contains files that are usefull for debugging your app from your local development. It also provides all the information that is necessary when packing your app into an app package that can be published to GeoApps.

Manifest yaml

The manifest.yaml is the file that contains all the data needed to define the app. It contains the entry point, descriptive information and the app name. In addition, you can define screens, branding and other kind of information for more advanced apps.

3. Creating your app

When the app is initialized, copy the following code snippets and paste it in the index.html file:

<!DOCTYPE html>
<html>
    <head>
        <title>Hello geoapps!</title>
    </head>
    <body>
        <p>Hello geoapps!</p>
    </body>
</html>

4. Running the app

To run the app on your local development machine, you can start it with the following command:

geoapps serve

After this, you can access the app in your browser at https://localhost:8080/. If you receive any certificate errors, please accept those as we are using a local development certificate.