EverShop

https://evershop.io/docs/
Admin
EverShop is a free, open-source ecommerce platform built with Node.js, TypeScript, React, and...
Tokens:86,269
Snippets:400
Trust Score:8.1
Update:1 year ago
Show doc for...
Tokens:
Raw
### Manual Evershop Installation with Npm

Source: https://evershop.io/docs/development/getting-started/installation-guide

This section details the manual installation of EverShop using npm. It involves installing the core package, adding essential scripts to package.json, running the setup script, setting folder permissions, building the site, and starting the store.

```javascript
npm init -y;
npm install @evershop/evershop;
```

```javascript
"scripts": {
    "setup": "evershop install",
    "build": "evershop build",
    "start": "evershop start",
    "start:debug": "evershop start --debug",
    "user:create": "evershop user:create",
    "user:changePassword": "evershop user:changePassword"
}
```

```bash
npm run setup
```

```bash
npm run build
```

```bash
npm run start
```

--------------------------------

### Install Evershop with Docker

Source: https://evershop.io/docs/development/getting-started/installation-guide

This method allows for a quick setup of EverShop using Docker. It downloads the docker-compose file and starts the services in detached mode. A command is also provided to create an admin user within the Docker container.

```shell
curl -sSL https://raw.githubusercontent.com/evershopcommerce/evershop/main/docker-compose.yml > docker-compose.yml
docker-compose up -d
```

```shell
npm run user:create -- --email "your email" --password "your password" --name "your name"
```

--------------------------------

### Add Evershop Debug Script

Source: https://evershop.io/docs/development/getting-started/installation-guide

Adds a 'start:debug' script to package.json to enable debug mode for Evershop, allowing developers to run the project with debugging capabilities using `npm run start:debug`.

```json
"scripts": {
    ...,
    "start:debug": "evershop start --debug",
}
```

--------------------------------

### Start Evershop in Debug Mode

Source: https://evershop.io/docs/development/getting-started/installation-guide

Command to run the Evershop project in debug mode. This command executes the 'start:debug' script defined in package.json.

```bash
npm run start:debug
```

--------------------------------

### Install Evershop with create-evershop-app

Source: https://evershop.io/docs/development/getting-started/installation-guide

This command initializes a new EverShop project by creating a directory and installing all necessary dependencies.

```bash
npx create-evershop-app my-evershop-app
```

--------------------------------

### Start Evershop in Development Mode

Source: https://evershop.io/docs/development/getting-started/installation-guide

Command to run the Evershop project in development mode. This command utilizes the 'dev' script configured in package.json.

```bash
npm run dev
```

--------------------------------

### Add Evershop Dev Script

Source: https://evershop.io/docs/development/getting-started/installation-guide

Adds a 'dev' script to the package.json file, enabling developers to easily start the Evershop project in development mode using the command `npm run dev`.

```json
"scripts": {
    "dev": "evershop dev"
}
```

--------------------------------

### Install EverShop

Source: https://evershop.io/docs/development/knowledge-base/command-lines

Use this command to install and set up your EverShop store. Refer to the installation guide for detailed steps.

```bash
evershop install
```

--------------------------------

### Configure NPM Installed Extension

Source: https://evershop.io/docs/development/module/create-your-first-extension

Example configuration in `production.json` to enable an extension installed via npm. It specifies the module path and priority.

```json
{
  "system": {
        ...
        "extensions": [
            {
                "name": "productComment",
                "resolve": "node_modules/your-package-name",
                "enabled": true,
                "priority": 10
            }
        ]
    }
}
```

--------------------------------

### Configure Evershop Workspaces

Source: https://evershop.io/docs/development/getting-started/installation-guide

Configures the 'workspaces' in package.json to manage extensions and themes, specifying the directories 'extensions/*' and 'themes/*' where custom project components should be placed.

```json
"workspaces": [
    "extensions/*", #This is where you put your extensions
    "themes/*" #This is where you put your themes
  ]
```

--------------------------------

### Evershop Dockerfile

Source: https://evershop.io/docs/development/getting-started/installation-guide

A Dockerfile for building a custom Evershop Docker image. It sets up a Node.js environment, installs dependencies, copies project files including themes and extensions, builds assets, and exposes port 80 for the application.

