Yireo - Developer training

Open main menu

Vue Storefront 1 Fundamentals

Organizing the stack in development

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

Duration: 12:49 | Last Modified 20 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

Organizing the stack in development

How to organize the local development environment

While developing a Vue Storefront PWA or API, you'll need to take care of the other stack services as well. Let's dive into the details to see what kind of variations we can have in a local development environment.

Stack overview

  • Vue Storefront 1 PWA
    • Browser-based PWA written in Vue
  • Vue Storefront 1 API
    • Node middleware layer
  • Backend services
    • ElasticSearch
    • Magento 2
    • Redis

Tip: In production, you could use Storefront Cloud so that you can focus on the customization, not the entire stack

Stack overview

The Vue Storefront 1 stack can be overwhelming at first. Besides the hosting requirements for Magento itself (Nginx, PHP-FPM, MySQL, Redis, Varnish, ElasticSearch, RabbitMQ) there is an additional Node middleware (VSF API) needed that requires also Redis and ElasticSearch.

On top of this, you will also run the PWA somewhere: Other as a Node instance in production on the same server that runs the VSF API. Or as a local Node process when developing.

Theoretically, the instances of Redis and ElasticSearch can be used for both Magento and the VSF API. Realize however that the Redis instance of VSF will be used for SSR, so that memory consumption will be much greater than with Magento. The Redis instance of VSF is best run on a separate server. The Redis instance of Magento runs just fine on the same server as where PHP runs.

Please note that Sylius, Shopware 6 and other systems will only be supported in VSF Next.

In production, instead of hosting everything yourself, you could use the commercial Storefront Cloud service, a hosted service based on Kubernetes. While you still have the benefit of modifying all of the different components, the tuning of all components is dealt with by the Vue Storefront team.

Running VSF (1)

  • Local PWA & remote VSF stack
    • http://localhost:3000 (Vue PWA)
    • https://demo.vuestorefront.io (VSF API)
    • https://demo.vuestorefront.io/api/rest (Magento, hidden behind VSF API)
    • https://demo.vuestorefront.io/api/catalog (ElasticSearch, hidden behind VSF API)
    • Redis (hidden behind VSF API)

Running VSF (1)

There are various variations of running the stack. First, we'll begin with a remote stack that runs the Vue Storefront background services (the API, Magento, ElasticSearch) while only the PWA will run locally. We'll see later how to make this possible. The PWA will include a Webpack development webserver that runs on the address localhost port 3000 (or theoretically 3001 or higher, if the default port is already taken).

Whenever, the PWA requests resources from the server, these requests will be sent to the Vue Storefront API, which will forward the request to the relevant backend service (like Magento or ElasticSearch) based on the URL.

The stack variation that we see here is great for people to get kickstarted with Vue Storefront. You simply make sure that the PWA configuration refers to the Vue Storefront demo and you're done. And instead of the demo, you can of course use a development environment or staging environment of the project you're working on.

However, this scenario does not allow for modifying the API, which is commonly needed when adding new features. Consider this stack variation the best for frontend developers that only need to work with Vue components (styling, webdesign, basic features), while others take care of the API.

Local PWA & remote VSF stack (1)

Running VSF (2)

  • Local PWA & remote VSF stack
  • Local PWA + API & remote Magento + ES + Redis
    • http://localhost:3000 (Vue PWA)
    • http://localhost:8080 (VSF API)
    • https://demo.vuestorefront.io/api/rest (Magento, hidden behind VSF API)
    • https://demo.vuestorefront.io/api/catalog (ElasticSearch, hidden behind VSF API)
    • Redis (hidden behind VSF API)

Running VSF (2)

Another stack variation is to run both the PWA and the API locally, which then connects to a remote Magento shop, remote Redis instance and remote ElasticSearch. A big warning needs to be added here regarding security: Do not connect the ElasticSearch instance directly to the internet, but make sure there is some kind of firewalling in place that only allows access from a specific IP address. The same counts for Redis. Maybe because of the security implications, this scenario is to be preferred the least.

But still, you could make things work. Perhaps ElasticSearch and Redis are hosted via a VPN connection, perhaps they are limited to specific IP addresses. Or the API configuration could be modified to forward all ElasticSearch traffic to a specific Nginx configuration (listening on port 9200) that only allows for GET requests to be forwarded to ElasticSearch. It requires a specialized devops to come up with a scenario like this.

Please note that there are various ways of connecting Magento with ElasticSearch. If the API pull-and-push method is used (like with Mage2VueStoreFront), the API fetches data from Magento and pushes it into ElasticSearch. This would require POST, PUT and DELETE requests to the REST API of ElasticSearch, so again security is the most difficult factor here.

Local PWA + API & remote stack (2)

Running VSF (3)

  • Local PWA & remote VSF stack
  • Local PWA + API & remote Magento + ES + Redis
  • Local PWA + API + ES + Redis & remote Magento
    • http://localhost:3000 (Vue PWA)
    • http://localhost:8080 (VSF API)
    • Local Redis
    • Local ElasticSearch
    • http://magento.example.com/ (Your own Magento remotely)

Running VSF (3)

Perhaps the best approach for running the stack, apart from running everything locally, is to run the stack locally except for Magento. This means that a local PWA is connecting to a local API, which is then forwarding calls to a local Redis, a local ElasticSearch or a remote Magento instance.

The benefit here is that Vue developers don't need a running instance of Magento, which can be quite complex to setup sometimes (composer, PHP requirements, database, performance, etcetera). The remote Magento instance should still be a copy of the production site (so, staging or development).

Please note that there are various ways of connecting Magento with ElasticSearch. If the indexing method is used (like with the Magento 2 indexer for ElasticSearch), Magento tries to push data directly to ElasticSearch. But because the ElasticSearch instance does not run in the cloud where Magento runs, you can't use this approach. Instead, you would need to fallback to the API pull-and-push method, which is actually less preferable.

Local stack & remote Magento (3)

Running VSF (4)

  • Local PWA & remote VSF stack
  • Local PWA + API & remote Magento + ES + Redis
  • Local PWA + API + ES + Redis & remote Magento
  • Local VSF stack
    • http://localhost:3000 (Vue PWA)
    • http://localhost:8080 (VSF API)
    • Local Redis
    • Local ElasticSearch
    • http://magento.local/

Running VSF (4)

If you want to have all of the flexibility, you will run everything locally. This is a scenario that is easier for Magento developers, but harder for non-Magento developers - because it also involves running Magento locally.

Local VSF stack (4)

Summary

  • Choose scenario 1 if you are absolutely new to the stack
  • Choose scenario 2 only if your remote Redis & ElasticSearch are 100% secure
  • Choose scenario 3 & 4 if you want to have more control

Extensions

GitHub organizations

Legal information

Other Yireo sites

Get Social

About Yireo