Running Vue Storefront in production (PWA Magento webshop)
•Download as PPTX, PDF•
4 likes•9,330 views
A Progressive Web Application has a lot of advantages compared to a traditional website. A PWA is user-friendly, increases customer loyalty and conversions. Curious how PWA looks like in real-life?. Curious how PWA looks like in real-life? Check out Dutch’s first PWA (Vue Storefront + Magento 2) webshop, a scoop in e-commerce land! Vendic presents Meubelplaats.nl A webshop in need of renovation, with a back-end that didn’t meet the requirements and demands of Meubelplaats. They trusted Vendic to develop their new webshop as a PWA. And behold! A smarter, faster website with the look & feel of an app, but with a powerful Magento 2 engine.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Running Vue Storefront in production (PWA Magento webshop)
Similar to Running Vue Storefront in production (PWA Magento webshop) (20)
Recently uploaded
Recently uploaded (20)
Running Vue Storefront in production (PWA Magento webshop)
- 1. Running in production Tjitse Efdé | Vendic
- 2. The end result… Tadaa!
- 3. Vue Storefront runs reliable in production! ❏ Live April 26th, 2019 ❏ No crashes or outages ❏ The minor issues we had in production were mostly in the configuration of Vue Storefront
- 4. The ‘new’ technology stack for Magento 2 dev 1. 2. 3. 4. 5. 6. 7. 8. 9. And many other JavaScript libraries
- 5. MVP: minimum VS instance connected to M2 STEP 2 Setup a M2 instance with products STEP 4 Pump the catalog into ElasticSearch STEP 1 Prepare the server STEP 3 Setup the VS components: frontend & API STEP 5 Start the VS frontend & API STEP 6 Start developing custom theme
- 6. 1. Prepare the server We’re not using docker in production
- 7. We will be working with Redis and ElasticSearch directly Redis will be used as a job queue system (Kue) 1. Prepare the server Elastic will hold our catalog data
- 8. 1. Prepare the server
- 9. 1. Prepare the server We use a reverse proxy (HAProxy) for SSL offloading and to serve the HTTP request to the right application
- 11. The server is configured! Let’s install the apps. We skip step 2 (M2 setup) and fast forward to step 3.
- 12. 3. Setup VS API 1. Clone the repo 2. Setup the local.json, which contains the settings 3. Add your Magento API credentials 4. Run yarn to install dependencies 5. Run yarn migrate to prepare elastic { "server": { "host": "localhost", "port": 8080, "searchEngine": "elasticsearch" }, "orders": { "useServerQueue": false }, "catalog": { "excludeDisabledProducts": false }, "elasticsearch": { "host": "localhost", "port": 9200, "protocol": "http", "user": "elastic", "password": "changeme", "min_score": 0.01, "indices": [ "vue_storefront_catalog", "vue_storefront_catalog_de", "vue_storefront_catalog_it" ], "indexTypes": [ "product", "category", "cms", "attribute", "taxrule", "review" ], "apiVersion": "5.6" }, "redis": { "host": "localhost", "port": 6379, "db": 0 }, "kue": {} }
- 13. 3. Setup VS frontend 1. Clone the repo 2. Setup the local.json, which contains the settings 3. Add your VS API endpoints. If you use the demo API, skip this step 4. Run yarn to install dependencies { "server": { "host": "localhost", "port": 3000, "protocol": "http", "api": "api", "devServiceWorker": false, "useOutputCacheTagging": false, "useOutputCache": false, "outputCacheDefaultTtl": 86400, "availableCacheTags": ["product", "category", "home", "checkout", "page-not-found", "compare", "my-account", "P", "C", "error"], "invalidateCacheKey": "aeSu7aip", "dynamicConfigReload": false, "dynamicConfigContinueOnError": false, "dynamicConfigExclude": ["ssr", "storeViews", "entities", "localForage", "shipping", "boost", "query"], "dynamicConfigInclude": [], "elasticCacheQuota": 4096 }, "seo": { "useUrlDispatcher": true } }
- 14. Mage2VueStorefront OR VueStorefront Indexer for Magento 2 4. Import data from Magento 2 to VS
- 15. Mage2VueStorefront ❏ A seperate Node app on the server ❏ Full reindexes of the Magento 2 catalog, pages and cms blocks ❏ Uses a products delta index that runs as a cron job to update changed data in Vue Storefront ❏ First release 2nd of june 2018 VueStorefront indexer ❏ Magento 2 extension installed via composer ❏ Adds Vue Storefront indexers to Magento 2 ❏ Runs with the Magento 2 default cron group ❏ First release on the 2nd of april 2019 4. Import data from Magento 2 to VS OR
- 16. 1. Clone the mage2vs repo 2. Variables inserted via process.env global variables 3. Create a shell script to set the variables 4. Run the initial import 5. Setup the products delta indexer with a cron job #!/usr/bin/env bash export TIME_TO_EXIT=2000 export MAGENTO_CONSUMER_KEY=byv3730rhoulpopcq64don8ukb8lf2gq export MAGENTO_CONSUMER_SECRET=u9q4fcobv7vfx9td80oupa6uhexc27rb export MAGENTO_ACCESS_TOKEN=040xx3qy7s0j28o3q0exrfop579cy20m export MAGENTO_ACCESS_TOKEN_SECRET=7qunl3p505rubmr7u1ijt7odyialnih9 echo 'Default store - in our case United States / en' export MAGENTO_URL=http://demo-magento2.vuestorefront.io/rest export INDEX_NAME=vue_storefront_catalog node --harmony cli.js categories --removeNonExistent=true node --harmony cli.js productcategories --partitions=1 node --harmony cli.js attributes --removeNonExistent=true node --harmony cli.js taxrule --removeNonExistent=true node --harmony cli.js products --removeNonExistent=true --partitions=1 node --harmony cli.js reviews 4. Import data from Magento 2 to VS
- 17. ✅ Installed NodeJS, HA Proxy, Redis & ElasticSearch on server ✅ Setup Vue Storefront frontend & API ✅ Setup Magento 2 and added a new API user ✅ Indexer chosen and imported data to Elastic ❌ Ran the Node applications and kept them running ❌ Developed a custom theme
- 19. { "apps": [ { "name": "frontend", "max_memory_restart": "4G", "instances": "4", "exec_mode": "cluster", "script": "./core/scripts/server.js", "node_args": "-- max_old_space_size=1024", "log_date_format": "YYYY-MM-DD HH:mm:ss", "ignore_watch": [ "core/build/config.json", "node_modules" ] } ] Command line tool for easy environment management with configuration files. Example ecosystem.json: PM2 Node Process Manager
- 20. Nice overview of deployed apps with pm2 status PM2 Node Process Manager
- 21. Other features include: ❏ Zero downtime deployments ❏ Application logging (logrotate) ❏ Application monitoring (memory and CPU) ❏ Up and down schaling of cluster processes PM2 Node Process Manager
- 22. ✅ Installed NodeJS, HA Proxy, Redis & ElasticSearch on server ✅ Setup Vue Storefront frontend & API ✅ Setup Magento 2 and added a new API user ✅ Indexer chosen and imported data to Elastic ✅ Ran the Node applications and kept them running ❌ Developed a custom theme
- 25. { "server": { "host": "86.109.18.208", "port": 3333, "protocol": "http", "api": "api" } { "server": { "host": "localhost", "port": 3000, "protocol": "http", "api": "api" } Vue Storefront has hundreds of settings, it’s easy to overlook something. A unified configuration across multiple environments
- 26. Vue Storefront uses https://github.com/lorenwest/node-config behind the scenes. A unified configuration across multiple environments
- 27. { "server": { "host": "86.109.18.208", "port": 3000, "protocol": "http", "api": "api", "devServiceWorker": false, "useOutputCacheTagging": false, "useOutputCache": false, "outputCacheDefaultTtl": 86400, "availableCacheTags": ["product", "category", "home", "checkout", "page- not-found", "compare", "my-account", "P", "C", "error"], "invalidateCacheKey": "aeSu7aip", "dynamicConfigReload": false, "dynamicConfigContinueOnError": false, "dynamicConfigExclude": ["ssr", "storeViews", "entities", "localForage", "shipping", "boost", "query"], "dynamicConfigInclude": [], "elasticCacheQuota": 4096 }, "seo": { "useUrlDispatcher": false }, "console": { "showErrorOnProduction" : true, "verbosityLevel": "display-everything" }, "redis": { "host": "86.109.18.208", "port": 6381, "db": 0 }, "graphql":{ "host": "localhost", "port": 8080 }, "elasticsearch": { "httpAuth": "", "host": "https://www.meubelplaats.nl/api/catalog", "index": "vue_storefront_catalog", "min_score": 0.02 } Our local.json contains: ❏ Environment specific data like IP addresses, ports and specific endpoints. ❏ Global settings (for example stock settings)
- 29. { "server": { "host": "86.109.18.208", "port": 3000, "protocol": "http", "api": "api", "devServiceWorker": false, "useOutputCacheTagging": false, "useOutputCache": false, "outputCacheDefaultTtl": 86400, "availableCacheTags": ["product", "category", "home", "checkout", "page- not-found", "compare", "my-account", "P", "C", "error"], "invalidateCacheKey": "aeSu7aip", "dynamicConfigReload": false, "dynamicConfigContinueOnError": false, "dynamicConfigExclude": ["ssr", "storeViews", "entities", "localForage", "shipping", "boost", "query"], "dynamicConfigInclude": [], "elasticCacheQuota": 4096 }, "seo": { "useUrlDispatcher": false }, "console": { "showErrorOnProduction" : true, "verbosityLevel": "display-everything" }, "redis": { "host": "86.109.18.208", "port": 6381, "db": 0 }, "graphql":{ "host": "localhost", "port": 8080 }, "elasticsearch": { "httpAuth": "", "host": "https://www.meubelplaats.nl/api/catalog", "index": "vue_storefront_catalog", "min_score": 0.02 } With the custom-environment-variables.json we can override the local.json { "server": { "host": "PROD_SERVER" }, "redis": { "host": "PROD_SERVER", "port": "REDIS_PORT" }, "elasticsearch": { "host": "ELASTIC_HOST" } }
- 30. { "server": { "host": "86.109.18.208", "port": 3000, "protocol": "http", "api": "api", "devServiceWorker": false, "useOutputCacheTagging": false, "useOutputCache": false, "outputCacheDefaultTtl": 86400, "availableCacheTags": ["product", "category", "home", "checkout", "page- not-found", "compare", "my-account", "P", "C", "error"], "invalidateCacheKey": "aeSu7aip", "dynamicConfigReload": false, "dynamicConfigContinueOnError": false, "dynamicConfigExclude": ["ssr", "storeViews", "entities", "localForage", "shipping", "boost", "query"], "dynamicConfigInclude": [], "elasticCacheQuota": 4096 }, "seo": { "useUrlDispatcher": false }, "console": { "showErrorOnProduction" : true, "verbosityLevel": "display-everything" }, "redis": { "host": "86.109.18.208", "port": 6381, "db": 0 }, "graphql":{ "host": "localhost", "port": 8080 }, "elasticsearch": { "httpAuth": "", "host": "https://www.meubelplaats.nl/api/catalog", "index": "vue_storefront_catalog", "min_score": 0.02 } #!/usr/bin/env bash export PROD_SERVER="localhost" yarn install yarn dev With the custom-environment-variables.json we can override the local.json
- 31. { "server": { "host": "86.109.18.208", "port": 3000, "protocol": "http", "api": "api", "devServiceWorker": false, "useOutputCacheTagging": false, "useOutputCache": false, "outputCacheDefaultTtl": 86400, "availableCacheTags": ["product", "category", "home", "checkout", "page- not-found", "compare", "my-account", "P", "C", "error"], "invalidateCacheKey": "aeSu7aip", "dynamicConfigReload": false, "dynamicConfigContinueOnError": false, "dynamicConfigExclude": ["ssr", "storeViews", "entities", "localForage", "shipping", "boost", "query"], "dynamicConfigInclude": [], "elasticCacheQuota": 4096 }, "seo": { "useUrlDispatcher": false }, "console": { "showErrorOnProduction" : true, "verbosityLevel": "display-everything" }, "redis": { "host": "86.109.18.208", "port": 6381, "db": 0 }, "graphql":{ "host": "localhost", "port": 8080 }, "elasticsearch": { "httpAuth": "", "host": "https://www.meubelplaats.nl/api/catalog", "index": "vue_storefront_catalog", "min_score": 0.02 } ❏ Stop comparing the local.json between local machines ❏ And include the local.json, custom-environment- variables.json
- 32. Git Strategy
- 33. This didn’t work out very well...yikes! Old way of ‘version control’
- 35. Future setup
- 36. ./scripts/start_local.sh ./scripts/rebuild_staging.sh ./scripts/rebuild_production.sh #!/usr/bin/env bash export PROD_SERVER="86.109.16.46" export REDIS_PORT=6379 export ELASTIC_HOST="https://pwa.meubelplaats.nl/api/catalog" export IMAGES_BASE_URL="https://pwa.meubelplaats.nl/img/" # Some more settings export PRODUCTS_ENDPOINT="https://pwa.meubelplaats.nl/api/product" export ORDER_ENDPOINT="https://pwa.meubelplaats.nl/api/order" export REVIEWS_ENDPOINT="https://pwa.meubelplaats.nl/api/review/create" export STOCK_ENDPOINT="https://pwa.meubelplaats.nl/api/stock" yarn yarn build yarn start pm2 reload server Easy building different types of environments
- 38. Use the default Vue Storefront theme as a basis. Develop theme from scratch. OR Start with our custom theme development
- 39. ❏ Copy the ‘base’ theme or develop a theme from scratch. ❏ When the Vue Storefront core is updated, check the update details and adjust your theme. ❏ No ‘Magento 2’ style fallback system in Vue Storefront 1.x. Copy the entire base theme and modify it as you see fit. Comparison with M2 theme development
- 40. ❏ Winner of the demo theme competition ❏ Build by Absolute Web Services ❏ Published on Github ❏ MIT license, so you can use it as a basis Good looking new Vuetique theme
- 41. ✅ Installed NodeJS, HA Proxy, Redis & ElasticSearch on server ✅ Setup Vue Storefront frontend & API ✅ Setup Magento 2 and added a new API user ✅ Indexer chosen and imported data to Elastic ✅ Ran the Node applications and kept them running ✅ Developed a custom theme ❓ Any other special client wishes?
- 42. ❏ Integration with Sisow payment provider ❏ Payment surcharges ❏ Possible future shipping integration (PostNL, DPD, DHL) Client wishes We made the decision to stick with the Magento 2 checkout
- 43. Vue Storefront with external checkout Used modules, all open source: ❏ https://github.com/Vendic/vsf- external-checkout ❏ https://github.com/Vendic/magento2- external-checkout ❏ https://github.com/Vendic/magento2- checkout-only Thanks to Filip and the VS core team
- 44. How does it work?
- 45. Sitemap.xml generation ❏ The url structure of Vue Storefront is different from Magento 2 ❏ Our solution was a Magento 2 module that generates a sitemap with Vue Storefront urls ❏ Module is available for free on Github: https://github.com/Vendic/magento2- vuestorefront-xmlsitemap ❏ Complete with integration tests
- 46. ✅ Installed NodeJS, HA Proxy, Redis & Elasticsearch on server ✅ Setup Vue Storefront frontend & API ✅ Setup Magento 2 and added a new API user ✅ Indexer chosen and imported data to Elastic ✅ Ran the Node applications and kept them running ✅ Developed a custom theme ✅ Any other special client wishes?
- 47. The end result… Tadaa!
- 48. Any questions?
Editor's Notes
- Today i’m going to tell you about the journey that we had with Meubelplaats, from the start. My name is Tjitse, i’m a backend developer at Vendic I’m my daily job i’m responsible for building integrations with Magento 2, but also making sure that our webshops are running smoothly
- We don't want to over complicate things in production, and add an extra layer of complexity with docker.
- That's why we are using Elastic and Redis directly without docker in between. We're used to working with both technologies in Magento 2 What we will have to do is: Install elasticsearch and run it on port 9200 Install redis and run it direclty on a port. Redis sockets didn’t work great with Kue in my experience.
- Desired architecture: We will start with Magento 2, the data is then loaded into elastic via the mage2vuestorefront datapump Elastic is used as storage, this is one of the reasons that VueStorefront is so fast. The catalog data is loaded into the system memory. The VueStorefront API gets all the catalog data from Elastic. Things like carts, orders, user registrations, stock data and images are not in elastic but are fetched directly from Magento 2 by using the REST API. I’m not entirely sure if there is already full GraphQL support, you can ask the core team this. The VueStorefront frontend is ran in cluster mode. In our case we have four different Nodes. This greatly improves the stability of our application. If one node crashes the others will take over.
- We use Haproxy for our more complicated Magento2 setup, so it did make sens to use this for VueStorefront The same can be acomplished with Nginx, it’s just a matter of taste
- We have four types of request: An image request that starts with /img, it will be passed to the VueStorefront API which then will fetch the image from Magento 2 An API request that stratrs with /api. It will be handled by the VueStorefront API running on port 8080 A request for Magento 2. In our case we are running Magento 2 on checkout.meubelplaats.nl. But I think you can easily run this on the same domain, but it would complicate the routing. A request for a static file in the Magento 2 route. For example robots.txt or sitemap.xml, maybe product feeds. A request for the VueStorefront frontend application running on port 3000. A big thanks to our server provider Magehost for helping out with the configuration and suggesting Haproxy.
- Since this is officially a MUG, i’ll skip the Magento 2 setup. Just setup a basic Magento 2.2 or 2.3 instance and create a new API user.
- The first thing we need to do when setting up the VueStorefront API is cloing the API repo ofcourse. The default configuration is stored in config/default.json. We can copy this to local.json and customize it as we see fit. The local.json stores all the settings. The connection to Magento 2 Custom VSF module that you have installed Multistore config
- The VueStorefront frontend setup is faily easy. Hopefully Filip has already explained this in the morning.
- We now want to import our catalog data into Elastic, this data will be used by the VueStorefront API. We can shoose from two different projects. One is the ‘old’ Mage2VueStorefront project, which is integrated into the VueStorefront API via NPM. Or we can use a Magento 2 extension that adds extra indexers to the project.
- Choose which one you like. We were already in the final stages of the project when the VueStorefront indexer was first launched. So we are using the Mage2VueStorefront module, which has worked reliable so far.
- You can import the data into Elastic by using one of the scripts that are included in the repository, or you can write your own script. Check the example script i’ve included.
- So how do we run NodeJS applications, and how do we keep them running? For Magento 2 developers that are used to working in a PHP env. this might be new. When you develop locally you just run yarn dev, what do we use in a production env?
- We use PM2 for this PM2 has tons of cool features, which I won’t talk about today One of the cool features is that you can add a ecosystem JS/JSON/YAML file to your project, which will add your deployment settings In our example we are running the VueStorefront frontend in cluster mode, with 4 instances. This means we have four different frontend applications We can always add more nodes if we want to increase capacity This greatly increases the performance and reliability of your applications, depending on the number of CPUs available. Under the hood, this uses the Node.js cluster module such that the scaled application’s child processes can automatically share server ports.
- PM2 status will give us an overview of the deployed apps It will give use basic stats per app, like mode status number of restarts uptime CPU usage memory usage
- This is one of the coolest things about headless development. Every frontend developer can connect to the same API VueStorefront This means a lightweight, disposable development enviroment. So no syncing of databases between staging and live No extra programs needed like mysql, elasticsearch, redis, varnish, php. Just NodeJS and Yarn. And no configuration issues The development environments are identical on every machine. This eliminates a lot of work and future problems.
- As most Magento 2 developer know, a lot can go wrong with configurations Most of the time an issue is just a yes/no toggle somewhere in the configuration “Ah it was just that flat catalog was turned on in production and not on my local machine” VueStorefront packs 100’s of settings, most of which are identical on every environment
- As most Magento 2 developer know, a lot can go wrong with configurations Most of the time an issue is just a yes/no toggle somewhere in the configuration “Ah it was just that flat catalog was turned on in production and not on my local machine” VueStorefront packs 100’s of settings, most of which are identical on every environment
- Behind the scenes a popular library Node Config is used
- Node config uses a default.json, which is overrided by a local.json
- With the custom-enviroments-variables.json we can override certain environment specific parts of the local.json Examples are: IP address Port The settings are only overwritten if the environment variables are set
- An example on how we start staging In the previous slide we’ve made the server host with the environment variable PROD_SERVER If we now set PROD_SERVER to localhost in a bash script And then run yarn dev on your local machine The server host is changed to localhost.
- So, if a team member want’s to change a configuration file. For example ‘synchonize carts’ to true. We can do this via a normal PR and every team member uses the same config. We also include all the files needed for development into version control This means every developer working on the frontend/api/mage2vs can start developing on their local machine and doesn’t have to worry about settings. The process is also repeatable, wich is great for CI
- This was a somewhat difficult topic. I saw a lot of questions about this in the VS slack
- In the beginning we just cloned the Vue Storefront repo Added our theme in the theme folder And adjusted the local.json This caused a lot of problems in the team, because we were working with three developers and multiple remote servers, all having their own local.json copy
- Our current setup works much better. We have a repo all the VueStorefront commits, with the official VueStorefront repo as an upstream branch Our own theme repository is add as a git submodule If you don’t like git submodules, that’s no problem You can also just develop under the /themes folder It was also easier to test things with Travis
- In the future it would be best to have the VS core as an NPM module And also the theme as a seperate NPM package This would be comparable with a modern Magento 2 composer setup.
- This allows us to have unified environments with a shared local.json. We start the application with a small shell script, containing only the settings that are changed for that specific environment. For example see the staging script that we use: For staging we use another VS API endpoint, which we can specify in the shell script
- Now to the theme development.
- This is comparable with Magento 2. When you start building a new theme, you must have some kind of base theme With VS it is also possible to develop your theme from scratch We thought it was the best to started with an emtpy base theme, and code everything ourselves After a few days of working on the new theme we quickly changed to using the default VueStorefront theme as a basis It saved us a lot of work.
- When we started out in with the Meubelplaats project, in the end of 2018, there we’re only two base themes available. The default VueStorefront theme, and I think it was a blue B2B theme. That i’ve not seen since then since In 2019 there are more and more new themes released, some are available on Github for free. For example the Vuetique theme
- At the time there weren’t plans to integrate Dutch payment service providers with VueStorefront . Our client wanted to integrate with Sisow, and Filip had already presentated the original external checkout module. So we decided to use his external checkout plugin, and contribute to it
- Our setup is composed of three modules: The VSF external checkout module, is a VueStorefront module that redirects to Magento 2 on checkout A Magento 2 module that receives the cart token and user token from VueStorefront (via a simple GET request), restores the cart and redirects to the M2 checkout. A Magento 2 module that runs in, what I call, checkout only mode. Any other frontend page will redirect to the VueStorefront homepage
- The solid lines represent the path of the user The dottet line represent data send between Magento 2 and VueStorefront
- VueStorefront uses a different URL structure. In our case it was: url/pagetype/sku|id/name+id We could have written some kind of scraper, but II had just had two great workshops on Magento 2 integration testing during MageTestFest in Florance, so I thought it would be more fun to practice TDD on a Magento 2 module and release it on Github.