```dockerfile
FROM node:18-alpine
WORKDIR /app
RUN npm install -g npm@9
COPY package*.json .
# Copy your custom theme.  
COPY themes ./themes  
  
# Copy your custom extensions.  
COPY extensions ./extensions  
  
# Copy your config.  
COPY config ./config  
  
# Copy your media.  
COPY media ./media  
  
# Copy your public files.  
COPY public ./public  
  
# Copy your translations.  
COPY translations ./translations  
  
# Run npm install.  
RUN npm install  
  
# Build assets.  
RUN npm run build  
  
EXPOSE 80  
CMD ["npm", "run", "start"]
```

--------------------------------

### Install Development Dependencies

Source: https://evershop.io/docs/development/getting-started/installation-guide

Installs essential development dependencies for Evershop, such as TypeScript and various type definitions, which are not required for production environments but are crucial for the development workflow.

```bash
npm install --save-dev @types/node typescript @parcel/watcher @types/config @types/express @types/pg @types/react execa
```

--------------------------------

### Upgrade Evershop

Source: https://evershop.io/docs/development/getting-started/installation-guide

This command updates EverShop to the latest version and handles database migrations automatically. It's recommended to run the build command after upgrading.

```bash
npm install @evershop/evershop@latest
```

--------------------------------

### Start Evershop Development Server (Bash)

Source: https://evershop.io/docs/development/module/create-your-first-extension

Command to start the Evershop development server.

```bash
npm run dev

```

--------------------------------

### Evershop Production Configuration Example (JSON)

Source: https://evershop.io/docs/development/knowledge-base/configuration-guide

This JSON structure shows an example of a production-specific configuration file for Evershop. It demonstrates how to override default settings, such as shop currency or language, for a production environment by creating a 'production.json' file.

```json
{
  "shop": {
    "currency": "USD",
    "language": "cn",
    "weightUnit": "kg"
  },
  "catalog": {
    "product": {
      "image": {
        "thumbnail": {
          "width": 100,
          "height": 100
        },
        "listing": {
          "width": 300,
          "height": 300
        },
        "single": {
          "width": 500,
          "height": 500
        }
      }
    },
    "showOutOfStockProduct": false
  },
  "system": {
    "theme": "friday",
    "extensions": [
      {
        "name": "productComment",
        "resolve": "extensions/productComment",
        "enabled": true,
        "priority": 10
      }
    ]
  }
}
```

--------------------------------

### Evershop Docker Compose Configuration

Source: https://evershop.io/docs/development/getting-started/installation-guide

A docker-compose.yml file to orchestrate the Evershop application and its PostgreSQL database. It defines services for the app and database, including build contexts, environment variables, networks, and volumes for data persistence.

```yaml
version: "3.8"

services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    restart: always
    environment:
      DB_HOST: database
      DB_PORT: 5432
      DB_PASSWORD: postgres
      DB_USER: postgres
      DB_NAME: postgres
    networks:
      - myevershop
    depends_on:
      - database
    ports:
      - 3000:3000

  #The postgres database:
  database:
    image: postgres:16
    restart: unless-stopped
    volumes:
      - postgres-data:/var/lib/postgresql/data
    environment:
      POSTGRES_PASSWORD: postgres
      POSTGRES_USER: postgres
      POSTGRES_DB: postgres
    ports:
      - "5432:5432"
    networks:
      - myevershop

networks:
  myevershop:
    name: MyEverShop
    driver: bridge

volumes:
  postgres-data:
```

--------------------------------

### Start Evershop Production Server (Bash)

Source: https://evershop.io/docs/development/module/create-your-first-extension

Command to start the Evershop server in production mode after compilation.

```bash
npm run start

```

--------------------------------

### Evershop Extension Development Guide

Source: https://evershop.io/docs/development/module

Guides users on developing custom extensions for EverShop, covering setup, deployment, structure, naming conventions, and best practices for creating new functionalities.

```English
## 📄️ Extension Development
Learn how to develop custom extensions for EverShop, from setup to deployment, including structure, naming conventions, and best practices.
```

--------------------------------

### Get Product via JavaScript Fetch

Source: https://evershop.io/docs/api/product

