What you will accomplish
In this tutorial you will create the Slack component from scratch to illustrate how readily you can write custom code for an integration.
Initialize your project
Suppose Prismatic's Slack component did not exist. How would one go about creating a component that sends notifications to Slack?
To start your integration, use the
prism components:init subcommand to create a new TypeScript project.
This will create a NodeJS project with TypeScript support, complete with required dependencies, like Webpack and Prismatic's custom component library, spectral.
Most of the dependencies you require have been added for you, but because you're building a Slack component, you will want to take advantage of the Slack webhook npm package.
Add the following to the top of
Create some input fields
What information will you need to send a Slack message? At minimum, we'll need two things:
- A Slack webhook URL to send messages to
- A message to send.
To create those input fields for your component, you will create two new
key is referenced later in the
placeholder will appear within the Prismatic web app when a user utilizes this action.
required are self-explanatory.
Create a component action
action keys are unique, and the existing Slack plugin utilizes the key
Hence, the "new" appended to the below
Appending "new" to actual components is highly discouraged.
Now it's time to create an
action that our component can take.
You need to provide the action with a unique
description to display in the web app, a set of
inputs that you created above, and some code to
perform when the action is invoked.
You can take advantage of the Slack API in our
Export your component
Lastly, we need to export a
component object that is versioned, has a
key like the action key, contains a
description to display in the web app, and lists the
actions that are associated with the component.
Build and deploy your component
At this point you're ready to build your component, and then deploy it.
webpack to package your component
Your build exists in
Now, you can use
prism to deploy your component.
Test your new component
Congratulations! You've published your first custom component! Try modifying your first integration to use your new component, and verify that it posts to Slack like the official Prismatic Slack component does!