Database Development
BigCommerce’s theming system Stencil gives developers powerful options for the design, layout and capabilities of their storefronts. At the center of this theming system is Stencil CLI (Command Line Interface) — a local development environment that allows you to easily customize, build and test your themes.
Whether you’d like to begin your first BigCommerce project or increase your productivity, this guide will walk you through how to get started with Stencil CLI and will explain why this tool is so vital to every BigCommerce developer’s toolkit.
What is Stencil CLI?
Stencil CLI is a command-line interface for theme developers working with BigCommerce. As a Command Line Interface, Stencil CLI gives developers the ability to work locally and customize themes before affecting the live store. Within Stencil CLI you can:
- Preview their theme changes in real time before deploying
- Use live-reload to see your edits reflected immediately
- Bundle and upload your new custom themes
- Work in an independent development environment that is much more efficient
This tool is ideal for teams that want to manage versioning, testing, and deployment of storefront updates.
Preparation Prerequisites for Stencil CLI
Before you start running Stencil CLI, you need to have a couple of things ready to ensure a smooth setup:
- Node.js and npm: Needed to run the CLI tool and to manage dependencies.
- BigCommerce Store: You will need access to a store – a sandbox or a live store will work.
- API Credentials: Your store URL, API token and store hash are required to authenticate.
- Git: While this is not required, it can be useful to use Git for version control when developing your theme.
All the above prerequisites will allow you to set up an efficient, stable development environment.
Installation and Setup of Stencil CLI
Now that your prerequisites are ready, you can install Stencil CLI globally. Upon install, initializing a new theme means connecting to your store using your API integration credentials. On initialization, a .stencil config file will be created that will save your store settings for local development.
The .stencil config file will allow you to be securely configured and safely push changes to your BigCommerce store.
Choose or Download a Theme
BigCommerce has created a default starter theme called Cornerstone that is widely used and updated regularly. Developers can either choose to start from scratch or clone Cornerstone and tailor it to meet the project specifications.
Once downloaded, the theme is ready for local editing and preview.
Executing the Local Development Server
Now that everything is set up, opening the development server provides you the local view of your store with all applicable customizations live. A big advantage of using Stencil CLI is that it incorporates a live reload feature, which refreshes your browser every time a file is saved — this can instantly speed up your testing and development cycles.
This means developers can view design and functionality iterations without risk of disruption on their live site.
Pushing Your Theme to Production
Once you are finished with development and testing, Stencil CLI will easily bundle your theme and upload it to the BigCommerce admin. It will create a ZIP file version of your theme, which you can push live or store and use later for deployment.
The bundling is very clean and efficient, allowing you to keep track of your version control and process.
Key Stencil CLI Commands to Familiarize Yourself With
In terms of working with Stencil CLI, the developer has a handful of core commands that they use often as they manage their workflow:
- Run the development server so they can view their site locally
- Init a project so they can configure their connection credentials
- Bundle their theme so it is ready to upload
- Push their theme to their store’s theme library
- Lint their codebase so they can maintain clean, error-free code
These commands fit into different pieces of the theme development lifecycle to help make development easier from the first step, to the last.
Why Stencil CLI is Awesome for Developers
The use of Stencil CLI enhances the overall experience of building a theme. Stencil CLI is flexible, fast, and built with consumption in mind in real-world development scenarios. Developers will receive the following:
- Real-time feedback without making changes to the live store
- Testing environments that are safer to test new features or design updates
- Compatibility with existing version control processes with tools like Git
- Fast-deployment without having to manually upload via the BigCommerce dashboard
Stencil CLI is more than a tool, it supports a professional workflow that is foundational to BigCommerce development.
Conclusion: Build Smarter with Stencil CLI
If you’re serious about customizing BigCommerce storefronts, then you need to become familiar with Stencil CLI. Stencil CLI gives you the speed, flexibility, and control you need to create beautiful, high-performing online storefronts while minimizing risk on your live environment.
From local previews to bundling themes and deploying, Stencil CLI simplifies every aspect of the development cycle. Start using Stencil CLI today to get the most out of your BigCommerce theme customization!