Shows a JavaScript example using the Fetch API to get product details. It demonstrates setting headers and processing the JSON response, including error handling.

```javascript
fetch('https://<your domain>/api/products/433ba97f-8be7-4be9-be3f-a9f341f2b89f', {
  headers: {
    'Accept': 'application/json',
    'Cookie': 'asid=<your admin cookie>'
  }
})
  .then(response => response.json())
  .then(data => {
    if(data.error) {
      // Handle the error
    } else {
      // Handle the data
    }
  })
  .catch(error => {
    // Handle the error
  });

```

--------------------------------

### Install NPM Package

Source: https://evershop.io/docs/development/module/create-your-first-extension

Install your published extension package into a project using npm. Replace 'your-package-name' with the actual name of your package.

```bash
npm install your-package-name
```

--------------------------------

### Start EverShop Development Server

Source: https://evershop.io/docs/development/module/widget-development

Command to start the EverShop development server, which compiles components and makes the custom widget available in the admin panel for testing.

```bash
npm run dev

```

--------------------------------

### Deploy Evershop to DigitalOcean App Platform

Source: https://evershop.io/docs/development/deployment

A comprehensive, step-by-step guide on deploying your EverShop e-commerce application to DigitalOcean App Platform. This guide includes PostgreSQL database integration.

```bash
A comprehensive, step-by-step guide on deploying your EverShop e-commerce application to DigitalOcean App Platform with PostgreSQL database integration.
```

--------------------------------

### Start EverShop in Production Mode

Source: https://evershop.io/docs/development/knowledge-base/command-lines

Launches your store in production mode. Ensure you run `evershop build` before using this command.

```bash
evershop start
```

--------------------------------

### Successful API Response Example

Source: https://evershop.io/docs/development/module/create-your-first-extension

Example of a successful JSON response from the product comment API. It indicates success and includes the saved comment data with its ID, user name, comment text, and creation timestamp.

```json
{  
  "success": true,  
  "data": {  
    "comment": {  
      "commentId": 1,  
      "userName": "John Doe",  
      "comment": "This is a comment",  
      "createdAt": "2023-01-01T00:00:00Z"  
    }  
  }  
}  

```

--------------------------------

### Evershop Build and Start Scripts for DigitalOcean

Source: https://evershop.io/docs/development/deployment/deploy-evershop-to-digitalocean-app-platform

These are the essential npm scripts required in your `package.json` file for DigitalOcean App Platform to build and start your Evershop application during deployment. The `build` script compiles the application, and the `start` script runs it. Additional scripts for user management are also included.

```json
{
  "scripts": {
    "build": "evershop build --skip-minify",
    "start": "evershop start",
    "user:create": "evershop user:create",
    "user:changePassword": "evershop user:changePassword"
  }
}
```

--------------------------------

### Publish NPM Package

Source: https://evershop.io/docs/development/module/create-your-first-extension

Publish your extension package to the npm registry with public access. This makes it available for others to install.

```bash
npm publish --access public
```

--------------------------------

### Create PostgreSQL Database Connection and Query

Source: https://evershop.io/docs/development/knowledge-base/database

Demonstrates how to create a database connection using the pool object provided by EverShop's PostgreSQL module. It includes an example of selecting data from 'cms_page' and 'cms_page_description' tables, joining them, and filtering by status and URL key.

```javascript
import { pool } from "@evershop/evershop/lib/postgres";
import { select } from "@evershop/postgres-query-builder";

const query = select();
query
  .from("cms_page")
  .leftJoin("cms_page_description")
  .on(
    "cms_page.cms_page_id",
    "=",
    "cms_page_description.cms_page_description_cms_page_id"
  );
query.where("status", "=", 1);
query.where("cms_page_description.url_key", "=", request.params.url_key);

const cmsPage = await query.load(pool);
```

--------------------------------

### Install Certbot and Nginx Plugin

Source: https://evershop.io/docs/development/deployment/deploy-evershop-to-aws

Installs Certbot and its Nginx plugin using apt, which is necessary for obtaining and managing SSL certificates with Let's Encrypt on Debian-based systems.

```bash
sudo apt install -y certbot python3-certbot-nginx
```

--------------------------------

### EverShop CLI Commands

