Guide to Install Our Quizix on VPS

This guide will help you install our Quizix on VPS. If you have any questions, please contact our support team. With this tutorial, you can install Quizix to any type of blank or empty ubuntu server. For example, Digital Ocean Droplets, Amazon Lightsail, Google Cloud Virtual Private Server, Azure Ubuntu Virtual Private Server , etc. Please follow the documentation, and it'll make the installation process relatively easy.

Watch on YouTube

Prerequisites

Before you start, make sure you have the following installed on your VPS:

• Server with php version 8.3 or higher
• all extensions are enabled
• Server ram at least 2GB or higher recommended 4GB
• Server disk at least 4GB or higher recommended 4GB

Installation Process

Step 1: Access VPS At first

you need to access your VPS. You can use SSH to access your VPS. If you don't have SSH, you can use any other method to access your VPS. You can use ssh to access your VPS via Putty if you are windows user or use terminal if you are linux user.

ssh username@ipaddress

then enter your password.

Step 2: Install NodeJS & Required Application

1. Install Node.js using the package manager for your Linux distribution. For example, on Ubuntu, you can install Node.js using the following command:

sudo apt-get update
sudo apt install curl
curl -sL https://deb.nodesource.com/setup_22.x | sudo -E bash -
sudo apt-get install -y nodejs
sudo apt update

2. Verify that Node.js is installed by running the following command:

node --version

3. Install Zip & Unzip

sudo apt-get install zip unzip

Step 3: Setup Server

Nginx is one of the most popular web servers in the world. In this deployment tutorial, we're going to use Nginx to host our website. In this tutorial, we're going to use ubuntu 20.04 to host our website.

Step 3.1: Install Nginx

1. Install Nginx using the package manager for your Linux distribution. For example, on Ubuntu, you can install Nginx using the following command:

sudo apt update

3. Install Nginx using the package manager for your Linux distribution. For example, on Ubuntu, you can install Nginx using the following command:

sudo apt install nginx

4. Verify that Nginx is installed by running the following command:

nginx -v

5. Start Nginx by running the following command:

sudo systemctl start nginx

Step 3.2: Add PPA to get the specific php version

sudo add-apt-repository ppa:ondrej/php
sudo apt update

Step 3.3: Adjusting the Firewall

Before testing Nginx, the firewall software needs to be adjusted to allow access to the service. Nginx registers itself as a service with ufw upon installation, making it straightforward to allow Nginx access. To check the ufw list, use this command,

sudo ufw status
sudo ufw app list

You will get a listing of an application list like this,

At first, add ssh to the firewall,

sudo ufw allow ssh
sudo ufw allow OpenSSH

After that, to enable Nginx on the firewall, use this command,

sudo ufw allow 'Nginx Full'

Now enable the firewall,

sudo ufw enable
sudo ufw default deny

You can verify the change by typing:

sudo ufw status

Step 4: Install MySQL

1. Install MySQL using the package manager for your Linux distribution. For example, on Ubuntu, you can install MySQL using the following command:

sudo apt-get install mysql-server

2. Start the MySQL service by running the following command:

sudo systemctl start mysql

3. Verify the installation by running the following command:

mysql --version

4. Secure your MySQL installation by running the following command:

sudo mysql_secure_installation

5. Follow the on-screen instructions to secure your MySQL installation.

Step 5: Install PHP

Install PHP and the required PHP extensions using the package manager for your Linux distribution. For example, on Ubuntu, you can install PHP using the following command:

sudo apt install php8.3 php8.3-curl php8.3-fileinfo php8.3-gd php8.3-bcmath php8.3-gettext php8.3-mbstring php8.3-bcmath php8.3-exif php8.3-mysqli php8.3-pdo php8.3-zip php8.3-xml -y

Note: If you getting any error then use this command,

sudo apt update
sudo apt install -y software-properties-common ca-certificates lsb-release apt-transport-https

Add Ondřej Surý’s PHP PPA

sudo add-apt-repository ppa:ondrej/php -y
sudo apt update

Again install all the required PHP extensions,

sudo apt install -y \
php8.3 php8.3-cli php8.3-common php8.3-mysql php8.3-zip php8.3-gd php8.3-mbstring \
php8.3-curl php8.3-xml php8.3-bcmath php8.3-intl php8.3-readline php8.3-soap 

Now Install PHP FPM,

sudo apt install php8.3-fpm -y

Enable PHP FPM,

sudo systemctl enable php8.3-fpm

Step 6: Install Composer

