DEV Community

Cover image for How can I run natively 'Big Commerce Stencil CLI' on Apple Silicon M1 Chip
Caglar
Caglar

Posted on

How can I run natively 'Big Commerce Stencil CLI' on Apple Silicon M1 Chip

#bigcommerce #stencil #applesilicon #m1chip

I am a front-end engineer who mostly works on a Bigcommerce platform. Bigcommerce uses a handlebar with the 'stencil command line interface' and it requires 'node version manager' (nvm).

I switched my Intel Macbook Pro with M1 Chip Macbook Pro then I couldn't realize this migration will be a little bit ticky.

I installed homebrew then node and nvm packages then I followed the steps on bigcommerce developer website.

However, almost every project gives different errors but all of them are related to the 'node' version. I've gotten few-hour research on Google but these were not about BigCommerce 'stencil-cli',

Jump to 'TL;DR'
Here is the perfect version of the NVM for your delicious Stencil Templates.

# For ARM based macs // for bash
arch -x86_64 /bin/zsh

# For ARM based macs // for Fish Shell
arch -x86_64 /usr/local/bin/fish

brew install node
brew install nvm

# which is LTS for v12
nvm install 12.13.0
nvm alias default 12.13.0
npm install -g @bigcommerce/stencil-cli
Enter fullscreen mode Exit fullscreen mode

Then start your project with

stencil start -o
Enter fullscreen mode Exit fullscreen mode

Current Version Of my NVM

Please check out our website to get more information about BigCommerce Development and Marketing.

Thanks for reading, Happy hacking 🧡

Top comments (2)

Collapse
 
tmcvee profile image
T-McVee •

Hey Caglar, thanks for the post. I tried walking through these steps on my m1 mac however, I'm still getting an errror when I run stencil start..

Error during css compilation by the primary engine:
Error: Top-level selectors may not contain the parent selector "&".
   ╷
20 │ &::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
   │ ^^^^^^^^^^^^^^^
   ╵
  dh-custom/dh-global.scss 20:1  @import
  dh-custom/dh-theme.scss 8:9    @import
  stdin 94:9                     root stylesheet
Will retry with a fallback engine
Enter fullscreen mode Exit fullscreen mode

Do you have any thoughts on what might be causing this? The same project opens fine on my older macbooks.

Collapse
 
caglaroptimum7 profile image
Caglar •

Hi T-McVee, sorry for late response.
You should try this:

*&::placeholder{}
and complile your project witk node-sass

Read next

unifiedcouncil profile image

Understanding Olympiad Result: A Comprehensive Guide for Students and Parents

Unified council -

lord_jastannun profile image

how can i get google employee referrals ?

Jatin Naik -

neotechy profile image

Laravel vs CodeIgniter: A Comprehensive Comparison for Web Development

NeoTechy -

gajanan0707 profile image

Do you need a coding buddy? Meet VSCode Pets.

Gajanan Rajput -