PWA is the most discussed topic about new technology among the whole IT world, and Magento developers are no exception. It’s time to bring a new dimension to building apps knowledge. While Magento PWA is getting popular, a Magento developer must know the tools available for building better PWA, and Github is a massive library that one can not ignore.
In this Magento PWA Github guide, you will have an up-to-date Magento PWA Tools Collection which are available on Github.
Magento PWA Github is generally consisted of:
- Development Tools.
- Framework specific Tools.
- Debug Tools.
- Performance Tools.
Development Tools of Magento PWA github
PWA-studio
Pwa-studio is a collection of tools that enables Magento developers to build complex PWAs. You can find these tools on Github at: https://github.com/magento-research/pwa-studio
Here are the tools you can find in this pwa-studio tools collection:
- venia-concept – Reference/Concept Theme
- pwa-buildpack – Build tooling
- peregrine – eCommerce Component Library
- pwa-module
- pwa-devdocs – Project source for the documentation site
All packages are versioned in a single repo, but released to npm as independent packages.
To install these tools, you only need an one-time setup.
- Clone the repository
- Navigate to the root of the repository from the command line
- Run npm install
Remember that you must have a version of node.js >= 8.0.0, and a version of npm >= 5.0.0. The latest LTS versions of both are recommended.
* Important notes: When using a monorepo and lerna, it’s important that you break some common habits that are common when developing front-end packages.
- Do not run npm install to get node_modules up to date within any folder under packages/. Instead, run npm install in the root of the repo, which will ensure all package’s dependencies are up-to-date.
- When adding a new entry to devDependencies in a package’s package.json, ask yourself whether that dependency will be used across multiple packages. If the answer is “yes,” the dependency should instead be installed in the root package.json. This will speed up runs of lerna bootstrap.
Offline plugin for webpack
This plugin is intended to provide an offline experience for webpack projects. It uses ServiceWorker, and AppCache as a fallback under the hood. Simply include this plugin in your webpack.config, and the accompanying runtime in your client script, and your project will become offline ready by caching all (or some) of the webpack output assets.
You can find this tool on Github at: https://github.com/NekR/offline-plugin
Pinterest service workers
A collection of utilities for creating/testing/experimenting with service workers code.
This tool is great not only for general PWA but also Magento PWA and can be found on Github at: https://github.com/pinterest/service-workers
Framework specific Tools
Framework specific tools are the core to create index.html app shell generate, manifest and sw generation.
Create React App
This is a must have tool to create PWA apps. You can create React apps with no build configuration. You don’t need to install or configure tools like Webpack or Babel because they are preconfigured and hidden in this tool.
Notice that you will need to have Node >= 6 on your local development machine, though it’s not required on the server. You can use nvm (macOS/Linux) or nvm-windows to easily switch Node versions between different projects.
You can found this Magento PWA tool on Github at: https://github.com/facebook/create-react-app
Preact-cli
It is an alternative way to create index.html and build a Preact PWA app as fast as possible.
You can found this Magento PWA tool on Github at: https://github.com/developit/preact-cli
Vue Storefront
Vue Storefront is a standalone PWA storefront for your eCommerce, possible to connect with any eCommerce backend (eg. Magento, Prestashop or Shopware) through the API.
You can check this tool from this Magento PWA Github link: https://github.com/DivanteLtd/vue-storefront
Magento PWA Base Theme
This theme is the Required base theme for Magento PWA Studio. Because you use pwa-studio to develop Magento PWA, then you need this theme. This works just like current-state Magento themes do: declare the parent theme in theme.xml, and add a dependency magento-research/theme-module-pwa to your composer.json file. This theme is published on Packagist, so no license keys or additional Composer repository configurations are necessary.
Debug tools
Currently, there are no specific Magento PWA debug tools available on Github. If you need a debug tool for your PWA app, you could use these guides from Google developers:
https://developers.google.com/web/tools/chrome-devtools/progressive-web-apps
https://developers.google.com/web/fundamentals/codelabs/debugging-service-workers/
Performance tools
Light house
Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, and more.
You can run Lighthouse in Chrome DevTools, from the command line, or as a Node module. You give Lighthouse a URL to audit, it runs a series of audits against the page, and then it generates a report on how well the page did. From there, use the failing audits as indicators on how to improve the page. Each audit has a reference doc explaining why the audit is important, as well as how to fix it.
This tool is not just for Magento PWA, and also you can’t find it on Github. Instead, there are three different ways to choose the Lighthouse workflow.
- In Chrome DevTools. Easily audit pages that require authentication, and read your reports in a user-friendly format.
- From the command line. Automate your Lighthouse runs via shell scripts.
- As a Node module. Integrate Lighthouse into your continuous integration systems.
