How to Install VvvebJs on Ubuntu 24.04 LTS

This guide explains how to manually install and configure VvvebJs on an Ubuntu 24.04 LTS server.

VvvebJs is a visual website builder that allows you to create and edit web pages using a drag-and-drop interface instead of manually writing all of the HTML and CSS yourself.

By the end of this guide, VvvebJs will be installed at:

/var/www/vvvebjs

Apache will serve VvvebJs on port:

8083

You will then be able to access VvvebJs using:

http://YOUR_SERVER_IP:8083/

1. Before You Begin

Before starting, make sure you have:

• An Ubuntu 24.04 LTS server.
• SSH access to the server.
• A user account with sudo privileges.
• An internet connection on the server.
• Port 8083 available.

2. Connect to Your Ubuntu Server

From your local computer, connect to the server using SSH.

For example:

ssh username@YOUR_SERVER_IP

Replace username with your Ubuntu username and YOUR_SERVER_IP with the IP address of your server.

Once connected, you should see a terminal prompt similar to:

username@server:~$

3. Check the Ubuntu Version

First, confirm that the server is running Ubuntu 24.04.

cat /etc/os-release

Look for a line similar to:

VERSION_ID="24.04"

You can also use:

lsb_release -a

4. Update the Ubuntu Package List

Before installing software, update Ubuntu's package information.

sudo apt-get update

This command downloads the latest information about available packages from your configured Ubuntu repositories.

5. Install Apache, Git, PHP and Required Packages

VvvebJs requires a web server and several supporting packages. Install Apache, Git, PHP and the PHP extensions used by the application.

sudo apt-get install -y \
apache2 \
git \
php \
php-cli \
php-curl \
php-mbstring \
php-xml \
php-zip \
curl \
unzip

The packages perform the following roles:

• apache2 - Web server used to serve VvvebJs.
• git - Downloads the VvvebJs source code from GitHub.
• php - Provides PHP support.
• php-cli - Provides PHP command-line support.
• php-curl - Provides PHP network functionality.
• php-mbstring - Provides multibyte string support.
• php-xml - Provides XML functionality.
• php-zip - Provides ZIP support.
• curl - Used for testing HTTP connections.
• unzip - Provides ZIP extraction support.

6. Check Whether Port 8083 Is Already in Use

The VvvebJs installation in this guide uses Apache port 8083.

Before configuring Apache, check whether another application is already using that port.

sudo ss -tulnp | grep ':8083'

If there is no output, port 8083 is probably available.

You can also run:

sudo ss -tuln | grep ':8083'

7. Create the VvvebJs Web Directory

Create the directory where VvvebJs will be installed.

sudo mkdir -p /var/www/vvvebjs

The -p option creates the directory and any missing parent directories.

8. Download VvvebJs from GitHub

VvvebJs is available from its official GitHub repository.

The repository used by this installation is:

https://github.com/givanz/VvvebJs.git

Clone the repository into the web directory:

sudo git clone https://github.com/givanz/VvvebJs.git /var/www/vvvebjs

The command downloads the VvvebJs source code into:

/var/www/vvvebjs

9. Verify the VvvebJs Files

Check that the files were downloaded successfully.

sudo ls -lah /var/www/vvvebjs

You should see files and directories similar to:

editor.html
editor.php
index.html
css/
js/
libs/
demo/
img/
fonts/
resources/
package.json

In particular, verify that editor.html exists:

sudo test -f /var/www/vvvebjs/editor.html && echo "VvvebJs files are present"

A successful installation should display:

VvvebJs files are present

10. Configure Git Safe Directory

If the VvvebJs directory is owned by a different Linux user from the user running Git, Git may display a "detected dubious ownership" error.

To prevent this problem for the VvvebJs directory, run:

sudo git config --system --add safe.directory /var/www/vvvebjs

This tells Git that the VvvebJs directory is a trusted Git repository location.

11. Set the Correct VvvebJs File Ownership

Apache normally runs as the www-data user on Ubuntu. Give Apache ownership of the VvvebJs files:

sudo chown -R www-data:www-data /var/www/vvvebjs

Verify the ownership:

sudo ls -ld /var/www/vvvebjs

The result should show www-data www-data as the owner and group.

12. Configure Apache to Listen on Port 8083

Apache normally listens on ports 80 and 443. We need Apache to listen on port 8083 as well.

Open the Apache ports configuration file:

sudo nano /etc/apache2/ports.conf

Add the following line:

Listen 8083

Save the file and exit Nano.

In Nano:

1. Press Ctrl + O to save.
2. Press Enter to confirm the filename.
3. Press Ctrl + X to exit.

You can verify the line using:

grep -n "Listen 8083" /etc/apache2/ports.conf

13. Create the VvvebJs Apache VirtualHost

Create a dedicated Apache VirtualHost configuration for VvvebJs.

sudo nano /etc/apache2/sites-available/vvvebjs.conf

Paste the following configuration into the file:

<VirtualHost *:8083>

    ServerName _

    ServerAdmin webmaster@localhost

    DocumentRoot /var/www/vvvebjs

    <Directory /var/www/vvvebjs>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>

    DirectoryIndex editor.php editor.html index.php index.html

    ErrorLog ${APACHE_LOG_DIR}/vvvebjs_error.log
    CustomLog ${APACHE_LOG_DIR}/vvvebjs_access.log combined

</VirtualHost>

Save and close the file:

1. Press Ctrl + O.
2. Press Enter.
3. Press Ctrl + X.

