How to host Whiteboard on AWS EC2 VM Instance - 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. This application allows users to create, edit, and share visual content, such as drawings, notes, and diagrams, in real time. Hosting Whiteboard on AWS EC2 provides a dependable and scalable solution. AWS EC2 provides a wide range of instance types and configurations to match various performances with flexible deployment options. ServerAvatar simplifies the process by providing a clear, step-by-step guide to setting up your Whiteboard application on AWS EC2 VPS.

Create an AWS EC2 Instance

Getting Started with AWS EC2:

In the dynamic landscape of cloud computing, Amazon EC2 (Elastic Compute Cloud) stands as a cornerstone service provided by Amazon Web Services (AWS), offering a flexible and scalable solution for hosting virtual servers in the cloud. Designed to cater to a diverse range of computing needs, EC2 allows businesses and developers to deploy virtual machines quickly and securely, enabling them to run various applications and manage workloads with ease.

From startups seeking cost-effective computing power to enterprises requiring robust, scalable infrastructure, EC2 provides a vast array of instance types optimized for different use cases. These instances offer customizable configurations, including computing power, memory, storage, and networking capabilities, empowering users to tailor their virtual environments precisely to their application requirements.

Whether it's launching a single instance for a small-scale project or orchestrating a complex network of instances across multiple regions, EC2 simplifies the process with its intuitive management console and comprehensive APIs. This versatility makes it a preferred choice for businesses looking to leverage the scalability and reliability of cloud computing without the overhead of managing physical hardware.

Using AWS EC2 instances offers a multitude of benefits that cater to diverse business needs and technical requirements. Here are some key advantages:

• Scalability: EC2 enables swift adjustments to your computing capacity according to demand, offering elasticity that efficiently manages fluctuating workloads for businesses, preventing resource over-provisioning.
• Cost-Effectiveness: With EC2, you pay only for the compute capacity you use. This pay-as-you-go pricing model eliminates the need for upfront investments in hardware and allows for cost optimization by scaling resources as needed.
• Flexibility: EC2 provides a diverse range of instance types tailored for various use cases, including compute-optimized, memory-optimized, storage-optimized, and GPU instances. This versatility allows you to select the ideal instance type that best suits your specific application needs.
• Security: AWS offers a secure environment for hosting EC2 instances, incorporating features such as security groups, network access control lists (ACLs), and Virtual Private Clouds (VPCs) to manage network access effectively. Integration with other AWS services, such as AWS Identity and Access Management (IAM), further enhances security by providing detailed access control capabilities.
• Ease of Use: EC2 instances can be easily launched, managed, and configured using the AWS Management Console, Command Line Interface (CLI), or SDKs/APIs. Automation tools like AWS CloudFormation and AWS Elastic Beanstalk further simplify deployment and management tasks.
• Reliability: AWS ensures a high level of reliability for EC2 instances with SLAs that guarantee a specific level of uptime. Additionally, EC2 instances can be configured to automatically recover from failures using features like Auto Scaling and Amazon Elastic Block Store (EBS) snapshots.

Let’s Get started with Creating a Virtual Machine on AWS EC2:

To create a server in Amazon. First log in to Amazon web service. Once you are there, Follow the steps given below.

Step 1: Search for the EC2 service in the AWS search bar

• The first step is to search for EC2 services, as Amazon provides multiple web services. Then click on the EC2 with virtual servers in the cloud option which is shown in the image below.

Step 2: Launching Instances from the EC2 Dashboard

• Now you are in the EC2 Dashboard, navigate to the running instances section. After that new tab for instances will be displayed there you have to click on the Launch Instances button as shown in the images below.

Step 3: Naming and Tagging Your EC2 Instance

• The next step is to name the instance of your choice and you can also add tags to your instance which can help organize, manage, and track resources.

Step 4: Select the OS for your Instance

• After following the steps, proceed to select the operating system for your instance. In this case, First, click on Ubuntu and then select the Amazon Machine Image of Ubuntu Server 22.04 LTS as an operating system. In addition to this, select the architecture to 64-bit(x64/86) as shown in the image below.

Step 5: Select the Instance type

• In this step, select the size of your VM instance. AWS EC2 provides lots of different options when it comes to plans and pricing. The selection of instances completely depends on the requirements. So, select the instance based on the complexity and traffic of your sites.

Step 6: Select SSH Key pair or create one

• Here you can select the Key pair name for SSH. If you don't have any key pair stored, you can also create a new key pair by clicking on the Create new key pair option as shown in the following image.

Step 7: Configuring Network Settings

• In this step, you have to configure the network by simply clicking on the Edit button as shown in the following image.

• Then you have to create a new security group by selecting the create security group radio button. You can enter the security group name of your choice and can also add a description for your security group for that you can refer to the image below.

Step 8: Add Inbound Security Group Rules

• The next step is to add inbound security group rules which are necessary to configure for connecting your instance to ServerAvatar. Click on the button shown in the image below to add security group rules.

• ServerAvatar requires 43210 port to be open. In total, You need to keep the following ports open on the instance.
  • 22 (SSH): To access your server via SSH
  • 80 (HTTP): To access your sites on HTTP
  • 443 (HTTPS): To access your sites on HTTPS
  • 43210 (ServerAvatar): To allow communication between ServerAvatar and your instance
• To understand and proceed further, please take the reference of the image depicted below.

Step 9: Configure the storage for your instance

• The final step is to configure the storage. You can select the size of the storage according to your needs. However, it is recommended to select at least 25GB disk volume, and in AWS EC2 there is also an option to select the root volume which you can choose as per your requirements. Now click on the Launch Instance button, as shown in the image below.

• Congratulations! You have successfully created your AWS EC2 Instance 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.