Frontend App Installation

WARNING

After finishing the installation of the plugin in Shopware, we will run and connect the frontend template with Shopware. The frontend template is built based on the Shopware Frontends framework, so it inherits from Shopware Frontends & Nuxt 3 concepts.

Get the frontend template

• From the Digital Sales Rooms plugin, you can find the dsr-frontends folder by:

cd ./templates/dsr-frontends

• This folder contains all the source code for the frontend template. You can copy the entire source code and push it to your own private repository for easy customization in the future.

How to run?

Generate env file

cp .env.template .env

Key	Required?	Description
ORIGIN	Yes	This is current frontend app domain. E.g: https://dsr.shopware.io
SHOPWARE_STOREFRONT_URL	Yes	This is default Shopware storefront domain. E.g: https://shopware.store
SHOPWARE_ADMIN_API	Yes	This is Shopware admin-api domain server. E.g: https://shopware.store/admin-api
SHOPWARE_STORE_API	Yes	This is the Shopware store-api domain server. E.g: https://shopware.store/store-api
SHOPWARE_STORE_API_ACCESS_TOKEN	Yes	This is the Shopware Access Token to connect to Shopware API. Head to sales channel you assign the Digital Sales Rooms domain, find the API access section, and copy the API access key
ALLOW_ANONYMOUS_MERCURE	No	This is the flag for development only. When the value = 1, it means your app is running with unsecured Mercure.

Example .env:

ORIGIN=https://dsr.shopware.io
SHOPWARE_STOREFRONT_URL=https://shopware.store
SHOPWARE_ADMIN_API=https://shopware.store/admin-api
SHOPWARE_STORE_API=https://shopware.store/store-api
SHOPWARE_STORE_API_ACCESS_TOKEN=XXXXXXXXXXX

For development

• Install pnpm with global scope

npm install -g pnpm

• Install dependencies

pnpm install

• Run dev server

pnpm dev

Usually, port 3000 is the default port so that you can access the domain of the Frontend App http://localhost:3000/

For production

• Install pnpm with global scope

npm install -g pnpm

• Install dependencies

pnpm install

• Build

pnpm build

After build code, please read here for how to make the deployment.

The Following section guides you to 3rd party setup procedures.