Source: https://evershop.io/docs/development/knowledge-base

This section details the comprehensive guide to EverShop's command-line interface, providing explanations of commands used for building, developing, and managing your online store.

```bash
evershop build
evershop develop
evershop manage
```

--------------------------------

### Example Public Directory Structure

Source: https://evershop.io/docs/development/knowledge-base/static-file-serving

Provides an example of how to organize static files within the 'public' directory using subdirectories for different asset types like images, JavaScript, and CSS. This promotes better project maintainability.

```File Structure
public/
├── images/
│   ├── logo.png
│   └── banners/
├── js/
│   └── custom-scripts.js
├── css/
│   └── custom-styles.css
├── fonts/
└── favicon.ico
```

--------------------------------

### Monitor EverShop Application with PM2

Source: https://evershop.io/docs/development/deployment/deploy-evershop-to-aws

Starts the PM2 monitor interface, providing a real-time overview of the EverShop application's performance and status.

```bash
pm2 monit
```

--------------------------------

### Deploy Evershop to Azure

Source: https://evershop.io/docs/development/deployment

A comprehensive guide to deploy your EverShop e-commerce platform to Microsoft Azure using Azure App Service. It provides step-by-step instructions for a successful deployment.

```bash
Follow this comprehensive guide to deploy your EverShop e-commerce platform to Microsoft Azure using Azure App Service with step-by-step instructions.
```

--------------------------------

### Obtain and Install Let's Encrypt SSL Certificate

Source: https://evershop.io/docs/development/deployment/deploy-evershop-to-aws

Uses Certbot to obtain and install an SSL certificate for the specified domain(s) and configures Nginx to use it. This command also handles HTTP to HTTPS redirection.

```bash
sudo certbot --nginx -d yourdomain.com -d www.yourdomain.com
```

--------------------------------

### Start EverShop in Development Mode

Source: https://evershop.io/docs/development/knowledge-base/command-lines

Starts your store in development mode with hot-reloading enabled for a streamlined development experience. This command automatically enables debug mode and watches for file changes.

```bash
evershop dev
```

--------------------------------

### Evershop API Route Definition Example

Source: https://evershop.io/docs/development/knowledge-base/api-routes

Provides an example of a `route.json` file, specifying the HTTP methods, path, and access level for an API endpoint, in this case, a product deletion API.

```json
{
  "methods": ["DELETE"],
  "path": "/products/:id",
  "access": "private"
}
```

--------------------------------

### Get Product Attribute (JavaScript)

Source: https://evershop.io/docs/api/attribute

Fetches product attribute information using the Fetch API. This JavaScript example shows how to make a GET request and process the response.

```javascript
fetch('https://<your domain>/api/attributes/363ba97f-8be7-4be9-be3f-a9f341f2b89f', { \
  headers: { \
    'Accept': 'application/json', \
    'Cookie': 'asid=<your admin cookie>' \
  } \
}) \
  .then(response => response.json()) \
  .then(data => { \
    if(data.error) { \
      // Handle the error \
    } else { \
      // Handle the data \
    } \
  }) \
  .catch(error => { \
    // Handle the error \
  });
```

--------------------------------

### EverShop Technology Stack Overview

Source: https://evershop.io/docs/development/getting-started/introduction

This section outlines the core technologies powering EverShop. It highlights NodeJS for server-side runtime, PostgreSQL for database management, React for frontend UI development with server-side rendering, and GraphQL for flexible API querying.

```text
NodeJS: Open-source server side runtime environment built on Chrome's V8 JavaScript engine.
PostgreSQL: Powerful, open source object-relational database system (version 13 or higher required).
React: Front-end JavaScript library for building user interfaces, with server-side rendering.
GraphQL: Query language for APIs and a runtime for fulfilling queries.
```

--------------------------------

### Evershop Create First Extension Tutorial

Source: https://evershop.io/docs/development/module

A step-by-step tutorial for creating a custom EverShop extension, specifically demonstrating the implementation of a product comment feature.

```English
## 📄️ Create Your First Extension
This step-by-step tutorial demonstrates how to create a custom extension for EverShop by implementing a product comment feature.
```

--------------------------------

### Get Coupon Details

Source: https://evershop.io/docs/api/promotion

