Skip to content

Commit 53c34ee

Browse files
committed
Update getting started instructions
1 parent d81e5ba commit 53c34ee

File tree

1 file changed

+12
-9
lines changed

1 file changed

+12
-9
lines changed

docs/stately-sky-getting-started.mdx

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,8 @@ This guide will walk you through the process of creating a simple traffic light
1010
## Prerequisites
1111

1212
1. A Stately account with a [Pro or Enterprise subscription](https://stately.ai/pricing)
13-
2. The starter project. [Clone the repo on your local machine](https://github.com/statelyai/sky-starter-app/tree/main)
13+
2. Our Stately Sky starter project. [Clone the repo to your local machine](https://github.com/statelyai/sky-starter-app)
1414
3. A machine to deploy as an actor. To test, feel free to fork our [stop light example](https://stately.ai/registry/editor/eb3e89f5-5936-439f-8254-2f6ea4303659?machineId=15fd8071-b80c-4a6f-b9f5-60b6cf578ee5)
15-
4. A package manager, like [NPM](https://www.npmjs.com/package/npm) or [Yarn](https://yarnpkg.com/)
1615

1716
## Step 1: Create a machine in the Studio
1817

@@ -42,15 +41,19 @@ Now that the API key is generated, you can deploy your machine to Sky as a runni
4241

4342
## Step 4: Add your API key to the starter project
4443

45-
Open the starter project in your code editor. At the root of the project, create a `.env` file to hold your API key.
46-
There are 2 variables that need to be set in the `.env` file: `SKY_API_KEY` and `VITE_SKY_API_KEY`. Paste your API key as the value for both these keys.
44+
Start by opening [the starter project](https://github.com/statelyai/sky-starter-app) in your code editor. Next install the packages using your package manager of choice:
4745

48-
![.env file](../static/assets/sky-getting-started/code-env-file.png)
46+
```bash npm2yarn
47+
npm install
48+
```
4949

50-
:::tip
51-
The starter project relies on Vite to run the app. Vite uses the `VITE_` prefix for environment variables, so any code processed by Vite will not have access to any environment variables without that prefix.
52-
For code that Vite doesn't touch, however, we rely on the `SKY_API_KEY` variable. This is why we set both variables to the same value.
53-
:::
50+
At the root of the project, create a `.env` file to hold your API key.
51+
There are 2 variables that need to be set in the `.env` file, paste your API key as the value for both these keys:
52+
53+
1. `SKY_API_KEY` (used by the `@xstate/cli` to fetch the machine config).
54+
2. `VITE_SKY_API_KEY` (used by the Vite React app to connect to Sky).
55+
56+
![.env file](../static/assets/sky-getting-started/code-env-file.png)
5457

5558
## Step 5: Initialize the actor in the starter project
5659

0 commit comments

Comments
 (0)