How to host Whiteboard on Contabo VM Instance - ServerAvatar

Whiteboard is a NodeJS collaborative tool that is lightweight and highly customizable, allowing for easy adaptation to your needs. This application allows users to create, edit, and share visual content, such as drawings, notes, and diagrams, in real-time. Contabo 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 Contabo platform.

Create VM Instance in Contabo

What Is Contabo?

Contabo is a web hosting company that provides a variety of internet hosting services. Founded in Germany in 2003, Contabo offers services such as:

1. VPS Hosting: Virtual Private Servers with scalable resources for various needs, from small projects to larger applications.
2. Dedicated Servers: Physical servers dedicated to a single user, offering high performance and control.
3. Web Hosting: Shared hosting solutions for websites, which include storage, bandwidth, and various management tools.
4. Object Storage: Scalable storage solutions for managing large amounts of data.
5. Domain Registration: Services for registering and managing domain names.

Contabo is known for its competitive pricing, high-performance hardware, and customer service, making it a popular choice for both individual users and businesses looking for reliable hosting solutions.

To set up a server in Contabo, begin by logging into your Contabo account. Once logged in, proceed with the following steps.

Step 1: Create an account on Contabo

Login to your Contabo account, select "VPS" from the dropdown menu, and then click on "Cloud VPS".

Step 2: Select your Cloud VPS plan

Contabo offers a variety of Cloud VPS options. Here, you should select the plan that best meets your requirements.

The minimum requirements are 2GB or more of RAM for better performance and a minimum 10 GB of free disk space depending on the application size, its dependencies, and user data storage needs. You can select the plan of higher configuration as per your requirements and usage. With ServerAvatar, You can also host multiple applications on a single Linode VM Instance.

Step 3: Select Region

• First, you need to select the term length (in months) according to your requirements.
• Next, you will need to select the location for your VPS. Contabo offers multiple options for selecting the location.
• It's recommended to select the region closest to your audience. This ensures that your sites load faster for the majority of your audience due to reduced latency.

Step 4: Select your Storage Type

Contabo provides different types of storage space, including both complimentary and paid options. Here, you should select the storage type based on your specific requirements. As shown in the image below.

Step 5: Select an Image or an OS

In this step, you need to select the Operating System for your cloud VPS. We recommend using Ubuntu 20.04 LTS x64 or Ubuntu 22.04 LTS x64. Ubuntu is known for its ease of configuration and management. If you are using ServerAvatar to manage your cloud VPS, these operating systems are recommended.

Step 6: Setting a Password

Here, it's recommended to create a strong password for your root user, as it holds all privileges on the Linux OS.

Step 7: Select Object Storage

Now, you need to select object storage space for backing up your VPS. You will find several options ranging from 250 GB to 1 TB. If you do not require object storage you can select the None option from the dropdown.

Step 8: Select Network

• In the Network section, you will find three options, You should select these according to your specific requirements:
  • Private Network
  • Bandwidth
  • IPv4

Step 9: Selecting Additional Options

• Backup Space: This option allows you to add additional storage space dedicated specifically for backups of your VPS data.
• Server Management: Contabo offers server management services where they handle the day-to-day operations of your VPS.
• Monitoring: This option provides monitoring services for your VPS. It includes monitoring server uptime, resource usage (CPU, RAM, disk), and network connectivity.
• SSL: SSL (Secure Sockets Layer) certificates are crucial for securing communication between your website and its visitors.

After completing all the necessary steps, click on the "Next" button to proceed to the payment method where you can finalize your details.

Step 10: Finalize Details

In this step, you can review all your selections for your Cloud VPS, finalize your details, and proceed with the payment. In a few minutes, your Cloud VPS will be ready. Now, we need to perform the initial configuration to host PHP-based frameworks and software.

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.