January 21, 2024

How to build ShopwarePwa locally in minutes

Do you only have a few minutes to install everything you need to have Shopware Pwa locally? Are you afraid of having to stay there all night? Don’t worry, here’s how to do everything in less than twenty minutes. Ready?

Table of contents:

Install Warden if you don’t have already (2 minutes)

Install Warden as described in the documentation.

brew install wardenenv/warden/warden
warden svc up

You can also use the dockware docker setup and skip the following step. It’s faster, but I still prefer a warden environment because it’s stronger and better supported.

Build Shopware (8 minutes)

Follow the steps on the Warden documentation for Shopware

  1. Init shopware
warden env-init exampleproject shopware
  1. Check the .env created in the project root with the previous command and adjust on your convenience
  2. Sign the SSL certificate
warden sign-certificate exampleproject.test
  1. Configure the project to install Shopware in the subfolder ./webroot
perl -pi -e 's#^WARDEN_WEB_ROOT.*#WARDEN_WEB_ROOT=/webroot#' .env
  1. Clone the project
git clone git@github.com:shopware/development.git ./webroot
  1. Start the project.
warden env up
echo $'const:\n  APP_URL: "https://app.exampleproject.test"\n' > .psh.yaml.override
./psh.phar install
  1. Shopware is up and running!

Install ShopwarePwa plugin (2 minutes)

  1. Enter the shopware warden env
warden shell
  1. Install the plugin
composer require shopware-pwa/shopware-pwa
bin/console plugin:refresh
  1. Make sure the extension is installed and enabled in: Admin → My extension → PWA integration

Install Shopware Pwa (5 minutes)

  1. Clone @vuestorefront/shopware-pwa
git clone git@github.com:vuestorefront/shopware-pwa shopware-pwa
  1. Prepare the project
yarn
yarn start
cd test-project/
  1. In /test-project folder create a shopware-pwa.config.js
module.exports = {
  shopwareEndpoint: "https://app.exampleproject.test/",
  shopwareAccessToken: "YOUR-SHOPWARE-ACCESS-TOKEN",
  shopwareDomainsAllowList: ["https://app.exampleproject.test/"]
};

You will find your shopwareAccessToken in: Admin → Sales Channel → Storefront → Api Access key

  1. Start the frontend
yarn shopware-pwa domains
yarn dev
  1. ShopwarePwa is up and running at http://localhost:3000/

Very fast right? Unfortunately, races against time are not always so easy. Al Pacino and Jack Lemmon in “Glengarry Glen Ross” will have to sweat a lot more to save their jobs

“Glengarry Glen Ross” James Foley 1992

Irene Iaccio

Freelance web developer