Retrieves detailed information about a specific coupon using its unique identifier. The request does not require a body. Examples are provided for cURL and JavaScript.

```curl
curl -H "Accept: application/json" -H "Cookie: asid=<your admin cookie>" https://<your domain>/api/coupons/{id}
```

```javascript
fetch('https://<your domain>/api/coupons/{id}', {
  headers: {
    'Accept': 'application/json',
    'Cookie': 'asid=<your admin cookie>'
  }
})
  .then(response => response.json())
  .then(data => {
    if(data.error) {
      // Handle the error
    } else {
      // Handle the data
    }
  })
  .catch(error => {
    // Handle the error
  });

```

--------------------------------

### Navigate to Extension Directory

Source: https://evershop.io/docs/development/module/create-your-first-extension

Change the current directory to your extension's folder. This is the first step before publishing.

```bash
cd extensions/productComment
```

--------------------------------

### Translate Text Client-Side (React)

Source: https://evershop.io/docs/development/knowledge-base/translation

Illustrates how to use the `_` function within React components for client-side translations in EverShop. It shows a basic usage and an example with dynamic content, passing variables to the translation function.

```javascript
import { _ } from "@evershop/evershop/lib/locale/index";

const MyComponent = () => {
  return <div>{_("Hello, world!")}</div>;
};

const MyComponentWithDynamic = ({ name }) => {
  return <div>{_("Hello, ${name}!", { name })}</div>;
};
```

--------------------------------

### Create General Translation CSV File

Source: https://evershop.io/docs/development/knowledge-base/translation

Provides an example of a CSV file for storing general translations in EverShop. The file includes two columns: the original English text and its French translation, demonstrating key-value pairs for localization.

```csv
en,fr
"Hello, world!","Bonjour le monde!"
"Welcome to our store","Bienvenue dans notre boutique"
"Add to cart","Ajouter au panier"
```

--------------------------------

### Translate Text Server-Side (JavaScript)

Source: https://evershop.io/docs/development/knowledge-base/translation

Shows how to use the `translate` function in EverShop's server-side JavaScript code to retrieve localized strings. It imports the function and uses it to get a translated greeting, demonstrating dynamic translation based on the store's language setting.

```javascript
import { _, translate } from "@evershop/evershop/lib/locale/index";
const greeting = translate("Hello, world!");
console.log(greeting); // Outputs: "Bonjour le monde!" if the language is set to French
```

--------------------------------

### Final Extension Directory Structure

Source: https://evershop.io/docs/development/module/create-your-first-extension

This snippet illustrates the expected directory structure for the 'productComment' EverShop extension after completing the initial setup steps, including the addition of `package.json` and `tsconfig.json` files.

```bash
/extensions  
    └── productComment  
        ├── src  
        ├── package.json  
        └── tsconfig.json  

```

--------------------------------

### Getting Evershop Configuration with Default Value (JavaScript)

Source: https://evershop.io/docs/development/knowledge-base/configuration-guide

This JavaScript snippet illustrates how to retrieve a configuration value from Evershop using a utility function `getConfig`. It allows specifying a default value ('en' in this case) that will be returned if the requested configuration key ('shop.language') is not found, preventing application errors.

```javascript
const {
  getConfig
} = require('@evershop/evershop/lib/util/getConfig');

let shopTitle = getConfig('shop.language', 'en');
```

--------------------------------

### Deploy EverShop to Heroku

Source: https://evershop.io/docs/development/deployment/deploy-evershop-to-heroku

This guide provides detailed instructions for deploying an EverShop application on Heroku's cloud platform using the Heroku Command Line Interface (CLI) and a PostgreSQL database add-on. It assumes you have an active Heroku account, a local EverShop project, Git, and the Heroku CLI installed.

```Bash
# Prerequisites:
# 1. An active Heroku account
# 2. An EverShop project installed and running locally
# 3. Git installed locally
# 4. Heroku CLI installed

# Example commands (actual commands would be provided in a full guide):
# heroku login
# git init
# heroku create <your-app-name>
# git add .
# git commit -m "Initial commit"
# git push heroku main
# heroku addons:create heroku-postgresql:hobby-dev
# heroku pg:migrate
```

--------------------------------

