Setup stencil for theme development on your local machine gives the developer the power to edit and preview the theme locally without any impact on the main live storefront. Its built-in capabilities make easier testing across desktop, mobile, and tablet devices a breeze. After, when developers finish the work, they can either push from the terminal directly or upload the themes to BigCommerce storefronts.
This blog contains the instructions to set up the stencil for theme development as well as live previewing.
Setup Stencil On Windows:
On Windows, stencils can be installed using two methods, but we prefer manual installation.
Method 1: Manually installation
If you are good at the installation and configuration of Python or Node.js environments on Windows. Then, without a doubt, you can easily install all the required dependencies. And then, set up stencil for theme development using this method.
Required Dependencies:
To download these dependencies. And then, setup stencil for theme development locally follow the steps below:-
Step-1: Visit the Git site and then, download Git on your system by clicking on the download button.
Step-2: Now, select the version of your system and then, download and install it.
Step-3: After, installing the git. Then, download the node.js by clicking on the downloads button.
Step-4: After, select the latest or recommended one and then, download and install on your system.
Step-5: Finally, they’re installed and configured and then, use npm to install Stencil CLI through the terminal.
npm install -g @bigcommerce/stencil-cliMethod 2: Installation using Chocolatey
If you prefer the smooth process of installation. Then, you can use the Chocolatey package manager to install the stencil CLI’s dependencies. To do so, open PowerShell as an administrator, as well as run the following commands:
# Install Chocolatey
iex ((New-Object System.Net.WebClient).DownloadString("https://chocolatey.org/install.ps1"))
# Install git if you don't have it
choco install git
# Install nvm windows and stencil-compatible node.js
choco install nvm; nvm install 18.15.0; nvm use 18.15.0
# Install Stencil CLI
npm install -g @bigcommerce/stencil-cliSetup Stencil On Mac:
To setup stencil for theme development on Mac, run the following commands:
# For ARM based macs
arch -x86_64 /bin/zsh
# Install Node Version Manager(nvm)
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.0/install.sh | bash
# Install stencil CLI supported version of Node.js
nvm install 18.15.0
# And then, switch to stencil CLI supported version of Node.js:
nvm use 18.15.0
# Finally, install Stencil CLI
npm install -g @bigcommerce/stencil-cliSetup Stencil On Linux:
Required Dependencies:
- g++
- Libsass
- git
After, installing the required dependencies. Then, install stencil CLI and dependencies on debian-based distros. Open a terminal and then, run the following commands:
# Download nvm in case you don't have it, install it.
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.36.0/install.sh | bash
# Reload .bashrc so, nvm command works
source ~/.bashrc
# Easily install and then, use supported node version
nvm install 18.15.0
# And then, switch to stencil CLI supported version of Node.js
nvm use 18.15.0
# Finally, install stencil
npm install -g @bigcommerce/stencil-cli
Live to preview a theme:
After, installing the stencil on your machine. Then, download the theme and now, follow these commands to make that theme preview live.
# First, move into theme directory
cd~/path/to/theme/dir
# And then, second install theme modules
npm install
# Third, initialize a new .Stencil config for the theme add the url of store and
# API access token
stencil init
# Finally, serve a live, browsersync enabled preview of the the theme
stencil start
Conclusion
Execution policy errors
If you receive an execution policy error. While trying to install chocolatey, refer to Microsoft’s Documentation
Chocolatey installation alternatives
For additional details on installing chocolatey and alternative installation options, see the installation page on chocolatey.org.
Please contact us at manish@bay20.com or call us at +91-8800519180 for any support related to Bigcommerce. You can also visit the Bigcommerce development page to check the services we offer.
