Storefront Boilerplate is built on top of Nuxt, Vue and Tailwind CSS frameworks and uses TypeScript.
The Frameworks section provides a comprehensive list of links to documentation of all relevant technologies.
This guide will show you how to set up your local environment and test in preview and production-like modes.
Make sure to have installed:
git - source code version controlnvm - Node Version Managernode - v20.7.0 or neweryarn - v1redisInstall Node.js
To install the supported Node.js version, we recommend to use of the nvm (Node Version Manager).
nvm install lts/* to download and install the latest supported Node.js version.nvm use lts/* to use the freshly downloaded node version.Install Redis
Installing redis locally version of redis / redis-server is sufficient.
Check Redis documentation for details.
npm install --global yarn
To install Storefront Boilerplate, follow these steps:
.env file Contact your SCAYLE Customer Success Manager to get your GitLab Access Token (OAUTH token).
The Gitlab Access Token provides read-only access via the command line using git to clone the storefront-boilerplate-nuxt-public repository. It doesn't provide any additional access rights or the ability to access the repository via the GitLab UI.
You can get your API keys in the SCAYLE Panel:
Settings > General > API Keys. The source code of available SCAYLE Storefront Boilerplate release versions is distributed via the GitLab repository (storefront-boilerplate-nuxt-public).
The Storefront Boilerplate GitLab repository requires a GitLab Access Token.
Access the storefront-boilerplate-nuxt-public repository
Use the git clone command to checkout the latest source code of the Storefront Boilerplate using OAUTH via HTTPS :
git clone https://oauth2:{INSERT_GITLAB_ACCESS_TOKEN_HERE}@gitlab.com/aboutyou/scayle/core-engine/storefront-unit/storefront-core/storefront-boilerplate-nuxt-public.git
To install all required dependencies, run:
yarn install
For an in-depth explanation of the required environment variables, see Configuration.
To start up the shop application locally, create a local-only .env file.
This .env file will hold all the application's relevant credentials, secrets, and override values.
Storefront Boilerplate contains a .env.example file you can copy and populate with your credentials.
Environment variables defined in the .env.example file must have a {UNIQUE_IDENTIFIER} on a per shop base. They need to be duplicated for every shop that will be run from the project.
It is important to replace the placeholder of {UNIQUE_IDENTIFIER} to be equal to the key (shop.shopId or shop.locale) set of the shops.reduce function in config/storefront.ts.
We strongly recommend using the shopId as {UNIQUE_IDENTIFIER}!
Storefront Boilerplate contains these locales by default:
For your application to start properly, you need to match the configuration files and your shopIDs.
Find ShopID in the SCAYLE Panel: Shops > Dashboard.
config/storefront.ts:
ShopIdconst shops = [
{
locale: 'de-DE',
path: 'de',
shopId: 1001,
currency: 'EUR',
isDefault: true,
},
{
locale: 'en-US',
path: 'en',
shopId: 1028,
currency: 'USD',
},
]
nuxt.config.ts:
const locales = [
{
code: 'de',
iso: 'de-DE',
domain: DOMAIN_PER_LOCALE ? domains.de : domains.default,
file: 'de-DE.json',
},
{
code: 'en',
iso: 'en-GB',
domain: DOMAIN_PER_LOCALE ? domains.en : domains.default,
file: 'en-GB.json',
},
]
RECOMMENDED:
if [shop.shopId] is used -> Overrideable environment variable: NUXT_STOREFRONT_SHOPS_1001_CHECKOUT_USER
if [shop.locale] is used -> Overrideable environment variable: NUXT_STOREFRONT_SHOPS_EN_US_CHECKOUT_USER
Create a local HTTPS certificate, as features like Checkout will require a working HTTPS connection.
To generate a certificate and key we recommend using the mkcert tool.
Follow the mkcert installation instructions (Github) and afterward run:
mkcert --key-file localhost.pem --cert-file localhost.crt localhost
After generating the local key and certificate file, add both to your .env-file as follows
HTTPS_KEY=localhost.pem
HTTPS_CERT=localhost.crt
Your project will now be served on https://localhost:3000.
As the local HTTPS encryption is directly coupled to the HTTPS_KEY and HTTPS_CERT, simply remove or comment out the entries in your .env-file, like this:
# HTTPS_KEY=localhost.key
# HTTPS_CERT=localhost.crt
SOME_OTHER_ACTIVE_KEY=someValue
redis-server instance.yarn dev to start the local dev server of Storefront Boilerplate / Nuxt 3.http://localhost:3000/ to open the project. To start a production-like preview, run:
redis-server instanceyarn buildyarn previewhttp://localhost:3000/ to open the shop.This will run the generated Nuxt application from the .output/ directory, similar to how the application will be deployed on a production server. The only difference is that all relevant NUXT_ runtimeConfig override values are sourced from the local .env file.
As the Storefront Boilerplate uses frameworks like Nuxt and Vue as its foundation, most configuration and usage examples from its respective documentation can and should be used as additional references.
Documentation of used technologies:
Storefront Crash Course
In this SCAYLE Academy crash course, we explore the technical foundations of SCAYLE's storefront, focusing on key aspects such as Nuxt, server-side rendering, and the steps needed to launch your storefront application. By the end, you'll be equipped to create a seamless and optimized user experience.
Robert K. Pauls