### Deploy Evershop to Heroku

Source: https://evershop.io/docs/development/deployment

A comprehensive guide for deploying your EverShop e-commerce application to Heroku. This guide includes instructions for integrating with a PostgreSQL database.

```bash
A comprehensive guide for deploying your EverShop e-commerce application to Heroku with PostgreSQL database integration.
```

--------------------------------

### Configure Theme Settings

Source: https://evershop.io/docs/development/knowledge-base/configuration-guide

Sets up theme configurations for the storefront, including logo details (alt text, source, dimensions) and head tags for links, meta tags, and scripts.

```JSON
{
  "themeConfig": {
    "logo": {
      "alt": "Your amazing shop logo",
      "src": "/logo.png",
      "width": 100,
      "height": 100
    },
    "headTags": {
      "links": [],
      "metas": [],
      "scripts": []
    },
    "copyRight": "© 2022 Evershop. All Rights Reserved."
  }
}
```

--------------------------------

### Configure Catalog Display Settings (JSON)

Source: https://evershop.io/docs/development/knowledge-base/configuration-guide

Sets up catalog-related configurations, including image dimensions for thumbnails, listings, and single product views, as well as controlling the visibility of out-of-stock products.

```JSON
{
  "catalog": {
    "product": {
      "image": {
        "thumbnail": {
          "width": 100,
          "height": 100
        },
        "listing": {
          "width": 300,
          "height": 300
        },
        "single": {
          "width": 500,
          "height": 500
        }
      }
    },
    "showOutOfStockProduct": false
  }
}
```

--------------------------------

### Initialize Git Repository

Source: https://evershop.io/docs/development/deployment/deploy-evershop-to-heroku

This command initializes a new Git repository in your project directory, preparing it for version control and deployment.

```bash
git init
```

--------------------------------

### EverShop Demo Store Credentials

Source: https://evershop.io/docs/development/getting-started/introduction

Provides the login credentials for accessing the EverShop demo store's admin panel. This allows users to explore the platform's features and management capabilities.

```text
Admin panel email: demo@evershop.io
Admin panel password: 123456
```

--------------------------------

### Install Published Extension via NPM

Source: https://evershop.io/docs/development/module/extension-development

Command to install an extension that has been published to NPM. This adds the extension to the project's node_modules directory.

```bash
npm install @yournamespace/your-extension-name
```

--------------------------------

### Extension package.json Configuration

Source: https://evershop.io/docs/development/module/create-your-first-extension

This `package.json` file is specific to the 'productComment' extension. It defines the extension's name, version, module type, and includes a script for compiling TypeScript code and copying static assets.

```json
{
  "name": "@evershop/productComment",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "compile": "tsc && copyfiles -u 1 \"src/**/*.{graphql,scss,json}\" dist"
  },
  "devDependencies": {
    "typescript": "^5.0.0"
  }
}

```

--------------------------------

### Get Product Attribute (cURL)

Source: https://evershop.io/docs/api/attribute

Retrieves details of a specific product attribute using a GET request. Requires the attribute's unique identifier.

```curl
curl \
  -H "Accept: application/json" \
  -H "Cookie: asid=<your admin cookie>" \
  https://<your domain>/api/attributes/363ba97f-8be7-4be9-be3f-a9f341f2b89f
```

--------------------------------

### Deploy Evershop to AWS

Source: https://evershop.io/docs/development/deployment

A comprehensive guide for deploying EverShop to Amazon Web Services. It covers using EC2 for application hosting and RDS for PostgreSQL database management.

```bash
A comprehensive guide for deploying EverShop to Amazon Web Services using EC2 for application hosting and RDS for PostgreSQL database management.
```

--------------------------------

### Create Extension Directory Structure

Source: https://evershop.io/docs/development/module/create-your-first-extension

This snippet shows the basic directory structure for a new EverShop extension named 'productComment'. It includes the main extension folder and a 'src' subfolder.

```bash
./extensions  
    └── productComment  
        └── src  

```

--------------------------------

### Configure NPM Installed Extension in EverShop

Source: https://evershop.io/docs/development/module/extension-development

Demonstrates how to configure an extension installed via NPM in the EverShop configuration file. The 'resolve' path is updated to point to the node_modules directory.

