PWA Studio Fundamentals

⚠️ These tutorials are no longer maintained. They are now maintained under the Adobe/Magento documentation site.

The goal of this tutorial series is to guide you through setting up, working with and deploying your first Magento PWA Studio storefront using the venia-ui library.

To begin only a basic understanding of REACT is required. As we progress, new concepts will be introduced, for which there will be an Learn more section to provide you with helpful resources.

Topics

• Project Set-Up - Get your local development environment up and running.
• Project Structure & Routing - Understand the project structure and learn the basics of how routing works in PWA Studio.
• Add a static route - Add a static route to your PWA Studio app.
• Update a Site Footer Component - Make an update to the venia-ui footer component to add your own links.
• Props & propTypes - How PWA Studio uses REACT Props & propTypes.
• CSS Modules - How PWA Studio uses CSS Modules.
• Component State - Use component state in REACT.
• Reuse a PWA Studio component - See how easy it is to add a PWA Studio component to your app.
• Explore Magento's GraphQL API - Get familiar with Magento's GraphQL API.
• Use Magento's GraphQL API with Apollo - Create a custom REACT component which fetches data from Magento's GraphQL API with the Apollo client.
• State Management with Redux - How PWA Studio uses Redux to manage app state.
• [Redux with Apollo Client][]
• [Explore Magento's REST API][] - Get familiar with Magento's REST API.
• [Use Magento's REST API][]
• Preparing to go live

What you will build

As you progress through the tutorials you will create your own PWA Studio app and a custom page with REACT components to demonstrate how you can work with PWA Studio to make basic changes to your site.

Learn more

• Progressive Web Apps
• Magento PWA Studio Overview
• Intro to React
• Main Concepts of React