How to host Whiteboard on UpCloud Cloud Server - ServerAvatar

Whiteboard is a NodeJS collaborative tool that is lightweight and highly customizable, allowing for easy adaptation to your needs. A whiteboard application is a digital tool that simulates the functionality of a physical whiteboard in a virtual environment. These applications allow users to create, edit, and share visual content, such as drawings, notes, and diagrams, in real time. UpCloud is a dependable hosting option for Whiteboard, providing scalable infrastructure and simple deployment solutions. ServerAvatar makes it easy and user-friendly to deploy the Whiteboard application on the UpCloud platform.

Create a Server in UpCloud

Getting Started with UpCloud:

UpCloud is a high-performance VPS (Virtual Private Server) hosting platform designed for developers, businesses, and IT professionals. Renowned for its speed and reliability, UpCloud features the unique MaxIOPS storage technology, delivering performance significantly faster than traditional SSDs. This makes it an excellent choice for applications with high I/O demands, such as databases and web hosting. With its user-friendly control panel, UpCloud simplifies server management, making it an attractive option for anyone needing superior VPS hosting solutions.

To deploy any application on UpCloud, we must first set up a server. Therefore, our initial step will be to deploy a server and complete its initial setup.

Step 1: Server Deployment

• Log in to your Upcloud account. If you don’t have an account, create an account on UpCloud.
• Then, Navigate to Server → Server List and click on the Deploy Server button, as shown in the image below.

Step 2: Select Location

• The first thing you have to do is select the location for your server. UpCloud provides different options for selecting the location.
• The general rule is to select the region that is closest to your audience. It means that for the majority of your audience, Your sites will load faster due to lower latency.

Step 3: Select the plan for your Server

• Here you have to select the plan of your Droplet. UpCloud offers a variety of plans. Select the one that best meets your requirements.
• If your site is new and has low traffic, begin with a smaller plan. As your project gains and attracts more visitors, you can upgrade to a plan to handle the increased traffic.

Step 4: Add New Storage Device

• In the Storage section, you can attach new storage devices as needed. Your initial storage is based on the selected server plan. You can attach up to 16 storage devices, each with a maximum size of 4 TB.
• To add more disks, click the "Add new device" button and adjust the storage size with the slider. You can modify the storage configuration later by adding, removing, or resizing disk devices.

Step 5: Automated Backups

• You can also enable Automated Backups by clicking the toggle button on the right side. You can choose from Day, Week, Month, or Year plans.
• After selecting the appropriate plan, you can set a backup schedule using the drop-down menu below.

Step 6: Choose an Operating System

• In this step, you need to select your server operating system. Generally, the Whiteboard application requires Ubuntu 18.04 LTS or a later version for compatibility and support.
• We recommend selecting Ubuntu 20.04 LTS x64 or Ubuntu 22.04 LTS x64. These operating systems are required if you are using ServerAvatar to manage your servers.

Step 7: Select Network Configuration

• In this step, by default network configurations are set that include IPv4 and IPv6 addresses, and a private Utility Network connection is set. You can customize these settings and attach your private network by clicking on the “Attach Private Network” option.

Step 8: Additional Options

• In this step, you can enable or disable IPv6 support and metadata service. Also, you can set the desired TimeZone and select between network and display adapters.
• If it suits you, we suggest keeping these options at their default settings.

Step 9: Select Login Method

• Now you have to select the Login method. There are two types of login methods. They are:
  1. Authentication via SSH Keys
  2. Authentication via One-Time Password
• If you are using SSH keys for authentication, It is the best option. You can also click on the “Add New” button to import your keys.
• If you do not know what is SSH key, You can go with the One-Time password method. You have to set a new password after the first time you log into this server.
• Make sure to set a strong password for your root user, which is the most powerful user with all the privileges on Linux OS. You can select the convenient way to have the password.

Step 10: Enter Initialization Script

• The Initialization scripts are user-defined automation scripts supported by all Linux public templates. When you select one of your stored scripts, it will appear in the edit field.
• You can make changes to the scripts or write a new one. The server will execute the script during the first bootup.

Step 11: Finalise Details

• In the last step of this process, We have to enter the Host Name, Server Name, and number of servers you want to deploy. Click on the Deploy button to create a server.

• In a few minutes, You will have the Server up and running.
• Now, We have to perform the initial step to allow the Serveravatar port from the firewall configuration.
• To allow the Serveravatar port from firewall configuration, Click on the Server → Server List Option and then click on the icon next to your server as shown in the below image.

• Now, navigate to the Firewall Section and Click on “Add Rule”.