```json
{
  "system": {
        "extensions": [
            {
                "name": "yourExtensionName",
                "resolve": "node_modules/@yournamespace/your-extension-name",
                "enabled": true,
                "priority": 10
            }
        ]
    }
}
```

--------------------------------

### Evershop API Structure Example

Source: https://evershop.io/docs/development/knowledge-base/api-routes

Illustrates the directory structure for RESTful API endpoints within a module, showing how each API is organized with middleware functions and a route definition file.

```directory
catalog  
├── api  
│   ├── createProduct  
│   │   ├── ... // Middleware functions  
│   │   └── route.json  
│   ├── updateProduct  
│   │   ├── ... // Middleware functions  
│   │   └── route.json  
│   ├── createCategory  
│   │   ├── ... // Middleware functions  
│   │   └── route.json  
│   ├── updateCategory  
│   │   ├── ... // Middleware functions  
│   │   └── route.json  
│   ├── createAttribute  
│   │   ├── ... // Middleware functions  
│   │   └── route.json  
│   └── updateAttribute  
│       ├── ... // Middleware functions  
│       └── route.json  
```

--------------------------------

### Set Up PostgreSQL Environment Variables

Source: https://evershop.io/docs/development/knowledge-base/database

Configure database connection details by setting environment variables in a .env file. This includes host, port, user, password, database name, and SSL mode.

```env
DB_HOST=localhost
DB_PORT=5432
DB_USER=postgres
DB_PASSWORD=postgres
DB_NAME=evershop
DB_SSLMODE=disable
```

--------------------------------

### Enable Product Comment Extension (JSON)

Source: https://evershop.io/docs/development/module/create-your-first-extension

Configuration snippet for enabling the 'productComment' extension in Evershop by adding it to the 'extensions' array in the environment's configuration file.

```json
{
  "system": {
        ...
        "extensions": [
            {
                "name": "productComment",
                "resolve": "extensions/productComment",
                "enabled": true
            }
        ]
    }
}

```

--------------------------------

### Install Node.js on Ubuntu

Source: https://evershop.io/docs/development/deployment/deploy-evershop-to-aws

Installs Node.js version 18.x and NPM version 8.x or higher on an Ubuntu system using a script from nodesource.com. This is a prerequisite for running the EverShop application.

```bash
sudo apt update
sudo apt install -y curl
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt install -y nodejs
```

--------------------------------

### Azure CLI: Create Web App and Database

Source: https://evershop.io/docs/development/deployment/deploy-evershop-to-azure

This snippet demonstrates how to create a web app and a database in Azure using the Azure CLI. It assumes you have the Azure CLI installed and are logged in. The commands create a resource group, a web app, and a MySQL database, then link them together.

```bash
az group create --name evershop-rg --location "East US"
az webapp create --resource-group evershop-rg --name evershop-webapp --plan evershop-plan
az mysql flexible-server create --resource-group evershop-rg --name evershop-db --admin-user evershopadmin --admin-password <YOUR_STRONG_PASSWORD> --sku-name Standard_D2s_v3 --tier FlexibleServer --storage-size 128 --version 8.0.21 --location "East US"
az webapp config connection-string set --resource-group evershop-rg --name evershop-webapp --connection-string-type MySQL --settings DATABASE_URL=Server=tcp:evershop-db.mysql.database.azure.com,5432,user id=evershopadmin@evershop-db,password=<YOUR_STRONG_PASSWORD>,persist security info=False,database=azure_db
```

--------------------------------

### Install PM2 Process Manager

Source: https://evershop.io/docs/development/deployment/deploy-evershop-to-aws

Installs the PM2 process manager globally using NPM. PM2 is used to keep the EverShop application running continuously and to automatically restart it upon server reboots.

```bash
sudo npm install -g pm2
```

--------------------------------

### Test API Endpoint with Curl

Source: https://evershop.io/docs/development/module/create-your-first-extension

Example cURL command to test the product comment API endpoint. It demonstrates how to make a POST request with JSON payload containing product_id, user_name, and comment.

```bash
curl -X POST \  
  http://localhost:3000/api/comments \  
  -H 'Content-Type: application/json' \  
  -d '{  
  "product_id": 1,  
  "user_name": "John Doe",  
  "comment": "This is a comment"  
}'  

```

