Skip to content
Last update: May 8, 2024

Getting Started

In this guide, we will explore the necessary steps to get started with the Virto Commerce platform.

Prerequisites

npm install --global yarn

Warning

Node.js and Yarn have been recently updated. If you wish to upgrade:

  1. Install Node.js v20.
  2. Enable corepack (run from administrator on Windows):

    corepack enable
    

If you have installed yarn globally, uninstall it:

  1. Using npm:

    npm uninstall --global yarn
    
  2. Or using your native Operation System installation tools.

Install vc-storefront

To install vc-storefront:

  1. Clone vc-storefront to a local folder.
  2. Open the appsettings.json file in a text editor.
  3. In the Endpoint section, replace Url, UserName, Password with correct path and credentials for Virto Commerce Platform:

    ...
        "Endpoint": {
            "Url": "https://localhost:5001",
            "UserName": "admin",
            "Password": "store",
    ...
    

Run vc-storefront

To run the vc-storefront application, execute the following commands:

# change the current directory
cd C:\vc-storefront\VirtoCommerce.Storefront
# build and run storefront application
dotnet run
# In future, if you don't need to rebuild you can use that
dotnet run --no-build

Setup Сurrent Theme

To set up the current theme for your storefront, execute the following commands:

# Clone repo into the folder where storefront is installed
# `store-code` can be found in the platform running locally. More -> Shops -> Shop Name -> Code
git clone https://github.com/VirtoCommerce/vc-theme-b2b-vue.git "C:\vc-storefront\VirtoCommerce.Storefront\wwwroot\cms-content\themes\{store-code}\default"
# Change the current directory
cd C:\vc-storefront\VirtoCommerce.Storefront\VirtoCommerce.Storefront\wwwroot\cms-content\themes\{store-code}\default
# install dependencies
yarn install

For Visual Studio Code Users

If you're using Visual Studio Code:

  1. Setup recommended extensions.
  2. Configure Volar Takeover mode.

Development Workflow

Let's explore the development workflow and various commands you can use during development.

Compile and Hot-Reload for Development

  1. Open the .env file in a text editor.
  2. Change APP_BACKEND_URL to the correct endpoint to vc-storefront:

    # .env file
    APP_BACKEND_URL=https://localhost:2083
    
  3. Run command: yarn dev or yarn dev-expose.

  4. Follow the link in the terminal

Type-Check, Compile, and Minify for Production

yarn build

Compile and Minify in Development mode

yarn build:dev

Compile and Minify in Development mode with change tracking

yarn build:watch

Compile to get the artifact to install

yarn compress