• Create a rule to allow ServerAvatar Communication Port - 43210 as shown in the below image. Click on the Ok to add the firewall rule.

• Now, click on the “Save Changes” button to save the changes to Firewall Rules as shown in the below image.

Initial Server Configuration

The Initial server configuration includes the installation and configuration of various packages required to host your website. Usually, You have to write commands and modify configuration files. Luckily, With ServerAvatar, Your full server configuration and optimization can be automated.

Here are the three ways to automatically configure your server with ServerAvatar.

wget https://srvr.so/install
chmod +x install
./install

Install and Setup Whiteboard on Cloud using ServerAvatar

Getting Started With Whiteboard:

Whiteboard is a NodeJS collaborative tool that is lightweight and highly customizable, allowing for easy adaptation to your needs. A whiteboard is a versatile tool used in various settings for brainstorming, planning, teaching, and visual communication. Traditionally, it consists of a smooth, white surface where markers can be used to draw diagrams, write notes, and illustrate ideas. In recent years, digital whiteboards have become increasingly popular, offering similar functionality in a digital format.

Features:

• Shows remote user cursors while drawing
• Undo / Redo function for each user
• Drag+Drop / Copy+Paste Images or PDFs from PC and Browsers
• Resize, Move, Rotate & Draw Images to Canvas or Background
• Write text and sticky notes
• Save Whiteboard to Image and JSON
• Draw angle lines by pressing "Shift" while drawing (with line tool)
• Draw a square by pressing "Shift" while drawing (with the rectangle tool)
• Indicator that shows the smallest screen participating
• Keybindings for ALL the functions
• REST API
• Working on PC, Tablet & Mobile

Install and Setup the Whiteboard application on the Cloud using ServerAvatar:

Step 1: Create a Custom Application

• Access the Applications tab from the server panel to create a new custom application for Whiteboard. Now, create an application, click the Applications tab, then click the Create button on the server panel.

• To create an application and proceed with the installation and deployment of the Whiteboard, you need to fill in the prerequisite of the Whiteboard.
• Enter an application name of your choice. After that input the domain name where you'd like to direct your URL. You can choose between a test domain or a primary domain. If you decide on the test domain, you can use Serveravatar’s test domain. This flexibility ensures you can make the perfect selection for your project.

• Now, you can clone Whiteboard through the available repository in GitHub:
  • Select a method: Git
  • Select a Service Provider: GitHub
  • Select a Repository Type: Public
  • Clone HTTPS URL: https://github.com/cracker0dks/whiteboard.git
  • Branch: master

• Let's take the next step in creating your application. Now, you need to set up deployment scripts. These manually entered commands will run automatically after cloning the repository.
• Installing does not require running any manual scripts or commands in the deployment process. Therefore, you can simply leave this part blank.
  • Deployment Scripts: (Leave it blank)
• To proceed further, click on the Show Advanced Options You'll find this right below the deployment scripts section.
• The next step is to create a system user for your application. You have the option to either select an existing user or create a new one dedicated to this application.
• Now, let's select the PHP version. Choose a PHP version 8.1 or a newer version if available.

Step 2: Configure the Application

• To establish a connection, access the SSH credentials from the application panel dashboard. Ensure that the SFTP/SSH Credentials option is enabled, as illustrated in the provided snapshot.

• Execute the below command to log in to the root user on your application in your terminal.

  • SSH Username@Host

• Replace the Username and Host with your value. Enter the SSH Password to log in.

• Navigate to the Public_html directory (by using commands ls and cd) and run the below commands to install frontend packages and to build the assets (js, CSS).
• npm install

• npm run start:prod

• Note: You always need to run the npm run start:prod command in the Public_html directory for using the Whiteboard. Now you can run Whiteboard by surfing http://YOURIP:8080.

• After that you have to create a new configuration file on your web server for setting proxy and to make a whiteboard application work on your domain. Follow the procedure as shown in the image below.

• Go to the Application dashboard.

• Then go to File Manager and open the conf folder.

• After that, open the apache directory.

• The next step is to create a configuration file in the Apache directory.

• Following that you can create a conf filename of your choice, but do not forget to add the .conf extension after the filename.

• Moreover, open your newly created configuration file and add the config shown in this image, and don’t forget to click on save changes.

• The last step is to again run the npm run start:prod command in the Public_html directory, as the whiteboard works on the socket server so it is mandatory to run this command every time you want to use your Whiteboard application.

• Congratulations! You have successfully installed and deployed Whiteboard through ServerAvatar.