Skip to content
Magento PWA Storefront based on PWA Studio's Venia Storefront (Concept)
JavaScript CSS HTML Shell
Branch: develop
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__mocks__
_buildpack/__tests__
how-to-articles
src
.editorconfig
.env.example
.eslintignore
.eslintrc.js Upgraded to use PWA Studio with new scaffolding command. Oct 12, 2019
.gitignore
.graphqlconfig
README.md
babel.config.js
deployVeniaSampleData.sh
lastCachedGraphQLSchema.json
package.json
server.js
template.html
upward.yml Upgraded to use PWA Studio with new scaffolding command. Oct 12, 2019
webpack.config.js Upgraded to use PWA Studio with new scaffolding command. Oct 12, 2019
yarn.lock

README.md

How to Venia

What?

This is a Magento 2.3.1 PWA Storefront built with the new scaffolding mechanism available from PWA Studio v4.1.0-dev.0.

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.

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.

PWA Studio has not offered a clear way of setting up a PWA Studio app until recently.
Previously you needed to clone their monorepo which was not a straightforward process, (see v1.0.0 of this repo).

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.

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 Set-Up
  2. Add a static route
  3. Update Site Footer
  4. Props & propTypes
  5. CSS Modules
  6. Configure CSS modules to use SCSS (TODO)
  7. Component State
  8. Reuse a PWA Studio component
  9. Explore Magento's GraphQL API in GraphiQL
  10. Use Magento's GraphQL API with Apollo
  11. Manage State with Redux
  12. React Hooks (TODO)
  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 git@github.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

Credits

Magento for creating PWA Studio.

You can’t perform that action at this time.