In this tutorial we’ll walk through a basic stencil command-line interface installation on Mac OS downloading the base theme cornerstone and initializing and launching the CLI full documentation on these instructions can be found on our stencil developer portal.
Before you can install the stencil CLI there are some dependencies you must have on Mac you must install the latest stable version of Xcode development tools this is available in the App Store after that you’ll need to have no das.
Please refer to the documentation for the current recommended version once you’ve got the dependencies covered installing the CLI is simple just use the following command in terminal during the installation you may see warnings about deprecation of the good reporter interface or other components you can safely ignore these warnings after the CLI finishes.
Installing you’ll want to clone a base corner storing theme to your local environment in terminal navigate to whichever directory you want to install the base theme in then use the following command to clone the paym to your chosen directory.
Next NPM must be used to install the stencil utils module in the theme you want to navigate into the theme directory then run the following command keep in mind if you clone a new version of cornerstone at a later date you must rerun this command in the new theme directory before stencil can be initialized.
An API account needs to be created on the Bigcommerce Store that you will be developing for to do this log into the stores control panel and navigate to advanced settings API accounts currently only the store owner has access to this area of the control panel put the option in the upper left corner.
Create API account add a user name I just use stencil for this then set your themes scope read-only lets you connect to the store with browser sinks you can see how changes will look on the storefront using the modify scope will allow you to apply themes to a store using the command-line interface.
I’ll set modify as my scope as we’ll use this in a later post then I’ll say it once you save you’ll get a pop-up window with your client ID and access token you’ll want to save these for initializing stencil a text file will also be downloaded so you have a copy of the credentials once you click done you won’t be able to view the token information again.
So keep the text file in a safe location now that the API accounts has been created stencil can be initialized in terminal you should still be within the theme directory from here use the command stencil in it. It should now prompt you that a home page URL so the story you’re going to be developing against locally go ahead and enter that now.
Next it’ll ask you for the port you’d like to run the store on it defaults to 3,000 which is what we recommend next it’s going to ask for your API credentials first you’ll need the client ID then the access token once the credentials are entered you should get a confirmation that stencil is initialized from here you can launch your theme using the stencil start command once it started you can see a list of URLs to access the local store including external URLs you can use for testing on other devices here I’ll use localhost 3000 and another tab and I can now see what the production store would look like with this locally installed stencil being my next set of posts we’ll take a deeper look at making customizations to a stencil theme using the CLI you or contact us now if you need help with installing stencil CLI for Mac.