Скорая помощь для вашей оргтехники

Развернутый проект

Макет в Figma

Это веб-сайт для компании, предоставляющей услуги по ремонту и обслуживанию оргтехники. Проект разработан как современное веб-приложение, которое позволяет пользователям ознакомиться с услугами, контактами и другой информацией о компании.

Технологии

В проекте используются следующие технологии и инструменты:

• Next.js: Фреймворк на базе React для серверного рендеринга, статической генерации и создания быстрых веб-приложений.
• ESLint: Инструмент для анализа кода, обеспечивающий соблюдение стилей кодирования и выявление потенциальных ошибок.
• React: Библиотека для создания пользовательских интерфейсов (входит в Next.js).
• Node.js: Среда выполнения JavaScript на сервере, необходимая для запуска проекта.
• npm (или альтернативы: yarn, pnpm, bun): Пакетный менеджер для установки зависимостей.
• Git: Система контроля версий для работы с репозиторием.

Установка и запуск проекта

Шаг 1: Установка Node.js, npm и Git

Node.js — это программа, которая позволяет запускать JavaScript вне браузера. npm (Node Package Manager) устанавливается вместе с Node.js и используется для установки библиотек проекта. Git — это система контроля версий, необходимая для работы с репозиторием.

1. Установите Node.js:
   • Перейдите на официальный сайт Node.js: https://nodejs.org/.
   • Скачайте версию LTS (Long Term Support) — это стабильная версия, рекомендуемая для большинства пользователей.
     • Для Windows/Mac: Установщик скачается автоматически. Запустите его и следуйте инструкциям (нажмите "Next" по умолчанию).
     • Для Linux: Используйте команду в терминале (для Ubuntu/Debian):

       sudo apt update && sudo apt install nodejs npm

2. Установите Git:
   • Перейдите на официальный сайт Git: https://git-scm.com/downloads.
   • Скачайте и установите Git для вашей операционной системы, следуя инструкциям установщика.
   • Для Linux (Ubuntu/Debian):

     sudo apt install git

3. После установки откройте командную строку (терминал):
   • Windows: Нажмите Win + R, введите cmd и Enter.
   • Mac: Откройте "Terminal" через Spotlight (Cmd + Space).
   • Linux: Откройте терминал (Ctrl + Alt + T).
4. Проверьте установку, введя команды:

   node -v
   npm -v
   git --version

   Если вы увидите версии (например, v20.0.0 для Node.js, v10.0.0 для npm, v2.39.0 для Git), все готово. Если нет — переустановите соответствующую программу.

Если вы предпочитаете другой пакетный менеджер:

npm install -g yarn
# or
npm install -g pnpm
# or
# Скачайте bun с https://bun.sh/ и следуйте инструкциям

Шаг 2: Получение исходного кода

Репозиторий проекта является закрытым (private), поэтому вам потребуется доступ к нему. Свяжитесь с владельцем репозитория, чтобы получить доступ или ZIP-архив с исходным кодом.

1. Если у вас есть доступ к репозиторию:
   • Настройте доступ к приватному репозиторию (например, через SSH или HTTPS с токеном). Инструкции можно найти на платформе, где размещен репозиторий (GitHub, GitLab, Bitbucket и т.д.).
   • В терминале перейдите в папку, где хотите сохранить проект (например, cd Desktop).
   • Клонируйте репозиторий:

     git clone https://github.com/wannabedigital/stud-practice-website.git

2. Если у вас есть ZIP-архив:
   • Скачайте архив от владельца репозитория.
   • Распакуйте архив в удобную папку с помощью любого архиватора (например, WinRAR, 7-Zip или встроенного инструмента вашей ОС).

Шаг 3: Установка зависимостей

Зависимости — это библиотеки, которые нужны проекту для работы. Они указаны в файле package.json, а после установки появится папка node_modules.

1. В терминале перейдите в папку проекта:

   cd путь/к/папке/проекта

   (Например, cd my-project).
2. Установите зависимости:

   npm install
   # or
   yarn install
   # or
   pnpm install
   # or
   bun install

   Это может занять несколько минут. Если возникнут ошибки (например, из-за версии Node.js), обновите Node.js или попробуйте:

   npm install --legacy-peer-deps

После установки вы увидите папку node_modules — это нормально, она содержит все библиотеки. Не редактируйте её вручную!

Шаг 4: Запуск проекта в режиме разработки

Теперь запустите сервер для просмотра сайта.

1. В терминале (в папке проекта) выполните:

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev
   # or
   bun dev

   Сервер запустится, и вы увидите сообщение вроде "Ready on http://localhost:3000".

2. Откройте браузер (Chrome, Firefox и т.д.) и перейдите по адресу: http://localhost:3000.

   • Если порт занят, Next.js предложит другой (например, 3001).

Чтобы остановить сервер, нажмите Ctrl + C в терминале.

Шаг 5: Проверка и отладка

• Если проект не запускается: Проверьте ошибки в терминале. Часто помогает перезапуск или:

  npm cache clean --force

  Затем повторите установку зависимостей.
• ESLint: Если вы редактируете код, ESLint проверит его на ошибки. Запустите:

  npm run lint

• Для production: Соберите проект:

  npm run build
  # or
  yarn build
  # or
  pnpm build
  # or
  bun build

  Затем запустите:

  npm start
  # or
  yarn start
  # or
  pnpm start
  # or
  bun start

Настройка базового URL перед деплоем

Перед публикацией сайта на своём домене необходимо обновить базовый URL, чтобы sitemap, robots.txt и метатеги работали корректно.

1. Откройте файл @config/meta.config.js.
2. Найдите объект SITE_META.
3. Замените строку url: на ваш домен:

export const SITE_META = {
  title: {
    default: 'Скорая помощь для вашей оргтехники',
    template: 'Скорая помощь для вашей оргтехники - %s',
  },
  description: 'Ремонт и обслуживание оргтехники быстро и качественно',
  url: 'https://stud-practice-website.vercel.app', // <- замените на ваш домен
};

Настройка BITRIX_WEBHOOK_URL

Перед публикацией сайта на своём домене необходимо обновить URL вебхука Битрикс24, чтобы форма работала корректно.

Для этого необходимо создать входящий вебхук и скопировать Вебхук для вызова rest api.

Далее в проекте необходимо создать .env файл:

BITRIX_WEBHOOK_URL=https://b24-jjxbt5.bitrix24.ru/ // <- заменить на скопированную вами ссылку

Затем при деплое проекта необходимо добавить эту новую переменную из файла .env.