How to use Vue Storefront PWA with Sylius?¶
2. What is Vue Storefront?¶
Vue Storefront is an open-source, platform-agnostic, Progressive Web App (PWA) framework for building e-commerce applications. It is built using Vue.js for building user interfaces. You can think about it as a USB standard for eCommerce frontends - with Vue Storefront you get what is required by a PWA standard in a nice, platform-agnostic environment meaning it could be connected to any eCommerce backend, including Sylius.
3. How to use Vue Storefront with Sylius?¶
In order to use Vue Storefront with Sylius you can use the official integration approved by both Sylius and Vue Storefront. The integration was built by BitBag, Sylius’ leading partner. The backend part of the integration can be accessed in the GitHub repository at BitBag’s organization. This part adds all the necessary GraphQL endpoints to Sylius, making it compatible with the Vue Storefront standards. The frontend part could be found under the same organization’s package named SyliusVueStorefront2Frontend package. If you want to see it in action check out the VSF Demo.
4. Installation - the backend part¶
This part refers to installing the API backend, based on the SyliusVueStorefront2Plugin. Original content could be accessed at this repository page.
Require plugin with composer:
composer require ``bitbag/vue-storefront2-plugin``
Add plugin dependencies to your
config/bundles.php
file:
return [
...
BitBag\SyliusVueStorefront2Plugin\BitBagSyliusVueStorefront2Plugin::class => ['all' => true],
];
Enable API in
config/services.yaml
:
sylius_api:
enabled: true
Add plugin mapping path to your
config/packages/api_platform.yaml
file as the last element:
api_platform:
mapping:
paths:
- '%kernel.project_dir%/vendor/bitbag/vue-storefront2-plugin/src/Resources/api_resources'
Import serialization files in
config/packages/framework.yaml
file:
framework:
serializer:
mapping:
paths:
- '%kernel.project_dir%/vendor/bitbag/vue-storefront2-plugin/src/Resources/serialization'
Import plugin config files in
config/packages/bitbag_sylius_vue_storefront2_plugin.yaml
:
imports:
- { resource: "@BitBagSyliusVueStorefront2Plugin/Resources/config/services.xml" }
You are free to adjust two parameters in the same file:
bitbag_sylius_vue_storefront2:
refresh_token_lifespan: 2592000 # default value
test_endpoint: 'http://127.0.0.1:8080/api/v2/graphql' # default value
Add some external Doctrine mappings:
doctrine:
orm:
mappings:
VueStorefront2:
is_bundle: false
type: xml
dir: '%kernel.project_dir%/vendor/bitbag/vue-storefront2-plugin/src/Resources/doctrine/model'
prefix: 'BitBag\SyliusVueStorefront2Plugin\Model'
alias: BitBag\SyliusVueStorefront2Plugin
Change the Sylius Taxon repository class to add some queries required by GraphQL in
config/packages/_sylius.yaml
:
sylius_taxonomy:
resources:
taxon:
classes:
repository: BitBag\SyliusVueStorefront2Plugin\Doctrine\Repository\TaxonRepository
If you’re extending Sylius ProductAttributeValue entity:
Please use our trait inside: BitBag\SyliusVueStorefront2Plugin\Model\ProductAttributeValueTrait
.
Otherwise, please create an entity, which uses the trait and setup the Sylius resource in config/packages/_sylius.yaml
.
Read more on how to customize models in a different part of Sylius docs if you are not familiar with the process yet.
sylius_attribute:
driver: doctrine/orm
resources:
product:
subject: Sylius\Component\Core\Model\Product
attribute_value:
classes:
model: App\Entity\ProductAttributeValue
Add a new column to the ProductAttributeValue entity in your Doctrine configuration file:
We are using XML for Doctrine mappings but you are free to rewrite it to Annotations or YAML.
<?xml version="1.0" encoding="UTF-8"?>
<doctrine-mapping
xmlns="http://doctrine-project.org/schemas/orm/doctrine-mapping"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://doctrine-project.org/schemas/orm/doctrine-mapping
http://doctrine-project.org/schemas/orm/doctrine-mapping.xsd"
>
<entity name="App\Entity\ProductAttributeValue" table="sylius_product_attribute_value">
<indexes>
<index name="locale_code" columns="locale_code" />
</indexes>
</entity>
</doctrine-mapping>
Import routing in
config/routes.yaml
:
bitbag_sylius_vue_storefront2_plugin:
resource: "@BitBagSyliusVueStorefront2Plugin/Resources/config/routing.yml"
The process seems a bit complex but is required to set up everything properly. If something went wrong in your instance at this stage make sure you followed this doc properly step by step. and check this sample configuration in the plugin environment plugin environment.
4. Installation - the frontend part¶
Clone the frontend repository:
git clone [email protected]:BitBagCommerce/SyliusVueStorefront2Frontend.git && cd SyliusVueStorefront2Frontend
Copy the
packages/theme/.env.dist
file topackages/theme/.env
and configure your environment in the file:Install dependencies:
yarn install
Run the application in dev mode:
yarn dev
For production mode use yarn start
command instead.
That is it. You are now able to start your journey with Vue Storefront in your Sylius instance. For more details follow official Vue Storefront documentation.