You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: src/pages/guides/getting_started/index.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -35,7 +35,7 @@ The [Quickstart](quickstart.md) steps you will follow to get started building yo
35
35
1.[Set up](quickstart.md#prerequisites) your local environment.
36
36
1.[Create a new add-on project](quickstart.md#step-1-create-your-add-on-project)
37
37
1.[Build and start your add-on](quickstart.md#step-2-build-and-start-your-add-on).
38
-
1. Log in to [the beta version of Adobe Express](https://new.express.adobe.com/new).
38
+
1. Log in to [Adobe Express](https://new.express.adobe.com/new).
39
39
1. Enable the [developer mode](quickstart.md#step-3-enable-add-on-development-mode-first-time-only) (one time only).
40
40
1.[Load and run your add-on](quickstart.md#step-4-load-and-run-your-add-on) directly in Adobe Express.
41
41
1.[Continue developing your add-on](quickstart.md##step-5-edit-your-add-on), seeing your changes immediately appear in, allowing you to iterate quickly.
This command will create a new add-on based on a basic `javascript` template. See the [Templates section](dev_tooling.md#templates) in the **Development Tools** page for more details on the built-in templates available with the [Adobe Express add-on CLI](#cli).
43
43
44
+
**Note**: You'll be prompted to login to your Adobe account and you may also be prompted to accept the "Adobe Developer Terms of Use" if you haven't done so previously. You may also be prompted to configure SSL, and you'll want to do this step to ensure that your add-on can be loaded inside of Adobe Express while you develop it.
44
45
45
-
**For Windows Users:** If you're using the CLI in the terminal, you'll need to add `openssl` to the `path` under Environment Variables. If `git` is installed, `openssl` can be found at `C:\Program >Files\Git\usr\bin`. Otherwise, you can download `git` from https://git-scm.com/downloads, and add the directory location to the `path` variable in your Environment Variables.
46
+
**For Windows Users:** If you're using the CLI in the terminal, you'll need to add `openssl` to the `path` under Environment Variables. If `git` is installed, `openssl` can be found at `C:\Program >Files\Git\usr\bin`. Otherwise, you can download `git` from https://git-scm.com/downloads, and add the directory location to the `path` variable in your Environment Variables.
46
47
47
48
48
49
@@ -63,12 +64,13 @@ npm run start;
63
64
The `start` script will display messages like the following after it executes:
64
65
65
66
```bash
66
-
Your panel 'hello-world' can now be sideloaded
67
-
By enabling the Developer Mode </> from the **Add-ons** panel.
67
+
Done. Your add-on 'hello-world' is hosted on: https://localhost:5241/
68
+
69
+
You can now sideload your add-on by enabling the Developer Mode in the Add-ons panel.
68
70
```
69
71
70
72
## Step 3: Enable add-on development mode (first-time only)
71
-
- Navigate to the [beta version of Adobe Express](https://new.express.adobe.com/).
73
+
- Navigate to [Adobe Express](https://new.express.adobe.com/).
72
74
- Click on your user avatar in the top righthand corner and choose **Settings**.
- Once clicked, a modal will appear where you will provide the URL of your locally hosted add-on.
86
95
87
-
**Note:** Use the default `https://localhost:5241` supplied unless you are intentionally using a different port.
96
+
**Note:** Use the default `https://localhost:5241` supplied unless you are intentionally using a different port.
88
97
89
-
- Check the *I understand the risks of loading an add-on from an external server* checkbox and press the **Connect** button.
90
-
- Your add-on should now be displayed in the add-ons panel on the right side of your Adobe Express tab running in your browser.
98
+
Check the *I understand the risks of loading an add-on from an external server* checkbox and press the **Connect** button.
91
99
92
-
100
+
101
+
102
+
- The **Add-on Development** panel will expand and show a message that the add-on is connected in the log, along with the name and version of your add-on. Click on the down arrow icon to collapse the panel:
103
+
104
+
105
+
106
+
- To run your add-on, simply click on it from the **In development** panel. Your add-on should now be displayed in the add-ons panel on the right side of your Adobe Express window:
107
+
108
+
93
109
94
110
95
111
## Step 5: Edit your add-on
96
-
Now, while your add-on is still loaded and running, open the `src/index.html` file and update the **"Hello World!"** string in the `<body>` below:
112
+
Now, while your add-on is still loaded and running, open the `src/index.html` file and update the **"Click me"** string in the `<button>` below:
97
113
98
-
114
+
99
115
100
-
to **"My first add-on"**:
116
+
to **"Say hello"**:
101
117
102
-
118
+
103
119
104
120
Note the terminal where your add-on is running will display messages showing that the `src` has been rebuilt like below. This is due to the hot module reload feature built into the CLI.
105
121
@@ -111,14 +127,13 @@ Go back to your browser where your add-on is running in Adobe Express, and notic
111
127
112
128
You can continue to update your code while your add-on is running and the add-on will automatically be rebuilt.
113
129
114
-
Note, however, any changes to your `manifest.json` will require a manual reload of your add-on. The **Add-on Development** panel will indicate this in the log messages, and the **Refresh** button can be used to reload the add-on directly within Adobe Express. You can try this by updating the `name` field in the `src/manifest.json` file of your running add-on to **My first add-on**, for instance:
130
+
**Manifest updates**<br/>
131
+
Any changes to your `manifest.json` will *require a manual reload of your add-on*. The **Add-on Development** panel will indicate this in the log messages, and the **Refresh** button can be used to reload the add-on directly within Adobe Express. You can try this by updating the `name` field in the `src/manifest.json` file of your running add-on to **"Say hello"**, for instance:
115
132
116
133
117
134
118
135
Then, switch back to your Adobe Express window and you should see a message that changes have been detected in your manifest, such as below:
* Updated templates for both iframe and script runtime add-ons:
42
+
43
+
- All new add-ons created (other than those based on javascript) use `spectrum-web-components` with the Express theme pre-set.
44
+
- React-based templates include [`swc-react`](https://opensource.adobe.com/spectrum-web-components/using-swc-react/) setup.
45
+
- The `javascript-with-editor-apis` template has been removed in this version but replaced with the option from the CLI to [include the script runtime](../references/scriptruntime/#cli-prompt-to-include-script-runtime) when creating a new add-on.
46
+
47
+
* New type support for typescript based add-ons.
48
+
* Ability to recreate your SSL certificates.
49
+
50
+
#### Documentation updates
51
+
- Updated [Script Runtime Reference docs](../references/scriptruntime/#cli-generated-script-runtime-add-on) to reflect the new CLI prompt to include script runtime (vs the specific template).
52
+
- Updated [Getting Started guides](../guides/getting_started/) documentation and screenshots to reflect the **new Add-on Launchpad panel update** to the new **two-tab view** for "Discover" and "Your Add-ons".
53
+
23
54
## 2023-09-26
24
55
### Removed
25
56
- Removed the experimental APIs notes/warnings around the **Audio APIs and User APIs** since they **are now stable**.
Copy file name to clipboardexpand all lines: src/pages/references/scriptruntime/index.md
+33-8
Original file line number
Diff line number
Diff line change
@@ -52,11 +52,42 @@ To use the script runtime in your add-on, start by defining a new `script` entry
52
52
]
53
53
```
54
54
55
-
The JavaScript code in the file referenced can then access any of the injected global objects and module APIs defined in all of the APIs outlined in this set of references ([communication APIs](./communication/), [Web APIs](./web/) and [editor APIs](./editor/).
55
+
The JavaScript code in the file referenced can then access any of the injected global objects and module APIs defined in all of the APIs outlined in this set of references ([communication APIs](./communication/), [Web APIs](./web/) and [editor APIs](./editor/)).
56
+
57
+
### CLI Generated Script Runtime Add-on
58
+
59
+
The quickest way to get started with a scaffolded project set up with the script runtime bindings for you is via the CLI. When creating a new add-on, the CLI will prompt you to choose from the [base templates](../../guides/getting_started/dev_tooling.md#templates), then ask if you want to include the script runtime:
60
+
61
+
62
+
63
+
Choose `Yes` at the prompt to include the script runtime setup in your generated project. The project structure that's generated will differ depending on which base template you chose, but the two important additions to note, are the existence of a `script` entry point in your `manifest.json`, and the `code.js` file it references.
64
+
65
+
```json
66
+
"entryPoints": [
67
+
{
68
+
"type": "panel",
69
+
"id": "panel1",
70
+
"main": "index.html",
71
+
"script": "code.js"
72
+
}
73
+
]
74
+
```
75
+
<InlineAlertslots="text"variant="info"/>
76
+
77
+
Since these APIs are still experimental, choosing to include the script runtime when creating an add-on with the CLI also automatically includes the `"experimentalApis": true` in the `manifest.json`.
78
+
79
+
The screenshot below shows what the default script-based add-on generated from the CLI looks like when running:
Please refer to the [Using the CLI](../../guides/getting_started/dev_tooling/#using-the-cli) section to get more information on how to use the CLI and create new add-on.
86
+
<br/>
56
87
57
88
## Code Samples
58
89
59
-
The following [code samples](https://github.com/AdobeDocs/express-add-on-samples/tree/main/script-runtime-samples) have been provided to help you get started using these new script runtime APIs.
90
+
The following [code samples](https://github.com/AdobeDocs/express-add-on-samples/tree/main/script-runtime-samples) have also been provided to help you get started using these new script runtime APIs.
@@ -74,11 +105,5 @@ A more comprehensive example of using the [editor APIs](./editor/) to add a page
74
105
75
106
Debugging with breakpoints from the script runtime (via `code.js`) is currently not supported and for the time-being, only console logging (via `console.log()`) can be used. However, support for debugging by applying breakpoints in the code will be available in the near future. Please refer to [Example Code Snippet](./editor/#example-code-snippet), where a `rectangle` object is printed to console for debugging purpose.
76
107
77
-
## CLI template for script based add-on
78
108
79
-
The add-on CLI contains built-in, pre-configured templates to allow you to create an add-on project based on your favorite development stack in the quickest possible manner. There are currently five different template options available. To get started with script based add-on using javascript with editor APIs, you must choose the template named `javascript-with-editor-apis`. Please refer to [Using the CLI](../../guides/getting_started/dev_tooling/#using-the-cli) section to get more information on how to use the CLI and create new add-on.
80
-
<br/>
81
109
82
-
The sample script based add-on created using template named `javascript-with-editor-apis` will look as shown from [Add-on Development Tools Panel](../../guides/getting_started/dev_tooling#add-on-development-tools-panel):
0 commit comments