Skip to content

Setting up the environment and the HTML page#

Beta version

The functionality is in beta mode. Features are subject to change and may also work unstably. There may be additional charges for functionality in the future.
You can request access to the functionality via GREEN-API support

To create the application, you need to set up an environment consisting of a web server and a simple web form for authorization, making calls, receiving calls and ending them. This step is needed if you build your own client from scratch; in the ready-made examples from the repository, the environment is already set up.

This example uses Vite — a modern frontend build tool that does not depend on a framework: you can use React, Vue, Vanilla JS or anything else for your project.

Installing Node.js#

First, install Node.js with the npm package manager, which you need to install Vite. You can download Node.js for your system from the official website.

Creating a Vite project#

Open your terminal and run the following commands 

npm create vite@latest my-simple-app

When prompted to select a framework, select "Vanilla" for a project without any specific interface framework. 

cd my-simple-app
npm install

You have created a new Vite project.

Project structure#

Your project structure will look approximately like this:

my-simple-app/
├── index.html
├── main.js
├── style.css
├── vite.config.js
└── package.json
  • index.html: the main HTML file of your website
  • main.js: the main JavaScript file with your scripts
  • style.css: the CSS file for your styles
  • vite.config.js: the configuration file for Vite

To create the website, create a minimal index.html and 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>

And main.js:

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

You can also set up style.css and add scripts to main.js.

To create a distribution, run:

npm run build
This creates the dist folder with optimized and minified files ready for deployment.

To learn more about Vite, use the following resources:

The environment is ready — next, install the library.