Example web app for CryptPad's OnlyOffice fork using Node.js. Also includes an implementation of the original OnlyOffice editor.
In order to run this app on your own machine, you will need some prerequisites: the web app, Node.js, ngrok (for exposing server to the internet) and the forked OnlyOffice client.
The difference between implementing CryptPad's version and the original is that this one doesn't require you to install and run an OnlyOffice server. This version connects to the CryptPad client, which does E2E encryption and sends everything to the CryptPad server.
In this section you will find a step-by-step guide to setting everything up. Make sure you follow instructions closely as all steps are required for the app to run correctly.
The web app is where the editor is embedded. (built using Node.js)
The code of this web app. You can download it yourself by your preffered method, or you can follow the instructions below:
-
Launch a terminal and navigate to a folder where you want to copy the sorce-code:
cd path/to/folder -
Copy the contents of the repo (the source-code) with the command:
git clone https://github.com/cryptpad/onlyoffice-editor-demo.git -
After the download is done, open the project's folder with the command:
cd onlyoffice-editor-demo
Now you have successfuly downloaded and opened the project. Since it was written using Node.js, we will need to install it in order to run the web app.
Node.js is a runtime environment that allows you to execute JavaScript code outside of a web browser. Basically, it allows you to write a server in javascript.
-
Install Node.js from the official website. You will find instructions specific to your OS on the website.
-
After installation, navigate to the project's folder and execute the following command to install Node.js dependencies:
npm install -
To start the web app, execute the file bin/run using node:
node bin/runBy default, the server uses port 5500, so to access the web app open a browser and go to the following address: localhost:5500.
The web app is almost set up. We need to install CryptPad's OnlyOffice client.
The OnlyOffice Client is a wrapper made by CryptPad that allows embedding an editor through an API, editor which instead of connecting to a OnlyOffice Docs server, connects to the CryptPad client, which does E2E encryption. Meaning, there is no longer the need for you to run your own OnlyOffice server and handle security, all of this is now done by CryptPad.
The client can be installed using the script install-oo-client.sh provided at the root of this web app's source code.
-
Launch a terminal and run the script using the following command:
sudo ./install-oo-client.shAfter the download is finished, you will find a folder www with multiple versions of the client. The one we will use is v7.
-
Copy the folder v7 and put it in the /public folder. This way, we make the API code reacheable for the client-side javascript, which calls the editor.
Now, in order for everything to work, the web app needs to be exposed to the internet. You can do it your own way, or you can follow the next instructions to learn how to do it with ngrok.
Ngrok is a tool that creates a secure tunnel to your local server, making it accessible on the internet. We use it to bridge the connection between our web app and the CryptPad client.
-
First, it is required you make a ngrok account. You can make one on the official website.
-
Download and install ngrok from the official website. You will find instructions specific to your OS on the website.
-
After logging in in the browser, you will be shown a command to add your authtoken, essentially connecting the ngrok app to your account.
-
To deploy the web app, execute the command:
ngrok http http://localhost:5500 -
Now that the app is deployed, copy the address it is forwarded to and put it in server.siteUrl in the config/default.json file.
If you want to configure the web app, you can find the settings in the config/default.json file.