php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('sha384', 'composer-setup.php') === 'dac665fdc30fdd8ec78b38b9800061b4150413ff2e3b6f88543c636f7cd84f6db9189d43a81e5503cda447da73c7e5b6') { echo 'Installer verified'.PHP_EOL; } else { echo 'Installer corrupt'.PHP_EOL; unlink('composer-setup.php'); exit(1); }"
php composer-setup.php
php -r "unlink('composer-setup.php');"
sudo mv composer.phar /usr/bin/composer

Or

sudo apt-get install composer

Step 7: Create MySQL Database & User

mysql -u root -p

Now, run the following command to create a database and user for Quizix. Make sure to replace quizix_db, quizix_user, and quizix with your desired database name, username, and password, respectively.

CREATE DATABASE quizix_db;

CREATE USER 'quizix_user'@'localhost' IDENTIFIED BY 'quizix_password';

GRANT ALL PRIVILEGES ON quizix_db.* TO 'quizix_user'@'localhost';

FLUSH PRIVILEGES;

exit

warning

Note: This mysql credentials you need to save for GUI Admin Installer to work.

Step 8: Change permission for the www folder

cd  /var/www
sudo chown -R $USER:$USER /var/www

Step 9: Upload the Files

At first, use this command to create two directory named as admin and client on /var/www/

sudo rm -rf /var/www/quiz
sudo mkdir /var/www/quiz
sudo mkdir /var/www/quiz/admin
sudo mkdir /var/www/quiz/client

Now, give the permission to the admin and client directory,

sudo chown -R www-data:www-data /var/www/quiz/admin
sudo chown -R www-data:www-data /var/www/quiz/client
sudo chmod -R 755 /var/www/quiz/admin
sudo chmod -R 755 /var/www/quiz/client

Now upload the files to the directory,

1. Extract the quizix package that you download from CodeCanyon.
2. On that folder, you'll get another file called core.zip.
3. Now extract the core.zip file to the core folder.
4. now you'll get two zip files called admin.zip and standalone-client.zip on core folder.

Now upload this files to the server,

At first, upload the admin.zip file to the /var/www/quiz/admin directory,

scp -r core/admin.zip  root@server:/var/www/quiz/admin

Now upload the standalone-client.zip file to the /var/www/quiz/client directory,

scp -r core/standalone-client.zip  root@server:/var/www/quiz/client

Now, you'll get two folders called admin and client on /var/www/quiz/

Now, extract the admin.zip file,

cd /var/www/quiz/admin
unzip admin.zip -d /var/www/quiz/admin
rm -rf admin.zip

Give permission to the admin folder,

sudo chown -R www-data:www-data /var/www/quiz/admin/bootstrap/cache
sudo chown -R www-data:www-data /var/www/quiz/admin/storage

Now, extract the standalone-client.zip file,

cd /var/www/quiz/client
unzip standalone-client.zip -d /var/www/quiz/client
rm -rf standalone-client.zip

Step 10: Get your Domain Name

So, we have two different project files for admin and client. Now we need to get the domain name for both of them.

One for admin panel and another one for client panel.

We recommend to use domain like this,

1. app.example.com for admin which is a subdomain of app.example.com
2. example.com for client

So, The first admin domain is a subdomain of the second client domain. You can use any domain you want. You can also use subdomain for the admin panel.

Step 10: Setting Up Server & Project

In this section, we'll set up our server and also will set up Reverse Proxy to host all of our sites from the same server.

At first, we'll disable the default configuration of Nginx,

sudo rm /etc/nginx/sites-enabled/default

Now, we'll create a new client configuration file,

sudo touch /etc/nginx/sites-available/quizix-client.conf
sudo nano /etc/nginx/sites-available/quizix-client.conf

Add this Nginx config file to that edited file,

