Shopware Composable Frontends is a framework for building custom storefronts based on cloud technology. The them based customization becomes difficult to maintain as the number of dependencies increases. The headless approach in Shopware Frontends gives the ability to separate the Frontend from the Backend, increasing agility, scalability and flexibility. This type of open architecture comes at the cost of configurability and feature completeness vs flexibility.
Why use Shopware Composable Frontend?
Using the Shopware Composable Storefront, companies can mix and match features that they need for their storefront. Decoupled architecture means that a component in a store can grow unconsciously, leading to uncontrolled scalability. This architecture is more agile and allows for fast creation of new services. It also makes things less complicated, and therefore, easier to do. It is also more open, which encourages creativity and competition within a business.
Environment requirement for Shopware Composable Storefront
- Shopware API
There is no distinction between shopware frontend when it comes to provisioning Shopware API. Cloud and self managed Shopware 6 instance are both supported by Shopware frontend. You can find the Endpoint and API key inside the admin panel of the shop. In the endpoint of your store add /store-api at the end.
- Node.js
For the development of Shopware composable storefront, it requires Node.js Runtime Environment. we recommended to use the version is minimum 22.0 or greater than for the better experience. You can simply download the Node.js from the official site. - Package Manger
The composable storefront supports pnpm, npm and yarn package manager. I recommended to use pnpm because it saves the disk space and also provide the fast installation speed.
Step to setup composable storefront.
Follow these steps to configure your composable storefront.
We are using the Demo Storefront provided by Shopware. It is a reference implementation of an online store UI that comes with default features such as a cart, navigation, checkout, and CMS pages. Alternatively, you can opt for the blank template.
- Pull the template file from the github repository.
npx tiged shopware/frontends/templates/vue-demo-store demo-store
Running this command will create a folder named demo-store. Afterward, navigate to that folder.
- After pulling the template from GitHub, run the command to install all the required packages.
pnpm i
- Once the installation command is complete, run this command to start the application. By default, it will launch on localhost:3000.
pnpm run dev
In this template, the endpoint and API access key are already provided. If you want to change the API access key or endpoint, open the nuxt.config.ts file. Inside the file, update the accessToken and endpoint values with the ones you retrieved from the Shopware admin panel. Once you save the changes, the template will automatically restart and reflect the updates based on your Shopware admin settings.
Please contact us at manish@bay20.com or call us at +91-8800519180 / +91-9582784309 for any support related to shopware. You can also visit the Shopware development page to check the services we offer.
