Tutorial – Setting Up BigCommerce Stencil Template Testing/QA Environment

I’ve been helping out some friends of mine move their existing BigCommerce Blueprint template to the BigCommerce’s new theme engine called Stencil. To ensure that I did a good job moving the theme over to Stencil, I needed to give my friends the ability to test the new theme without compromising their existing site. Hence, we need a good ole fashion QA environment, not running from my localhost on my computer. This tutorial will cover the steps I took to enable a BigCommerce Stencil theme Testing/QA environment I can share with my friends.

The first step is to get yourself a server. I really like the guys over at Digital Ocean, so I’m going to start by getting a server setup there. For this, I will use a standard Ubuntu Server image and build up what we will need from there.

Step 1 – Setup Ubuntu Server With Dependencies

I started with a standard Ubuntu 18.04 Server install. Install NodeJS:

sudo apt install nodejs

Install Node Version Manager https://github.com/nvm-sh/nvm#install–update-script

Install and Use NodeJS 8.1 (The Current Version needed to run Stencil CLI):

nvm install 8.1.0
nvm use 8.1.0

Install Stencil CLI:

npm install -g @bigcommerce/stencil-cli

Clone Project:

git clone ...

Step 2 – Open Port 3000 To The World

In order for you to access the server stencil runs when you start the application, you will need to open the port it runs on out to the world. That port is 3000:

sudo ufw allow 3000/tcp

Step 3 – Run The Stencil Start Command

stencil start

Step 4- Goto Your New Running Test Environment

Goto http://[ip_address]:3000/

Leave a Reply