14. Enable Apache Rewrite

Enable Apache's rewrite module:

sudo a2enmod rewrite

If Apache says the module is already enabled, that is okay.

15. Enable the VvvebJs Apache Site

Enable the VvvebJs VirtualHost:

sudo a2ensite vvvebjs.conf

Apache should report that the site has been enabled.

16. Disable the Default Apache Site

If you do not need Ubuntu's default Apache website, disable it:

sudo a2dissite 000-default.conf

This prevents Apache's default website from being used instead of the VvvebJs VirtualHost.

sudo apache2ctl -S

17. Check the Apache Configuration

Before restarting Apache, always test the configuration.

sudo apache2ctl configtest

A successful configuration should end with:

Syntax OK

18. Allow Port 8083 Through UFW

If UFW (Ubuntu's firewall) is enabled, allow TCP connections to port 8083:

sudo ufw allow 8083/tcp

Check the firewall:

sudo ufw status verbose

You should see a rule similar to:

8083/tcp                   ALLOW IN    Anywhere

If UFW is not enabled, you do not need to enable it just for this guide. If you already use UFW, make sure your SSH port remains allowed before changing firewall rules.

19. Enable and Start Apache

Make sure Apache starts automatically when the server boots:

sudo systemctl enable apache2

Start Apache:

sudo systemctl start apache2

If Apache was already running and you changed its configuration, restart it:

sudo systemctl restart apache2

20. Check Apache Status

Verify that Apache is running:

sudo systemctl status apache2

Look for:

Active: active (running)

Press Q to leave the status screen.

21. Confirm Apache Is Listening on Port 8083

Run:

sudo ss -tulnp | grep ':8083'

You should see something similar to:

tcp   LISTEN   0   511   *:8083   *:*   users:(("apache2",...))

This confirms that Apache is listening for incoming connections on port 8083.

22. Test VvvebJs Directly on the Server

Test the website locally from the Ubuntu server:

curl -I http://127.0.0.1:8083/

A successful response should contain:

HTTP/1.1 200 OK

This confirms that Apache is responding to requests on port 8083.

23. Find Your Server IP Address

To find the public IP address of your server, you can use:

curl -4 ifconfig.me

For example, the command might return:

102.202.47.171

Your actual IP address will be different.

24. Open VvvebJs in Your Web Browser

From your own computer, open a browser and enter:

http://YOUR_SERVER_IP:8083/

For example:

http://102.202.47.171:8083/

Replace the example IP address with your actual server IP address.

If everything is configured correctly, the VvvebJs visual website editor should appear.

25. Verify the Installation

At this point, the following checks should all succeed:

26. Common Problems

Problem: "This site can't be reached"

If the browser displays a connection timeout, first check whether Apache is listening on port 8083:

sudo ss -tulnp | grep ':8083'

Then check UFW:

sudo ufw status verbose

If UFW is enabled and port 8083 is missing, run:

sudo ufw allow 8083/tcp

Then test the service locally:

curl -I http://127.0.0.1:8083/

If the local test works but the browser cannot connect, the issue is likely related to the firewall, VPS provider firewall/security group, network routing, or another external firewall.

Problem: Apache configuration error

Run:

sudo apache2ctl configtest

Read the error carefully. Apache normally tells you which file and line contains the problem.

You can also view the Apache VirtualHost configuration with:

sudo apache2ctl -S

Problem: Port 8083 is already in use

Find out what is using the port:

sudo ss -tulnp | grep ':8083'

If another application is using the port, either stop that application if it is no longer needed or choose another port for VvvebJs.

Problem: "detected dubious ownership in repository"

If Git displays an error similar to:

fatal: detected dubious ownership in repository at '/var/www/vvvebjs'

Add the directory as a trusted Git directory:

sudo git config --system --add safe.directory /var/www/vvvebjs

Problem: Apache is not running

Check Apache:

sudo systemctl status apache2

Check its configuration:

sudo apache2ctl configtest

View recent Apache errors:

sudo journalctl -u apache2 --no-pager -n 50

You can also check the VvvebJs-specific error log:

sudo tail -50 /var/log/apache2/vvvebjs_error.log

Problem: VvvebJs files are missing

Check the installation directory:

sudo ls -lah /var/www/vvvebjs

Check whether Git considers it a repository:

sudo git -C /var/www/vvvebjs -c safe.directory=/var/www/vvvebjs status

Check the configured Git remote:

sudo git -C /var/www/vvvebjs -c safe.directory=/var/www/vvvebjs remote -v

The remote should point to:

https://github.com/givanz/VvvebJs.git

27. Useful Management Commands

Restart Apache

sudo systemctl restart apache2

Stop Apache

sudo systemctl stop apache2

Start Apache

sudo systemctl start apache2

Check Apache status

sudo systemctl status apache2

Check Apache configuration

sudo apache2ctl configtest

Check whether VvvebJs is listening on port 8083

sudo ss -tulnp | grep ':8083'

Check VvvebJs locally

curl -I http://127.0.0.1:8083/

View VvvebJs Apache access log

sudo tail -50 /var/log/apache2/vvvebjs_access.log

View VvvebJs Apache error log

sudo tail -50 /var/log/apache2/vvvebjs_error.log

28. Installation Complete

If all of the verification tests above are successful, VvvebJs is installed and being served by Apache.

Open the following address in your browser:

http://YOUR_SERVER_IP:8083/

You should see the VvvebJs visual website editor.

29. Installation Summary