Pages
Refer to the module structure documentation to learn more about the structure of EverShop modules.
EverShop pages are located in the pages
folder of each module. Below is an example of the page structure in the catalog
module:
catalog
├── pages
├── global
│ └── auth.ts
├── admin
│ └── productEdit
│ ├── route.json
│ ├── index.ts
│ ├── General.tsx
│ ├── Images.tsx
│ ├── Price.tsx
└── frontStore
└── productView
├── route.json
├── index.ts
├── ProductImages.tsx
├── ProductInfo.tsx
├── ProductOptions.tsx
pages
Folder Structure
The pages
folder contains the following subfolders:
-
global
- This folder contains middleware functions that are executed for all pages, both in the admin panel and front store. For example, you can use this folder to create a middleware that verifies user authentication. This folder does not contain any React components; it only contains middleware functions. -
admin
- This folder contains pages for the admin panel. Theadmin
folder contains subfolders for each page. For example, theproductEdit
folder contains the page components for editing a product. -
frontStore
- This folder contains pages for the front store. ThefrontStore
folder contains subfolders for each page. For example, theproductView
folder contains the page components for viewing a product.
The admin
and frontStore
Folders
The admin
and frontStore
folders contain the following subfolders:
-
all
- This folder contains React components that are used across all pages within their respective sections (admin or front store). -
Other subfolders - Each subfolder represents a specific page. For example, the
productEdit
folder contains all components and middleware for the product editing page.
The Single Page Folder
Each page folder contains middleware functions, React components, and the route definition for that specific page.
Below is an example of a page folder structure:
productEdit
├── route.json # Route definition for the page
├── index.ts # Middleware function
├── General.tsx # React component
├── Images.tsx # React component
└── Price.tsx # React component
The Page Route
Each page folder must contain a route.json
file that defines the route for that page. For example, the route.json
file for the productEdit
page might look like this:
{
"path": "/admin/product/:productId",
"methods": [
"GET"
]
}
The folder name will be used as the routeId, so ensure the folder name is unique and does not contain any special characters.
Refer to the routing system documentation to learn more about EverShop's routing system.
Page Middleware
EverShop allows you to create middleware functions for each page. For example, you can create middleware to check page availability before rendering the content. You can create as many middleware functions as needed for each page.
To differentiate between middleware functions and React components, middleware function files should use all lowercase naming. For example, index.js
is a middleware function.
Refer to the middleware system documentation to learn more about EverShop's middleware system.
Shared Middleware Functions
Sometimes you may need to use the same middleware functions across multiple pages. For example, you might need identical middleware for both the productEdit
and productCreate
pages. In this case, you can create a special folder named productEdit+productCreate
in the pages/admin
directory and place the shared middleware functions there. All middleware functions in this folder will be executed for both pages.
This special shared folder does not contain any route
file; it only contains React components and middleware functions.
If you have middleware functions required for all pages (both front store and admin panel), place them in the pages/global
directory.
If you have middleware functions required for all admin panel pages, place them in the pages/admin/all
directory. The same approach applies for front store pages with pages/frontStore/all
.
Page Templates (Master Components)
Master components are React components located in the page folder. For example, General.tsx
, Images.tsx
, and Price.tsx
are React components for the productEdit
page.
Each React component must provide a default export. Here's an example from the General.tsx
file:
import React from "react";
const General = () => {
return (
<div>
<h1>General</h1>
</div>
);
};
export default General;
export const layout = {
areaId: "content",
sortOrder: 10,
};
Refer to the view system documentation to learn more about the layout and block system.
Refer to the data loading documentation to learn how to load data in React components.
A page folder can contain both middleware and React components. To help EverShop identify React components and middleware correctly, follow these naming conventions:
- React components: First letter uppercase, file extension
.jsx
or.tsx
(e.g.,General.jsx
) - Middleware functions: All lowercase, file extension
.js
or.ts
(e.g.,general.js
)
Shared React Components
Sometimes you may need to use the same React component across multiple pages. For example, you might need identical components for both the productEdit
and productCreate
pages. In this case, you can create a special folder named productEdit+productCreate
in the pages/admin
directory and place the shared React components there. All components in this folder will be available to both pages.
This special shared folder does not contain any route
file; it only contains React components and middleware functions.
If you have components required for all pages within a section, you can place them in the admin/all
or frontStore/all
folder. For example, the CMS module uses these folders to store Layout components that are used across multiple pages.