Skip to content

Commit

Permalink
DEVDOCS-0000: [update] Add new stencil-cli options (#710)
Browse files Browse the repository at this point in the history
<!-- Ticket number or summary of work -->
# [DEVDOCS-000]


## What changed?
<!-- Provide a bulleted list in the present tense -->
* add new stencil-cli options to bundle and push
* add new section on theme optimization on source maps

## Release notes draft
Tools that provide automatic error reporting, session playback, and
optimization suggestions can rely on source maps to give more readable
insight. This update adds additional options to stencil-cli to optimize
your themes performance with such tools.

ping @bc-traciporter

---------

Co-authored-by: Traci Porter <[email protected]>
  • Loading branch information
bc-0dp and bc-traciporter authored Dec 13, 2024
1 parent 64c0062 commit ff627f8
Show file tree
Hide file tree
Showing 2 changed files with 18 additions and 1 deletion.
13 changes: 12 additions & 1 deletion docs/storefront/stencil/cli/options-and-commands.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -107,9 +107,18 @@ stencil start --open # opens live theme preview in default browser
Bundles up the theme into a structured `.zip` file, which can be uploaded to BigCommerce.

```shell filename="Usage: stencil bundle" copy
stencil bundle
stencil bundle [OPTIONS]
```

| Option |Alias| Description |
|-|--|--|
|`--dest DESTINATION` |`-d` | Where to save the zip file. It defaults to the current directory you are in when bundling (default: `./`) |
|`--source-maps` |`-s` | Include source-maps in the bundle. This is useful for debugging. |
|`--name FILENAME` |`-n` | What do you want to call the zip file. |
|`--marketplace` |`-m` | Runs extra bundle validations for partners who can create marketplace themes. |
|`--timeout TIMEOUT` |`-t` | Set a timeout for the bundle operation. (default: "60") |
|`--help` |`-h` | Output usage information |

## stencil pull

Pulls the configuration from the active theme on your live store and updates your local configuration. This is useful if any theme settings have been changed within Page Builder, as it will prevent you from overwriting them with your next theme upload by first syncing them.
Expand Down Expand Up @@ -144,6 +153,8 @@ stencil push [<OPTIONS>]
|`--host HOSTNAME` | | Specify the API host (default: `api.bigcommerce.com`) |
|`--file FILENAME` |`-f` | Specify the filename of the bundle to upload |
|`--save FILENAME` |`-s` | Specify the filename of the saved bundle |
|`--source-maps` |`-S` | Include source-maps in the bundle. This is useful for debugging. |

|`--channel_ids CHANNEL_ID` |`-c` | Specify the channel ID(s) of the storefront, if the store has multiple storefronts |
|`--activate VARIATIONNAME` |`-a` | Skip activation prompt; specify variation or leave blank to select first variation |
| |`-a -c {{channel_id_1 channel_id_2 ... channel_id_n}}`| Allows you to apply a theme to selected channels (at least one channel id should be provided) |
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,12 @@ After removing some unused bytes, minifying JavaScript files, and resizing an im

Using Lighthouse is an important step in optimizing your site and improving the user experience. It is an easy to use best practice tip that provides powerful insights.

## Using error detections and optimization tools
Tools that automatically record errors and provide session playback and optimization suggestions often benefit from having access to the themes' source maps in production.
They provide a way to translate between minified code, designed to decrease webpage load times and the source code the developer writes.

[Stencil CLI](/docs/storefront/stencil/cli/options-and-commands) provides convenient options for bundling the production-ready theme with source maps included.

## Designing for accessibility

Accessible sites have benefits, including faster load speed, better SEO, and useful for marketing your product. See [Developing Themes for Accessibility](/docs/storefront/stencil/themes/accessibility) for more information.
Expand Down

0 comments on commit ff627f8

Please sign in to comment.