This quick start guide will walk you through the basics of creating a hello world Mattermost App in TypeScript. In this guide you will review an App that:
manifest.json, declares itself an HTTP application that uses a bot account and attaches UI elements to locations in the user interface.
submitfunction that can launch a modal (if applicable) and send an interpolated message back to the user.
/node-exampleslash command to provide functionality.
Before you can start with your App, you should first set up your environment by following the developer setup guide.
You also need NodeJS v16 (Gallium) LTS.
cd typescript/hello-world docker compose up
You’ll see Docker install the npm modules and then the App will come online and print the following message:
app listening on port 4000
Next, access your development Mattermost Server at http://localhost:8065 and use the
/apps install http http://mattermost-apps-typescript-hello-world:4000/manifest.json slash command to install the hello world App. Select
Agree to grant the app access to APIs and Locations and click
Submit to finish the installation.
Select the “Hello World” channel header button in Mattermost, which brings up a modal:
Type “testing” and select Submit, you should see:
You can also use the
/node-example send command by typing
/node-example send Hi!.
To understand the App, examine the following elements:
The App has to provide a manifest, which declares the App’s metadata required for installation. In this example, the following permissions and locations are requested:
Bindings specify how an App’s calls should be displayed and invoked from these locations. This App adds a channel header button and a
/node-example send slash command. In order to register these locations, there is a
POST handler for the
/bindings endpoint on your App’s API.
Call handlers are functions that respond to user interactions and webhook events. Forms handle user events on the bindings via call handlers. This App provides a
POSTing to the
/submit function. In the case of a channel header, the form will launch a modal to collect its fields. In the case of a slash command, the form’s fields will be collected as arguments from the user’s command.
Apps may include static assets (e.g.,
icon.png). Static assets must be served under the
static path. For example, there is a
icon.png file in the
dev/node_app/static directory that this App serves.
Once you’re done with the App, you can uninstall it via the
/apps uninstall node-example slash command. Alternatively, you can use
/apps debug clean to remove all data for all installed Apps.
To stop and clean up the App from Docker after you’re done, use the following command in the
docker compose down
You now know how to create a Mattermost App in TypeScript. If you have questions about building Apps or want to show off what you’re building, join us on the Mattermost Apps channel in the Mattermost Community server!