Yireo - Developer training

Open main menu

Vue Storefront 1 Fundamentals

Introducing Vue Storefront 1

A lesson preview of our Yireo On-Demand training on Vue Storefront 1 Fundamentals

Duration: 17:39 | Last Modified 26 May 2021

This is a preview lesson only

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.

Get full access to the Vue Storefront 1 Fundamentals training

Student notes

Introducing Vue Storefront

Let's see what you need to know about Vue Storefront beforehand: Knowledge requirements, concepts, the history and roadmap of all products

Knowledge requirements

  • Requirements for Magento
    • Magento 1 or Magento 2
  • Understanding concepts
    • PWA, headless e-commerce, Node middleware
    • Microservices, Service Oriented Architecture (SOA)
  • Knowledge of Vue programming
    • JavaScript / ES6
    • VueJS (syntax, components, routing, slots)
    • Vuex (mutations, actions, getters)
  • Ability to run Docker

Knowledge requirements

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 manifest.json file could be added to a plain Magento shop to allow for the Add to dashboard feature and some mobile beautifications. Likewise, a JavaScript serviceworker could be added as well to a plain shop, to allow for features like push notifications. The reason why Vue is a benefit is that more additional features (like geolocation and offline) can be added in easier ways, because the frontend is built from the ground up in JavaScript.

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.

Products

  • Vue Storefront 1 PWA
    • Vue-based PWA including a Capybara theme
    • New: Vue Storefront Next
  • Vue Storefront 1 API
    • Node middleware layer
    • New: Storefront API
  • Storefront UI
    • Component library for Vue (and React)
  • Storefront Cloud

Products

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.

Versions

  • 1.10 (LTS)
  • 1.11
  • 1.12 (current)
    • Support for Capybara theme
    • Optimize bundle size
    • Solve memory leaks
  • 1.13
    • Improve Lighthouse score
    • Separate NPM packages
    • Storefront API
    • Storefront Query Builder
    • Atomic design

Versions

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.

Concepts

  • Multistore mode
    • Multilinguality, Magento StoreViews
  • Data pumping
    • Pushing data from the shop into ElasticSearch

Concepts

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.

Extensibility

  • The PWA (client)
    • Client-side (browser)
    • Vue Storefront modules
  • The API (server)
    • Server-side (Node server)
    • Vue Storefront API extensions

Extensibility

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).

Communications

  • Vue Storefront Slack
    • http://slack.vuestorefront.io/
  • Vue Storefront Forum
    • https://forum.vuestorefront.io/

Communications

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.

Summary

  • Knowledge requirements
  • Products & services
  • Versions & roadmap
  • Concepts
  • Extensibility
  • Community

Summary

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.

Extensions

GitHub organizations

Legal information

Other Yireo sites

Get Social

About Yireo