Skip to content

Commit

Permalink
(no ticket): [update] Widget Builder, remove shell tags from code blo…
Browse files Browse the repository at this point in the history
  • Loading branch information
Sarah Riehl committed Mar 13, 2023
1 parent 5ee095a commit 7b82bf8
Showing 1 changed file with 25 additions and 27 deletions.
52 changes: 25 additions & 27 deletions docs/api-docs/storefront/widgets/widget-builder.mdx
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
# Widget Builder



Widget Builder is a command-line tool that lets you build, edit, and preview custom storefront widgets in real time, outside the context of your BigCommerce store.

This article is a guide to help you learn how to use Widget Builder.
Expand Down Expand Up @@ -35,19 +34,19 @@ Refer to the [Widget Builder README.md](https://github.com/bigcommerce/widget-bu

3. Navigate to the `widget-builder` directory, and install Widget Builder using the following command:

```shell copy
``` copy
npm run install-cli
```

To retrieve usage information and view supported options and commands, run the following command:

```shell copy
``` copy
widget-builder -h
```

**Sample output:**

```shell copy
``` copy
Usage: widget-builder [options] [command]
Options:
Expand All @@ -72,7 +71,7 @@ Once you have installed Widget Builder, the next step is to configure your devel

**Sample input:**

```shell showLineNumbers copy
``` showLineNumbers copy
# organized by name of store
cd ~/bc-projects/tools-r-us
mkdir widget-workshop
Expand All @@ -83,27 +82,26 @@ cd widget-workshop

**Sample session:**

```shell copy
~/bc-projects/tools-r-us/widget-workshop % widget-builder init
``` copy
~/bc-projects/tools-r-us/widget-workshop % widget-builder init
Thank you for using Widget Builder
Thank you for using Widget Builder

This guide will help you get your environment set up.
This guide will help you get your environment set up.
Before continuing, please make sure you've created or received a Store API account.
You'll need those credentials in order to generate the appropriate configurations.
You can find more information here. https://support.bigcommerce.com/s/article/Store-API-Accounts#creating
Before continuing, please make sure you've created or received a Store API account.
You'll need those credentials in order to generate the appropriate configurations.
You can find more information here. https://support.bigcommerce.com/s/article/Store-API-Accounts#creating
? Are you ready to continue? You may press any key to continue (Y/n)
> Y
? What is the Client ID?
> xxxxxxxxxxxxx
? What is the Access Token?
> xxxxxxxxxxxxx
? What is the API Path?
> xxxxxxxxxxxxx
[2021-09-08T15:12:40.271Z] Successfully created your configuration, you're all set!
? Are you ready to continue? You may press any key to continue (Y/n)
> Y
? What is the Client ID?
> xxxxxxxxxxxxx
? What is the Access Token?
> xxxxxxxxxxxxx
? What is the API Path?
> xxxxxxxxxxxxx
[2021-09-08T15:12:40.271Z] Successfully created your configuration, you're all set!
```
## Reset or create parallel configurations

Expand All @@ -121,13 +119,13 @@ To use Widget Builder as a development tool, you must run `widget-builder` comma

Jump-start widget development with Widget Builder's `create` command, which creates a child directory, populates it with blank template files, and starts a development server. To use the generator, run the following command:

```shell copy
``` copy
widget-builder create <[path/to/]some-widget>
```

**Sample output:**

```shell copy
``` copy
[2021-09-08T17:29:38.868Z] Successfully created ./some-widget
[2021-09-08T17:29:38.870Z] Successfully created schema.json in ./some-widget/schema.json
[2021-09-08T17:29:38.871Z] Successfully created config.json in ./some-widget/config.json
Expand All @@ -142,12 +140,12 @@ Your default browser will open automatically and display a text widget on port 8

Widget Builder's `start` command will start the development server for an existing widget that is located in a child directory of the environment root. Navigate to that environment root, then run the following command:

```shell copy
``` copy
widget-builder start <[path/to/]widget-name>
```
**Sample output:**

```shell copy
``` copy
[2021-09-08T17:29:39.564Z] Starting widget-builder at http://localhost:8080!
[2021-09-08T17:29:39.887Z] Socket connected.
```
Expand All @@ -158,7 +156,7 @@ Your default browser will open automatically on port 8080.

To publish a widget to your BigCommerce store, navigate to its environment root, then run the following command:

```shell copy
``` copy
widget-builder publish <[path/to/]widget-name>
```

Expand Down

0 comments on commit 7b82bf8

Please sign in to comment.