How to host Whiteboard on Google Cloud VM Instance - ServerAvatar

Whiteboard is an open-source platform designed for collaborative and visual project management. With its tools and flexibility, Whiteboard supports creating 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, Google Cloud is preferred due to its scalable infrastructure and seamless deployment options. ServerAvatar makes the deployment of the Whiteboard application on the Google Cloud platform an easy step-by-step process.

Create a VM Instance in Google Cloud

Getting started with Google Cloud:

Google is one of the most famous and reliable cloud providers among all of its competitors in the market. Google Cloud Platform provides a robust and comprehensive set of cloud computing services, catering to diverse business needs from startups to large enterprises. With its focus on scalability, performance, security, and innovation, GCP enables organizations to build, deploy, and scale applications and services efficiently in the cloud. Whether it's computing, storage, data analytics, machine learning, or networking, GCP offers a powerful and flexible platform for modern cloud computing requirements.

Google Cloud Platform’s Compute Engine offers robust virtual machine capabilities designed to meet the needs of modern cloud computing environments. Whether you’re looking for flexibility, scalability, performance, or integration with other Google Cloud services, Compute Engine provides a comprehensive solution for running your applications and workloads in the cloud efficiently and securely. Here’s a detailed introduction to Google Cloud as a virtual machine provider:

• Compute Engine as a primary service: It allows you to quickly scale VMs up or down based on demand, allowing you to handle varying workloads effectively. Users have the flexibility to select VM instance types tailored to their needs for CPU, memory, and disk capacities. Google provides predefined machine types optimized for different tasks, or you can customize machine types to allocate resources according to specific requirements.
• Key Features and Capabilities: It provides preemptible VMs at a greatly reduced price, ideal for fault-tolerant and batch-processing tasks. VM instances can be migrated live between host systems without any downtime, ensuring exceptional availability and reliability. Users have the option to either create custom VM images or utilize Google's pre-built images for quick deployment of popular software configurations.
• Integration with Google Services: It offers Control access and permissions for VM instances by managing IAM roles and policies. Compute Engine seamlessly integrates with Google Cloud's VPC networking, enabling the creation of secure and isolated networks tailored for your VMs. It also supports VPNs, Cloud Interconnect, and Google Cloud Load Balancing to efficiently manage network traffic. Moreover, Google's Deployment Manager can be used to automate the creation and management of VMs and associated resources following Infrastructure-as-Code principles.
• Management and Monitoring: Administer VM instances using the Google Cloud Console, which offers a graphical interface for deploying, monitoring, and managing resources. Engage with Compute Engine programmatically through Google Cloud SDK tools and APIs, enabling automation and seamless integration with other systems.
• Security and Compliance: Compute Engine incorporates security features such as encryption of data at rest and in transit, secure boot, and IAM controls to safeguard VM instances and data. Google Cloud Platform adheres to various compliance standards (e.g., ISO, SOC, GDPR), providing assurances for regulatory requirements across different industries.

Let’s get started with creating a Virtual Machine on the Google Cloud Platform:

Step 1: Creating a VM in Google Cloud Platform

• Click on the below link and log in to your Google account.

  • https://console.cloud.google.com

• Here you can create a New project or you can select the project you want, and then click on Create a VM as shown in the image below.

Step 2: Creating a VM Instance

• For creating a VM instance click on the sidebar, select the Compute Engine, and then click on the VM instances and Create Instance, as depicted in the images below.

Step 3: Configuring a New VM Instance

• Click on New VM Instance, here you can give Name to your virtual machine. Additionally, you can select the Region and Zone of your choice. Moreover, you can select the machine according to your needs from the available types. Refer to the image below.

Step 4: Select the Machine type

• Now you have the option to select a Machine Type with predefined configurations of vCPUs and memory which is suitable for most workloads. In addition to this, you can also add Availability policies according to your needs. (Recommended Standard policy)

• Also, you can customize your machine that is suitable for your workload as shown in the image below.

Step 5: Select the Boot disk

• In this step, you have to select the Operating System for your instance. Click on the Change button to select the boot disk as shown in the image below.

• Generally, the Whiteboard application requires Ubuntu 18.04 LTS or a later version for compatibility and support. We recommend you to use Ubuntu 20.04 LTS x64 or Ubuntu 22.04 LTS x64. If you are using ServerAvatar to manage your instance, these operating systems are required.
• Moreover, you can select the disk type you want; however, we recommend you select a Balanced persistence disk with a minimum 25 GB disk size, then click on the Select button as depicted in the following image.

Step 6: Firewall rules

• The next step is to allow firewall rules that are available at the time of creating an instance in Google. Select the checkbox next to the HTTP and HTTPS to allow incoming traffic. Click on the Create button to create a VM instance in Google as shown in the image below.

Step 7: Creating New Firewall Rule

• Now, you have to go to the VPC network by clicking on the sidebar and then click on the Firewall section. After that click on Create Firewall Rule as shown in the images below.

• Here you have to enter the details such as the Name of the rule and its description. You can also turn on firewall logs. In addition to this leave the network and priority sections as default. The direction of traffic should be Ingress and Allow the action. In the Targets section, you have three options: All instances in the network, Specified target tags, and Specified service accounts, select from them according to your needs. Furthermore, set the Source filter to IPv4 ranges you can specify the ranges as per your requirement in the Source IPv4 ranges input field. To understand it better refer to the image below.

• Lastly, you need to specify the Protocols and ports. ServerAvatar requires 43210 port to be open and the protocol is TCP so add the port number in that field and click on Create as shown in the image below.

• Congratulations! You have successfully created your instance in Google Cloud 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.