A lesson preview of our Yireo On-Demand training on Vue Storefront 1 Fundamentals
Note that this is a preview lesson. When accessing this lesson as part of the full training, there are a couple of benefits: The materials are available via the Yireo Courseware portal and can be presented as a slideshow, progress can be monitored, additional resources will be available. And obviously, all lessons - instead of just the preview lessons - will be available to you.
Let's see what you need to know about Vue Storefront beforehand: Knowledge requirements, concepts, the history and roadmap of all products
Vue Storefront 1 allows for a Vue PWA to be connecting to Magento 1 or Magento 2. Because of this, this training requires some knowledge of Magento. For instance, you need some knowledge on dealing with Store Views, product types, indexing techniques, caching, etcetera. Programming knowledge of Magento is not required, unless you dive into more advanced scenarios like creating your own REST endpoints in Magento for consumption within the API and PWA.
It is also good to know a bit more on PWA, not just the marketing hype, but the actual features that make a PWA possible. Some (if not most) features don't require a language like React or Vue. For instance, a simple
Vue Storefront adds its own story on top of this: Its headless nature allows you to build Vue components that connect now to Magento 1 but might connect to Magento 2 (or other e-commerce systems) later. Also, the Vue Storefront API layer (middleware) allows for bypassing Magento when it comes to search (ElasticSearch) and it allows for connecting to CMS for content. This microservices approach allows for more flexibility, but it has zero to do with PWA and everything with headless.
The training requires a good knowledge on Vue itself as well: For the setup, this is not needed. But once you dive into the PWA itself, exploring the core themes and modules, you will bump into things like Vue components, slots, routing, Vuex.
Docker is not a solid requirement. But to allow you to focus on the PWA development, instead of spending hours on devops to get ElasticSearch running locally, using Docker is highly recommended.
The products and services of Vue Storefront are expanding quickly. The software was once created by Divante - a Polish company. But by now, Vue Storefront is actually a separate legal entity and financially independant. As a product suite, Vue Storefront is also rapidly changing: While things started with a Vue Storefront 1 PWA and API middleware layer that connected to Magento 1 or Magento 2, Vue Storefront Next is a completely new product that connects to other platforms as well (CommerceTools, Sylius, Shopware).
This makes the naming of products a bit confusing: There will not be a (easy) migration path from Vue Storefront 1 to Vue Storefront Next, except for that generic Vue parts like custom UI components and custom functions can be reused (assuming also a certain compatibility between Vue 2 and Vue 3). Likewise, for the API there is also a major change coming up: The Vue Storefront 1 API (which actually has nothing to do with Vue, because it is based on Express) will be swapped out for a new Storefront API. Support for Server Side Rendering (SSR) and GraphQL will be implemented in a different way. The new Storefront API middleware is supposed to work as a drop-in replacement of the old Vue Storefront API.
Yet another separate product is Storefront UI, a library of UI components that can be used in any Vue project (not just Vue Storefront) by using generic Vue features like props and slots. Storefront UI allows for e-commerce features like add-to-cart buttons, pricing, product images, checkout and much more to be created in a quicker way. And it can be used with Vue Storefront 1 without a problem. Actually, the Capybara theme relies heavily upon Storefront UI.
Running a Vue Storefront 1 stack can be cumbersome: Besides the requirements for Magento (Nginx, PHP-FPM, MySQL) you need a Node middleware server (for the Vue Storefront API), ElasticSearch and Redis. Few hosting environments support this out of the box, so that time needs to be spent to create the proper setup in production. With Storefront Cloud, the Vue Storefront team gives a helping hand by running the entire stack on their own specialized Kubernetes-based platform.
The current version of Vue Storefront 1 is 1.12 with a new Capybara theme based on Storefront UI, various new NPM packages that move code from the original
core/ folder into
node_modules/ and some performance optimizations (consider them fixes). While it is recommended to start a new project with the latest version, it is also good to note that version 1.10 has been labeled as a Long Term Support (LTS) version, because 1.11 contained many breaking changes.
Version 1.13 will include the new Storefront API middleware, which will be compatible with the current Vue Storefront 1 API middleware. The query builder (https://github.com/DivanteLtd/storefront-query-builder) forms a new client for ElasticSearch so that queries are more easily customized.
Some features that will popup later in the course: Vue Storefront supports the multi-store architecture of Magento: GWS (Global-Website-StoreView) by simply configuring flags in the configuration of both the PWA and the API.
Data pumping is the general term used by Vue Storefront to refer to the concept of pushing data (products, categories, attributes, CMS pages, pricing rules, tax rules) from the shop into ElasticSearch. This is either done by the shop directly (like with the Magento indexer) or via the API.
We'lll dive into the extensibility of the PWA and the API later. The PWA side is extended by using modules (containing for instance Vue components, routing configurations, Vuex plugins and/or modules). The API side is extended by using extensions (for proxying requests from the PWA to an external system, for instance).
The best places to get support on Vue Storefront are the forum and Slack. The forum can be seen as a more permanent resource for various questions, while on Slack, you can get real-time help of others. When posting to forum or Slack, make sure to treat the time of others with respect: By placing your questions, you are asking other people to invest time (paid or for free) into answering them. Help others to help you, by being thorough in your questions, adding details to help understand the issue at hand and investing the proper amount of time yourself to investigate the issue before letting others jump in.
Summing things up this lesson, we learned a bit more about the knowledge requirements needed before diving into Vue Storefront 1. We discussed the current versions and the roadmap in the near future. And we learned that Vue Storefront 1 is quite extensible - both the PWA and the API. In upcoming lessons, we'll see how to put all of this into practice.