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](https://github.com/alexa/ask-cli) tool.
Follow the steps in the [ASK CLI Quick Start Guide](https://developer.amazon.com/en-US/docs/alexa/smapi/quick-start-alexa-skills-kit-command-line-interface.html) 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:

```JSX
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:

```JSX
// 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.

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

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

```JS
{
    // ... 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`:

```JS
{
  // ...
  "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!"