Venia project structure

This topic is an overview of the venia-concept project structure. It provides overview information about important directories and files to help you understand the different pieces of the project.

The Venia PWA storefront isn’t a traditional Magento Theme like the Blank and Luma themes and therefore differs from the traditional Magento theme structure. It’s not part of a Magento code base but a separate instance that communicates with Magento through the UPWARD middleware.

Root directory files

In addition to the NPM packages.json and Venia specific validation and testing files, the root directory contains the following important files:

deployVeniaSampleData.sh

This file helps you to Install Venia sample data into your Magento installation. Copy and execute this file in a Magento instance to install the sample data.

server.js

A node script that runs the UPWARD staging server when the yarn run stage:venia command is used.

[venia-upward.yml][]

The UPWARD server specification for the Venia PWA storefront. This file describes the server behavior for the middle tier service between the PWA and Magento.

webpack.config.js

This file contains all Webpack configuration for bundling Venia static assets for both development and production deploys.

The templates directory

The templates directory contains mustache template partials. The UPWARD server combines these templates to create an application shell for different page types.

The venia-static directory

The venia-static directory contains the favicon.ico icon file, icons folder, robots.txt file, and other static files. The upward.yml config file file uses an UPWARD DirectoryResolver to serve the files in this directory as static resources.

The src directory

The src directory contains the PWA source code for the Venia theme, which are split into functional subdirectories.

src/index.js

The src/index.js file is the entry point of Venia. It sets the ApolloProvider, the ReduxStore, and the Router configuration and App Component.

src/store.js

The src/store.js file is responsible for creating a Redux store. It also combines Redux reducers and middlewares.

src/sw.js

The src/sw.js file contains the service worker configuration.