Создание HTML страницы#

Бета-версия

Функциональность находится в режиме бета-версии. Функции могут быть изменены, а также могут работать нестабильно. В будущем за функционал может взиматься дополнительная плата.
Подключение к функционалу можно запросить через техподдержку GREEN-API

Для создания приложения вам необходимо настроить окружение в виде веб-сервера и простой веб-формы для авторизации, совершения звонков, приёма звонков и их завершения.

Данный пример использует Vite – современный инструмент сборки фронтенда, который не зависит от фреймворка, вы можете использовать React, Vue, Vanilla JS или что-то ещё для вашего проекта.

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

Для начала необходимо установить Node.js npm менеджером, который понадобится для установки Vite. Скачать Node.js для вашей системы можно с официального сайта.

Создание Vite проекта#

Откройте ваш терминал и запустите следующие команды

npm create vite@latest my-simple-app

При появлении запроса на выбор фреймворка выберите «Vanilla» для проекта без какого-либо определенного фреймворка для интерфейса.

cd my-simple-app
npm install

Вы создали новый Vite проект.

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

Структура вашего проекта будет выглядеть примерно так:

my-simple-app/
├── index.html
├── main.js
├── style.css
├── vite.config.js
└── package.json

index.html: Главный HTML файл вашего сайта
main.js: Основной JavaScript файл с вашими скриптами
style.css: CSS файл для ваших стилей
vite.config.js: конфигурационный файл для Vite

Для создания сайта необходимо создать минимальный index.html и main.js

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Simple App</title>
  <link rel="stylesheet" href="/style.css">
</head>
<body>
  <h1>Hello, Vite!</h1>
  <p>This is a simple project without any frameworks.</p>
  <script type="module" src="/main.js"></script>
</body>
</html>

А также main.js:

document.addEventListener('DOMContentLoaded', () => {
  console.log('JavaScript is working!');
});

Также можете настроить style.css и добавить скрипты в main.js.

Для создание дистрибутива необходимо выполнить:

npm run build

Это создаст папку dist с оптимизированными и минимизированными файлами готовыми к развёртыванию.

Дополнительные ссылки по использованию Vite#

Для изучения и более глубокого погружения в Vite воспользуйтесь источниками: