Skip to content

Latest commit

 

History

History
125 lines (107 loc) · 7.25 KB

README.md

File metadata and controls

125 lines (107 loc) · 7.25 KB
Raw

How to Venia (work in progress)

What?

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.

⚠️ CAVEAT
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

Why?

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:

How?

How-to-Articles

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.

Topics

  1. Project Setup
  2. Add a static route
  3. Props & propTypes
  4. Add a Link to the Footer
  5. CSS Modules
  6. Configure CSS modules to use SCSS (TODO)
  7. Replace the CSS for the Header
  8. Component State
  9. Reuse a PWA Studio component
  10. Explore Magento's GraphQL API in GraphiQL
  11. Use Magento's GraphQL API with Apollo
  12. Manage State with Redux
  13. Redux with Apollo Client (TODO)
  14. Use Magento's REST API (TODO)
  15. Use a another GraphQL API (TODO)
  16. Use a another REST API (TODO)

Quick Setup

Prerequisites

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 start

Credits

Magento for creating PWA Studio.

TODO

  • 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