Real-time Spreadsheet Collaboration with Jspreadsheet and Nginx

The Jspreadsheet Server extension is a JavaScript plugin that facilitates real-time data sharing and persistence within Jspreadsheet. It operates through a WebSocket-based service that runs on your server, enabling collaborative and interactive spreadsheet operations while ensuring complete data control.

Requirements

• PM2
• Node.js
• Nginx

Tutorial

This tutorial explains how to install Jspreadsheet on your Linux server using Nginx.

Step 1: Clone the project

git clone https://github.com/jspreadsheet/server.git /var/lib/server

Step 2: Install dependencies

Navigate to the server directory and install the required Node.js packages:

cd /var/lib/server
npm install

Step 3: Start the application with PM2

pm2 start src/index.js

Step 4: Configure Nginx

Edit your domain's Nginx configuration file:
vi /etc/nginx/conf.d/yourdomain.com.conf

Add the following server block to the configuration file:\

server {
    listen 443;

    // ... other configuration ...

    location /server/ {
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Nginx-Proxy true;
        proxy_pass_request_headers on;
        proxy_pass http://server/;
        proxy_redirect off;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";

        if ($http_origin) {
            add_header 'Access-Control-Allow-Origin' '*';
        }
    }
}

upstream server {
    server 127.0.0.1:3000;
    keepalive 15;
}

Step 5: Restart Nginx

service nginx restart

Now, the server will respond on port 80 of your domain.

Client Setup

Here's how you can set up the client:

// Set the license for both the plugin and the spreadsheet
jspreadsheet.setLicense('your-license-here');

// Set the extensions
jspreadsheet.setExtensions({ client });

// Connect to the server
let remote = client.connect({
    url: 'https://yourdomain.com',
    path: 'server/',
    token: 'user-identifier-jwt'  // Token for user validation
});

// Create a new spreadsheet if it does not exist
remote.create('53aa4c90-791d-4a65-84a6-8ac25d6b1104', {
    tabs: true,
    toolbar: true,
    worksheets: [{
        minDimensions: [4, 4]
    }]
});

// Connect to a spreadsheet
jspreadsheet(document.getElementById('spreadsheet'), {
    guid: '53aa4c90-791d-4a65-84a6-8ac25d6b1104'
});

For more information about Jspreadsheet and Jspreadsheet Server, please visit:

• https://jspreadsheet.com
• https://jspreadsheet.com/products/server