How to host Whiteboard on Azure VM Instance - ServerAvatar

Whiteboard is an open-source platform designed for collaborative and visual project management. With its tools and flexibility, Whiteboard supports the creation of projects without requiring deep technical expertise. It allows teams to efficiently plan, track, and manage projects with features such as task organization, Visual Diagrams and Flowcharts, and Export options. When it comes to hosting Whiteboard, Azure is preferred due to its scalable infrastructure and seamless deployment options. ServerAvatar makes the deployment of the Whiteboard application on the Azure platform an easy step-by-step process.

Create VM Instance in Azure

Getting Started with Azure:

Azure virtual machines are one of several types of on-demand, scalable computing resources that Azure offers. Typically, you choose a virtual machine when you need more control over the computing environment than the other choices offer. An Azure virtual machine offers the benefits of virtualization without the need to purchase or manage the underlying physical hardware. However, you are responsible for tasks such as configuring, patching, and installing software on the virtual machine to ensure its proper functioning.

Azure virtual machines can serve a variety of purposes. Here are a few examples:

1. Development and testing: Azure virtual machines provide a fast and straightforward method to deploy a computer environment tailored for coding and testing applications with specific configurations.
2. Cloud-based applications: Given the variable demand for your application, it can be cost-effective to host it on an Azure virtual machine. You scale up by deploying additional virtual machines as needed and scale down by shutting them down during periods of lower demand.
3. Extended data center: Virtual machines within an Azure virtual network can seamlessly integrate with your organization's network infrastructure.

Create a VM Instance in Azure:

To create a server in Microsoft Azure, First log in to Microsoft Azure. Once you are there, Follow the steps given below.

Step 1: Create a resource

• To access the resource creation form, Go to the Microsoft Azure Home and click on the addition icon button to create a resource. See the following image for reference.

• Then, click on the Create Virtual Machine as derived in the following image:

• By default, you are in the basic section, you have to fill out the details of your project. Select your Subscription plan and create a Resource group accordingly.

• After that, you have to enter the following details of your instance which includes:
  1. Virtual machine name: Enter your virtual machine name.
  2. Region: Select the Location of your Instance.
  3. Availability options: There are four options available:
     • No infrastructure redundancy is required. (Recommended)
     • Availability Zone: If you select this option then you will have to choose the Zones available for your instance.
     • Virtual machine scale set: If you select this option then you have to create your own Virtual machine scale set in your current resource and region.
     • Availability Set: If you select this option then you can choose Aligned availability sets or Classic availability sets.
  4. Security type: Azure offers three types of security:
     • Standard: Selecting this type will provide a basic level of security.
     • Trusted launch virtual machines: Selecting this will ensure a secure boot process by leveraging hardware-backed security features to protect against firmware-level attacks and other vulnerabilities. (Recommended)
     • Confidential virtual machines: Selecting this will provide a secure environment where data can be processed in encrypted memory, safeguarding it from unauthorized access even from the cloud provider.
  5. Image: The Whiteboard application generally requires Ubuntu 18.04 LTS or a later version for compatibility and support. We recommend using Ubuntu 20.04 LTS x64 or Ubuntu 22.04 LTS x64 as an operating system.
  6. VM architecture: Select the radio button that shows x64 bit.
  7. Size: Select the VM component size as per your requirements.
  8. Enable Hibernation: Ignore this checkbox.

• Following the steps you have to enter the Administrator account details:

1. Authentication type: You can either use the SSH public key or password for authentication, we recommend to use SSH public key.
2. Username: Enter username of your choice.
3. SSH public key source: There are three sources available in Azure for SSH public key:
   • Generate new key pair: If you want to generate a new SSH public key then you can choose this option and also you can select encryption format that is RSA SSH format or Ed25519 SSH Format. (Ed25519 provides enhanced performance and security using a smaller key size, whereas RSA remains prevalent, especially in legacy systems and applications).
   • Use existing key stored in Azure: Select this if you have stored any SSH public key in Azure.
   • Use existing public key: Select this if you already have a public key of your own.

• Now you have to set up Inbound port rules. Inbound port rules define how incoming network traffic is handled by a device or network service. These rules specify which ports on the device or service are open and accessible from external sources, such as the Internet or other networks. In this section, you have to select the ‘Allow Selected Port’ radio button as public inbound rules and select the inbound port as shown in the picture below.

Step 2: Select the Disk for the Virtual Machine

• You can select the disk according to your requirements and needs. You can refer to the image to see the options available in Azure for configuring the disk.

Step 3: Configuring Network Interface Settings

• Here you have to configure your virtual machine network interface, for that, you have to fill out the details as follows:
  1. Virtual network: Select the network or you can create one.
  2. Subnets: Select by default subnets or if you have knowledge you can manage and configure them on your own.
  3. Public IP: Select the newly created by default public IP or you can create one.
  4. NIC network security group: Leave it Basic as shown in the below image.
  5. Public inbound ports: Click on Allow selected ports.
  6. Select inbound ports: Select port HTTP(80), HTTPS(443) and SSH(22).
  7. Delete public IP and NIC when VM is deleted: Check this box as needed.
  8. Enable accelerated networking: Ignore this checkbox.

• Moreover, Microsoft Azure also provides load-balancing features. The purpose of this feature is to enhance resource utilization, increase throughput, reduce response times, and prevent any single resource from becoming overloaded.
• This practice is essential for maintaining high availability and reliability of applications and services by evenly distributing workloads. However, Microsoft Azure offers three options you can choose a radio button according to your needs, for that refer to the image depicted below:

Step 4: Configure management options for your Virtual machine

• In this step, you can set up management of your virtual machine and you can configure it according to your requirements and needs.

Step 5: Configure monitoring options for your Virtual machine

• The next step is to configure monitoring of virtual machines. With the help of this feature, you can monitor your virtual machine's Health by setting up Alerts and Diagnosing the issues related to your virtual machine. Please refer to the image mentioned below.

Step 6: Advanced option for your Virtual machine

• In this step, you can enhance configurations by adding additional agents, scripts, or applications through virtual machine extensions or cloud-init. Microsoft Azure makes various options available in this section to set up your virtual machine. You can select the feature you want to add to your virtual machine. Referring to the image below will give you a better understanding.
• Note: Feel free to skip this step, if you don't want to add additional features to your Virtual machine.

Step 7: Create tags for your Virtual machine

• Tags consist of name and value pairs that allow you to classify resources. They facilitate consolidated billing by applying the same tag to multiple resources and resource groups. You can create tags of your own choice and checkmark the resource as per your needs as depicted in the image below.

Step 8: Review And Create A Virtual Machine

• Lastly, you can check all the details you have entered for creating the Virtual machine in Microsoft Azure and after reviewing it, you can click on the Create button as shown in the image below.

Step 9: Allow ServerAvatar port from Microsoft Azure Cloud panel

• The final step is to allow a port so that you can connect your virtual machine server to ServerAvatar. Follow the steps shown in the image below.

1. Go to the Microsoft Azure Dashboard.
2. After that click on your newly created Virtual machine
3. Next, go to the Network settings and create new inbound port rules.
4. Finally, add the details mentioned in the image below.

Congratulations! You have successfully created your instance in Microsoft Azure which is now ready to connect with ServerAvatar.

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.