Skip to main content

Установка и настройка

Это руководство поможет вам развернуть Arisweb Marketplace на локальной машине для разработки и тестирования.

Системные требования​

Минимальные требования​

  • Node.js версии 18 или выше
  • npm версии 8 или выше
  • Git для клонирования репозитория
  • 4 GB RAM для комфортной работы
  • 2 GB свободного места на диске

Рекомендуемые требования​

  • Node.js версии 20 LTS
  • npm версии 10 или выше
  • 8 GB RAM для работы с большими проектами
  • SSD накопитель для быстрой работы

Установка Node.js​

Windows​

  1. Скачайте установщик с официального сайта Node.js
  2. Запустите установщик и следуйте инструкциям
  3. Перезагрузите компьютер после установки

macOS​

# Используя Homebrew
brew install node

# Или скачайте установщик с официального сайта

Linux (Ubuntu/Debian)​

# Обновите пакеты
sudo apt update

# Установите Node.js и npm
sudo apt install nodejs npm

# Проверьте установку
node --version
npm --version

Клонирование репозитория​

# Клонируйте репозиторий
git clone https://github.com/arisweb/marketplace.git

# Перейдите в папку проекта
cd marketplace

Установка зависимостей​

# Установка всех зависимостей
npm install

# Если возникают ошибки, попробуйте очистить кеш
npm cache clean --force
npm install

Возможные проблемы при установке​

Ошибки с правами доступа (Linux/macOS)​

# Настройка npm для пользователя
mkdir ~/.npm-global
npm config set prefix '~/.npm-global'

# Добавьте в ~/.bashrc или ~/.zshrc
export PATH=~/.npm-global/bin:$PATH

Проблемы с Python/Visual Studio (Windows)​

# Установка build tools для Windows
npm install --global windows-build-tools

Настройка переменных окружения​

Создание файла конфигурации​

# Скопируйте пример конфигурации
cp .env.example .env

Основные переменные​

# Основные настройки
VITE_APP_TITLE=Arisweb Marketplace
VITE_APP_VERSION=1.0.0
VITE_API_URL=http://localhost:3000/api

# Настройки разработки
VITE_NODE_ENV=development
VITE_DEBUG=true

# API конфигурация (будет доступно в будущих версиях)
VITE_API_BASE_URL=https://api.arisweb.com
VITE_WEBSOCKET_URL=wss://ws.arisweb.com

# Аналитика (опционально)
VITE_ANALYTICS_ID=your-analytics-id

Запуск проекта​

Development режим​

# Запуск dev-сервера
npm run dev

# Сервер будет доступен по адресу:
# http://localhost:5173

Просмотр в браузере​

  1. Откройте браузер
  2. Перейдите по адресу http://localhost:5173
  3. Вы должны увидеть главную страницу Arisweb Marketplace

Структура проекта​

arisweb-marketplace/
├── public/                 # Статические файлы
│   ├── logo.png           # Логотип проекта
│   ├── favicon.ico        # Иконка сайта
│   └── robots.txt         # Настройки для поисковых роботов
├── src/                   # Исходный код
│   ├── components/        # React компоненты
│   │   ├── ui/           # Базовые UI компоненты
│   │   ├── auth/         # Компоненты аутентификации
│   │   ├── admin/        # Админ панель
│   │   └── marketplace/  # Компоненты маркетплейса
│   ├── pages/            # Страницы приложения
│   ├── hooks/            # Пользовательские хуки
│   ├── contexts/         # React контексты
│   ├── services/         # Сервисы для работы с API
│   ├── types/            # TypeScript типы
│   ├── utils/            # Утилиты и хелперы
│   └── styles/           # Стили и темы
├── docs/                 # Документация (Docusaurus)
├── package.json          # Зависимости и скрипты
├── vite.config.ts        # Конфигурация Vite
├── tailwind.config.ts    # Конфигурация Tailwind CSS
└── tsconfig.json         # Конфигурация TypeScript

Настройка IDE​

Visual Studio Code​

Рекомендуемые расширения:

{
  "recommendations": [
    "bradlc.vscode-tailwindcss",
    "esbenp.prettier-vscode",
    "ms-vscode.vscode-typescript-next",
    "formulahendry.auto-rename-tag",
    "christian-kohler.path-intellisense"
  ]
}

WebStorm​

  1. Откройте проект в WebStorm
  2. Настройте Node.js interpreter
  3. Включите TypeScript service
  4. Настройте Prettier для форматирования кода

Проверка установки​

Тестирование компонентов​

# Запуск линтера
npm run lint

# Сборка проекта
npm run build

# Предварительный просмотр production сборки
npm run preview

Проверка функциональности​

  1. Главная страница - должна загружаться без ошибок
  2. Навигация - переходы между страницами работают
  3. Консоль браузера - нет критических ошибок
  4. Адаптивность - сайт корректно отображается на мобильных устройствах

Следующие шаги​

После успешной установки рекомендуем:

  1. Создать первый маркетплейс - пошаговое руководство
  2. Изучить конфигурацию - настройка под ваши нужды
  3. Познакомиться с API - интеграция с внешними системами

Устранение неполадок​

Порт уже занят​

# Найти процесс, использующий порт 5173
lsof -ti:5173

# Завершить процесс
kill -9 <PID>

# Или запустить на другом порту
npm run dev -- --port 3001

Ошибки TypeScript​

# Очистка кеша TypeScript
rm -rf node_modules/.cache
npm run build

Проблемы с зависимостями​

# Полная переустановка
rm -rf node_modules package-lock.json
npm install

Получение помощи​

Если у вас возникли проблемы:

  1. Проверьте журнал ошибок в консоли браузера
  2. Посмотрите в терминал где запущен dev-сервер
  3. Обратитесь в поддержку - support@arisweb.com
  4. Создайте issue в GitHub репозитории

Поздравляем! Вы успешно установили Arisweb Marketplace. Теперь можно переходить к созданию первого маркетплейса.