This is a Magento 2.3.1 PWA Storefront which is a simple copy of PWA Studio's venia-concept v2.1.0 package.
Why re-invent the wheel?
More than that, it's a collection of how-to-articles which can be followed to give you a basic understanding of how the venia-concept package was built and to demonstrate one method in which it could be used to create your own PWA Storefront for Magento.
Do your own research before using this in a production environment.
It's not clear to me which are the recommended approaches from Magento to use PWA Studio, and this may not be one.
In-fact, while I believe a lot has been accomplished in PWA Studio, a lot is yet to be done, which will bring about change.
Read what magento says.
There are other approaches out there too, for example see fallback-studio, ScandiPWA and DEITY Falcon.
I created this repository to share what I've learnt from exploring PWA Studio.
There are aspects of PWA Studio which I may not fully appreciate.
See TODO
As I started to explore PWA Studio I kept notes to help me understand how it worked. As a Magento front-end developer there are new skills to master 😄 I thought that these notes may be helpful to others who were in a similar position.
Also, it was unclear to me how PWA Studio could be quickly bootstrapped to create a PWA Storefront for Magento. After following the Venia storefront setup documentation I had a project which was part of a monorepo that is used to develop and publish NPM packages for @magento.
While this works very well to demonstrate, publish and help people to contribute to the work of PWA Studio, it does not seem like the best place to begin a project from.
I wanted a stand-alone PWA Storefront for a Magento 2 backend, not something which was part of a monorepo that managed dependencies with Yarn Workspaces. So rather than create something from scratch I have copied the base configuration, tooling & setup from the venia-concept package. Magento and their community contributors have done an excellent job in providing these. And I believe this gives an excellent starting for a project by providing:
- PWADevServer
- Routing
- Redux setup
- Magento API Integration
- GraphQL
- Apollo Client Setup
- REST API Client
- ServiceWorkerPlugin
- CSS Modules
- Modular components from PWA Studio
- Category page
- Product Page
- Checkout
- and more...
- and more...
Notes have been kept in markdown format in the ./how-to-articles/ directory.
They cover basic React & PWA Studio concepts which I think may be useful to front-end developers with limited React & PWA experience.
- Project Setup
- Add a static route
- Props & propTypes
- Add a Link to the Footer
- CSS Modules
- Configure CSS modules to use SCSS (TODO)
- Replace the CSS for the Header
- Component State
- Reuse a PWA Studio component
- Explore Magento's GraphQL API in GraphiQL
- Use Magento's GraphQL API with Apollo
- Manage State with Redux
- Redux with Apollo Client (TODO)
- Use Magento's REST API (TODO)
- Use a another GraphQL API (TODO)
- Use a another REST API (TODO)
- NodeJS >=10.14.1 LTS
- Yarn >=1.13.0
- Python 2.7 and build tools, see the Installation instructions on
node-gypfor your platform. - A unix based OS for example MacOS or Linux
git clone [email protected]:rossmc/how-to-venia.git
cd how-to-venia
# install dependencies
yarn install
# set default environment variables
cp .env.dist .env
# start the app with development environment which includes hot-reloading
yarn watch
# OR run the staging environment which will more closely reflect production
yarn build:prod
yarn startMagento for creating PWA Studio.
- The npm/yarn build:esm script is not working, look into fixing this.
- Experiment more with VeniaAdapter to make venia components work more reliably.
i.e. Set Venia as Project Dependency