Getting Started

This page shows how to get started using JSX for APL in an Alexa skill and set up a build process to deploy the skill.

Create an Alexa Skill

You can create an Alexa skill using Alexa Skills Kit CLI tool. Follow the steps in the ASK CLI Quick Start Guide to get create a new skill and deploy them to an AWS Lambda.

When created and deployed successfully, your skill code should be in lambda folder at the root of your package.

Install JSX for APL

Go into the lambda folder and install ask-sdk-jsx-for-apl NPM package as well as the React and ask-sdk dependencies listed in commands below.

> cd lambda
> npm install -S ask-sdk-jsx-for-apl ask-sdk react react-dom

Now add a file lambda/apl/HelloWorldApl.jsx and copy the following component code:

import * as React from 'react';
import { APL, MainTemplate, Container, Text } from 'ask-sdk-jsx-for-apl';

export class HelloWorldApl extends React.Component {
    constructor(props) {
        super(props);
        this.launchMessage = 'Welcome to my first JSX for APL skill!';
    }
    render() {
        return (
            <APL theme="dark">
                <MainTemplate>
                    <Container
                        alignItems="center"
                        justifyContent="spaceAround">
                        <Text
                            text={this.launchMessage}
                            fontSize="50px"
                            color="rgb(251,184,41)" />
                    </Container>
                </MainTemplate>
            </APL>
        );
    }
}

Rename your index.js to index.jsx to allow XML-style tags. Then, in your index.jsx, add the APL document that we have just defined as an APL directive by wrapping the component in AplDocument and calling the getDirective function:

// Top of index.js
const React = require('react');
const {AplDocument} = require('ask-sdk-jsx-for-apl');
const {HelloWorldApl} = require('./apl/HelloWorldApl');

... Skill Code ...

const HelloWorldIntentHandler = {
    ... canHandle() ...

    handle(handlerInput) {
        const speakOutput = 'Hello World!';
        const aplDocument = new AplDocument(<HelloWorldApl />);
        return handlerInput.responseBuilder
            .speak(speakOutput)
            .addDirective(aplDocument.getDirective())
            .getResponse();
    }
};

That's it to add a JSX for APL component as an APL directive for your skill!

Before we deploy the skill, however, we must set up the Babel compiler to build the JSX code into native Javascript code.

Set up the Babel compiling process

First, let's install the necessary NPM development dependencies for Babel.

> cd lambda
> npm install -D @babel/core @babel/cli @babel/preset-env @babel/preset-react

Now, include a .babelrc file in the root of your lambda code and add following lines as deployment. You can tweak the Babel settings to your liking, but module compiling and React component processing is required for this example.

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

In the package.json file, add the build script to the npm scripts.

{
    // ... package.json ...
    "scripts": {
        "build": "rm -rf dist && babel . --out-dir dist/ --ignore node_modules && cp -r ./package.json ./dist/"
    }
}

This cleans up the previous build, builds the skill code, and copies the dependency files.

Finally, if you are using ASK CLI to develop the skill, you can target the skill code during deploy as lambda/dist by editting ask-resources.json:

{
  // ...
  "profiles": {
    "default": {
      // ...
      "code": {
        "default": {
          "src": "./lambda/dist"
        }
      },
      // ...
    }
  }
}

That's it! To build the skill code, run npm run build in the lambda folder. Then, when you run ask deploy on the root of the workspace, the skill should show the HelloWorldIntent invocation should show the message "Welcome to my first JSX for APL skill!"