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:
- A sample configuration file that defines important environment variables.
Copy this file into a new
.envfile to use the project default values.
The first change to make here is adjusting the
MAGENTO_BACKEND_URLvariable to the fully qualified URL of a Magento 2.3 instance. Read more on the Venia setup page.
- 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.
- A node script that runs the UPWARD staging server when the
yarn run stage:veniacommand is used.
- A node script that validates the
- validates that all
.graphqlquery files in the project are valid for the GraphQL schema of the Magento backend instance specified in
- 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.
This file contains all Webpack configuration for bundling Venia static assets for both development and production deploys.
templates directory contains mustache template partials.
The UPWARD server combines these templates to create an application shell for different page types.
media directory only contains the
favicon.ico icon file.
src directory contains the PWA source code for the Venia theme, which are split into functional subdirectories.
This directory contains directories for all Venia root components. Root components provide the main React component entry point for the different page types.
Examples of page types include:
When a page is requested, the Peregrine router determines which root component to use based on the URL path.
src/actions directory contains all Redux action creator definitions.
The files in this directory group the action creators together based on the application feature they affect.
- action creator
- As its name suggests, an action creator is a function that returns an action object.
For more information on actions, see the official documentation for Redux actions.
src/components directory contains the project-specific components used in the Venia theme.
Components in the Venia theme are React components. They define the structure and render the visual elements of the different pieces on a page.
React components are generally written to be small and re-usable, so you will find multiple component definition files in a single feature directory.
Note: Not all components used in the Venia theme are in this directory. Some components are imported from the Peregrine project or other sources.
For more information on components, see the official documentation for React components.
CSS modules are style definitions that are scoped to a specific component. This allows for component-specific style definitions without side effects on other pieces of the page.
These CSS files are in the same directory and have the same base name as the components that use them.
For example, the styles defined in
Footer/footer.css are applied only to the component defined in
For more information see CSS modules.
src/middleware directory contains a Redux middleware for development that logs dispatched actions and updated state to the browser console.
This functionality adheres to the Redux middleware pattern.
Each file in this directory contains a reducer that manages a specific part of the application state.
Reducers are written as pure functions. This means that when it is given the same set of arguments, it will return the same results.
For more information on reducers, see the official documentation for Redux reducers.
src/shared directory contains placeholder data used in the application.
They are used to simulate API calls or as temporary data for proofs of concepts during the development phase of this project.
src/classify.js file is a module that returns a component with the combined classes of its default classes, className property, and the classes provided through 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 file is responsible for creating a Redux store.
It also combines Redux reducers and middlewares.
src/sw.js file contains the service worker configuration.