Skip to content

Frontend App Installation

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:
shell
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

shell
cp .env.template .env
KeyRequired?Description
ORIGINYesThis is current frontend app domain. E.g: https://dsr.shopware.io
SHOPWARE_STOREFRONT_URLYesThis is default Shopware storefront domain. E.g: https://shopware.store
SHOPWARE_ADMIN_APIYesThis is Shopware admin-api domain server. E.g: https://shopware.store/admin-api
SHOPWARE_STORE_APIYesThis is the Shopware store-api domain server. E.g: https://shopware.store/store-api
SHOPWARE_STORE_API_ACCESS_TOKENYesThis 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_MERCURENoThis is the flag for development only. When the value = 1, it means your app is running with unsecured Mercure.

Example .env:

shell
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
shell
npm install -g pnpm
  • Install dependencies
shell
pnpm install
  • Run dev server
shell
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
shell
npm install -g pnpm
  • Install dependencies
shell
pnpm install
  • Build
shell
pnpm build

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

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