How to Venia
More than that, it's a collection of how-to-articles which can be followed to give you a basic understanding of how to work with PWA Studio by creating a storefront based on Magento's Venia Storefront (Concept), venia.magento.com.
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
Fortunately, PWA Studio improves this process with their new scaffolding mechanism, currently this is only available with a prototype command and has little documentation.
Here I share my understanding of how it can work and be used to create your own custom PWA Studio storefront.
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 Set-Up
- Add a static route
- Update Site Footer
- Props & propTypes
- CSS Modules
- Configure CSS modules to use SCSS (TODO)
- 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
- React Hooks (TODO)
- 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@example.com: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
Magento for creating PWA Studio.