How to host Whiteboard on Digitalocean Droplet - ServerAvatar

Whiteboard is an open-source platform designed for collaborative and visual project management. It allows teams to efficiently plan, track, and manage projects with features such as task organization, Visual Diagrams and Flowcharts, and Export options. With its tools and flexibility, Whiteboard supports the creation of projects without requiring deep technical expertise. For hosting Whiteboard, DigitalOcean is an ideal choice due to its scalable infrastructure and easy deployment options. ServerAvatar simplifies the deployment of your Whiteboard application on the DigitalOcean platform through a user-friendly, step-by-step method.

Create Server in Digitalocean

Digitalocean is one of the most popular cloud platforms right now. It offers on-demand cloud computing for various use cases as well as some managed solutions. We can deploy any PHP-based applications on Digitalocean Droplets. Droplets are the servers or cloud computing instances in Digitalocean. If you want to learn about droplet management in-depth in Digitalocean, We recommend you to read our Digitalocean guide.

To deploy any application on Digitalocean, We first need a Droplet. So, we will first create a droplet and perform the initial setup.

Step 1: Go to the Create Droplets page.

Log in to your Digitalocean account and click on the Create button given on the top-right corner of the page. From the drop-down menu, click on the Droplets option to see a droplet creation form.

Step 2: Choose Region

On the Droplet creation page, you will find several sections for selecting different options. We will proceed step by step.

The first thing you have to do is select the region for your droplet. Digitalocean provides a number of options when it comes to 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 low latency.

Step 3: Choose an Image or an OS

In this step, you have to select the operating system for your droplet. Generally, the Whiteboard application requires Ubuntu 18.04 LTS or a later version for compatibility and support.

However, We recommend you to use Ubuntu 20.04 LTS x64 or Ubuntu 22.04 LTS x64. These operating systems are a requirement if you are using ServerAvatar to manage your droplets.

Step 4: Choose the size of the Droplet

Here you have to choose the size of your Droplet. As we mentioned above, Digitalocean provides many different types of droplets. Select the one that fits best for your project.

If your site is brand new and does not have much traffic, start with a small plan. Once the project starts getting traction, you can upgrade the plan to handle more visitors on the site.

Step 5: Choose Authentication Method

Now you have to select the authentication method. There are two types of authentication methods. They are as follows:

1. Authentication via SSH Keys
2. Authentication via Password

Using SSH keys for authentication is the best option. If you are not familiar with SSH keys, you can choose the password method. Make sure to set a strong password for your root user, which is the most powerful user with all the privileges on Linux OS.

Step 6: Selecting Additional Options

There are three additional options you can choose from. They are optional but important in different use cases. The additional options are:

1. Monitoring: It is a free feature by Digitalocean. It allows you to see additional monitoring data for your server.
2. Backups: We recommend you to enable full server backups if you are going to deploy in a production environment. The cost of the backups depends on the size of the droplet.
3. Managed Database: You do not need a Managed database if you are using ServerAvatar to manage sites on a droplet. A managed database is a pre-configured MySQL Droplet.

Step 7: Finalise Details

In the last step of this process, We have to enter the name of the droplet, and the number of droplets you want to create, Define any tags, and select the project. Enter all the details and click on the Create Droplet button to create a droplet.

In a few minutes, You will have the Droplet up and running. Now, We have to perform the initial configuration on the Droplet 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.