server {
    listen 80;
    server_name YOUR_DOMAIN.com www.YOUR_DOMAIN.com;

    root /var/www/quiz/client;

    location /_next/static/ {
        alias /var/www/quiz/client/.next/static/;
        add_header Cache-Control "public, max-age=31536000, immutable";
    }

    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

Make sure you change app.YOUR_DOMAIN.com to your specific domain name You can change client path, if you want to change the the domain path for the quizix application Save and close the file by typing CTRL and X, then Y and ENTER when you are finished.

Then enable the config

sudo ln -s /etc/nginx/sites-available/quizix-client.conf /etc/nginx/sites-enabled/quizix-client.conf

Now, we'll create a new admin configuration file,

sudo touch /etc/nginx/sites-available/quizix-admin.conf
sudo nano /etc/nginx/sites-available/quizix-admin.conf

Add this Nginx config file to that edited file,

server {
    listen 80;
    server_name app.YOUR_ADMIN_DOMAIN.com www.YOUR_ADMIN_DOMAIN.com;

    root /var/www/quiz/admin/public;
    index index.php index.html;
    charset utf-8;

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location ~ \.php$ {
        include fastcgi_params;
        fastcgi_pass unix:/run/php/php8.3-fpm.sock;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        fastcgi_param DOCUMENT_ROOT $realpath_root;
    }

    error_page 404 /index.php;

    location ~ /\.(?!well-known).* {
        deny all;
    }
}

Make sure you change YOUR_ADMIN_DOMAIN.com to your specific domain name You can change admin path, if you want to change the the domain path for the quizix application Save and close the file by typing CTRL and X, then Y and ENTER when you are finished.

Then enable the config

sudo ln -s /etc/nginx/sites-available/quizix-admin.conf /etc/nginx/sites-enabled/quizix-admin.conf

Step 11: Secure Server

sudo apt install certbot python3-certbot-nginx -y
sudo certbot --nginx -d YOUR_DOMAIN.com -d www.YOUR_DOMAIN.com
sudo certbot --nginx -d YOUR_ADMIN_DOMAIN.com -d www.YOUR_ADMIN_DOMAIN.com

Step 12: Restart Nginx

Make sure you didn’t introduce any syntax errors by typing:

sudo nginx -t

Now, restart the Nginx service and PHP-FPM service,

sudo systemctl restart php8.3-fpm
sudo systemctl restart nginx

sudo ufw status
sudo ufw allow 'Nginx Full'
sudo ufw delete allow 'Nginx HTTP'
sudo ufw status

Step 12: Graphical User Interface (GUI) Installation

1. Now access you domain name on your browser, then you can see the graphical user interface for the installation.

2. Agree with the terms and conditions and click "I Agree, Next Step" button.

3. Now you can see the server requirements. If all the requirements are met then click "Next Step" button.

4. Now check all the required folder permissions is met then click "Next Step" button.

5. You see the configuration page and fill the required information.

   • Application URL: http://yourdomain.com
   • Application Name: Quizix

   Database Information

   • Database Name: Ex: quizix_db
   • Database Username: ex: quizix_user
   • Database Password: ex: quizix
   • Database Host: localhost

   Admin Information

   • Admin First Name: ex: admin
   • Admin Last Name: ex: admin
   • Admin Email: ex: admin@gmail.com
   • Admin Password: ex: 12345678

6. Now hit "Install" button.

7. Now you will see the installation is completed. You can now access your Quizix on your domain name.

Step 13: Queue and Cron Job setup to this vps

To run the cron job, you need to add a cron job with the following command:

Step 1: install supervisor

sudo apt update
sudo apt install supervisor

Step 2: now create supervisor config file

sudo nano /etc/supervisor/conf.d/quizix-worker.conf

Step 3: Add the following content to the file

[program:quizix-worker]
process_name=%(program_name)s_%(process_num)02d
command=/usr/bin/php /var/www/quiz/admin/artisan queue:work --sleep=3 --tries=3 --timeout=60
autostart=true
autorestart=true
user=your_linux_user
numprocs=1
redirect_stderr=true
stdout_logfile=/home/your_linux_user/your_project_path/storage/logs/quizix-worker.log

Note: Replace your_linux_user with your Linux user, and your_project_path with the path to your project on your VPS.

Step 4: restart supervisor

sudo supervisorctl reread
sudo supervisorctl update
sudo supervisorctl start quizix-worker:*

Check the status:

sudo supervisorctl status

Step 5: Run the cron job on vps

Enable the cron tab

crontab -e

select your favorite editor, then add the following line at the end of the file

Enter the following command to run the cron job on vps

* * * * * cd /var/www/quiz/admin && php artisan schedule:run >> /dev/null 2>&1

Note: Replace /var/www/quiz/admin with the path to your project on your VPS Admin Project.

Step 6: Add the cron job to the crontab

crontab -l

Step 14: Client Part Installation

Go to the client directory,

cd /var/www/quiz/client

Now run the following command, Install dependencies:

npm install --force

Edit the .env file and update the values in the .env file.

cp .example.env .env

Now run the following command

nano .env

Replace the values in the .env file.

NEXT_PUBLIC_API_BASE_URL=http://app.example.com
NEXT_PUBLIC_TOKEN_NAME=token
NEXT_PUBLIC_BASE_URL=http://example.com

Build the project:

npm run build

Install PM2 globally:

npm install -g pm2

Start the project with PM2:

pm2 start npm --name "quizix-client" -- run start
pm2 save

Note: It's important to run the project with PM2 to keep it running in the background.

Now you can access your Quizix on your domain name.

Conclusion

Congratulations! You have successfully installed our Quizix on your VPS. If you have any questions, please contact our support team.