--------------------------------

### Evershop Module Components Explained

Source: https://evershop.io/docs/development/module/module-overview

Details the purpose of key directories within an Evershop module: API for endpoints and middleware, Pages for frontend interfaces, Migration for database changes, Services for business logic, bootstrap.ts for initialization, and package.json for dependencies.

```text
1. **Api** : The `api` directory contains RESTful API endpoints, middleware functions, and route definitions.
2. **Pages** : The `pages` folder contains frontend pages for both admin and customer interfaces. Each page includes route definitions, middleware functions, and React components for UI rendering.
3. **Migration** : The `migration` folder contains database migration files used for module installation and upgrades.
4. **Services** : The `services` folder contains TypeScript classes and functions that provide specific functionality for the module.
5. **bootstrap.ts** : This file is executed when the application starts, allowing modules to perform initialization tasks.
6. **package.json** : An extension module can have its own dependencies. EverShop uses NPM workspaces to manage these dependencies.
```

--------------------------------

### Theme package.json Configuration

Source: https://evershop.io/docs/development/theme/theme-overview

Defines the metadata, dependencies, and build scripts for an EverShop theme. Includes essential fields like name, version, description, type, scripts for compilation, and dependencies.

```json
{
  "name": "yourtheme",
  "version": "1.0.0",
  "description": "A custom theme for EverShop",
  "type": "module",
  "scripts": {
    "compile": "tsc && copyfiles -u 1 \"src/**/*.{graphql,scss,json}\" dist"
  },
  "dependencies": {
    "@evershop/evershop": "^1.0.0"
  },
  "devDependencies": {
    "postcss-cli": "^8.3.1",
    "webpack": "^5.64.4"
  }
}
```

--------------------------------

### Deploy EverShop to Azure

Source: https://evershop.io/docs/development/deployment/deploy-evershop-to-azure

This section details the process of deploying EverShop to Microsoft Azure, specifically utilizing Azure App Service for hosting and Azure Database for PostgreSQL for the database. It assumes the user has an active Azure account, a local EverShop installation, and Git installed.

```bash
git clone <your-evershop-repo>
cd evershop
# Follow Azure deployment steps...
```

--------------------------------

### Product View Page Structure

Source: https://evershop.io/docs/development/theme/view-system

Outlines the file structure for the 'productView' page in the frontStore section, including route configuration, middleware, and specific product view components.

```directory
productView  
    ├── route.json  
    ├── index.js  
    ├── ProductImages.jsx  
    ├── ProductInfo.jsx  
    └── ProductOptions.jsx  
```

--------------------------------

### Evershop NPM Scripts Configuration

Source: https://evershop.io/docs/development/deployment/deploy-evershop-to-azure

This `package.json` snippet configures essential NPM scripts for an Evershop project. It includes scripts for building the project (`build`), starting the application (`start`), and managing users (`user:create`, `user:changePassword`). The `build` script has an option to skip minification for faster builds.

```json
{
  "name": "evershop",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "evershop build --skip-minify",
    "start": "evershop start",
    "user:create": "evershop user:create",
    "user:changePassword": "evershop user:changePassword"
  },
  "workspaces": ["extensions/*"],
  "author": "EverShop",
  "license": "ISC",
  "dependencies": {
    "@evershop/evershop": "^1.0.0-rc.8"
  }
}
```

--------------------------------

### Configure Payment Status

Source: https://evershop.io/docs/development/knowledge-base/configuration-guide

Details the configuration for payment statuses, including name, badge, progress, cancelability, and default status.

```JSON
{
  "order": {
    "paymentStatus": {
      "pending": {
        "name": "Pending",
        "badge": "default",
        "progress": "incomplete",
        "isDefault": true
      },
      "processing": {
        "name": "Processing",
        "badge": "default",
        "progress": "incomplete",
        "isCancelable": false,
        "isDefault": false
      },
      "paid": {
        "name": "Paid",
        "badge": "success",
        "progress": "complete"
      },
      "failed": {
        "name": "Failed",
        "badge": "critical",
        "progress": "complete"
      }
    }
  }
}
```
Tokens:
Raw