Recently, we published the Technology Preview of our Node.js and Angular packages and this article explains how to create an Angular application.

In this tutorial however, we show how to create a pure Node.js application that hosts the WebSocket Server and uses the Node.js component in the same project.

Technology Preview features are not completely supported, may not be complete, and are not suitable for deployment in production. However, we provide these features as a preview and the primary goal is to get your feedback on this implementation. We are publishing updates constantly and will inform you about changes of this implementation. A release candidate with a go-live license is planned in the next couple of weeks.

Creating Your First Node.js Application

This tutorial shows how to create your first Node.js application using the TX Text Control document editor.

Prerequisites

  1. Install Node.js® and npm, if not done before.

Creating the Node.js Project

  1. Open a Node.js command prompt, create an empty folder called "node-editor", navigate into and type in the following command to install the document editor:

    npm install @txtextcontrol/tx-document-editor
  2. Type in the following command to install Express, the minimalist web framework for node:

    npm install express
  3. Pug is a popular template engine that is installed using this command:

    npm install pug
  4. Additionally, we need to install the TX Text Control WebSocket Server package:

    npm install @txtextcontrol/tx-websocket-server
  5. Create a folder views by typing in this command>

    mkdir views
  6. Open the project root folder in Visual Studio Code by typing in the following command:

    code .
  7. In Visual Studio Code, create a new file named index.pug in the newly created views folder and paste the following code into the file:

    html
    head
    title= title
    body
    h3= heading
    p= text
    div(
    style='position: absolute; top: 100px; left: 80px; width: 80%; height: 700px'
    ) !{editor}
    view raw test.html hosted with ❤ by GitHub

    Creating the Node.js application

  8. Create a new file named main.js in the project's root folder, copy the following code into this JavaScript file and save it:

    const { WebSocketServer } = require('@txtextcontrol/tx-websocket-server');
    const { DocumentEditor } = require('@txtextcontrol/tx-document-editor');
    const express = require('express');
    const app = express();
    const server = app.listen(8080);
    app.set('view engine', 'pug');
    var wsServer = new WebSocketServer(server);
    var editor = new DocumentEditor({
    webSocketURL: 'wss://backend.textcontrol.com?access-token=yourtoken'
    });
    app.get('/', (req, res) => {
    res.render('index', {
    title: 'Text Control HTML5 Document Editor',
    heading: 'Text Control HTML5 Document Editor in Node.js',
    text: '(Using the template engine "Pug")',
    editor: editor.render()
    });
    });
    view raw test.js hosted with ❤ by GitHub
  9. Back in the command prompt, start the Node.js application by typing in the following command:

    node main.js
  10. Open a browser and navigate to http://localhost:8080 to see the application.

    Creating the Node.js application

This tutorial uses a demo server backend for the required synchronization service that synchronizes the document in order to provide the WYSIWYG rendering - a unique feature of TX Text Control to edit documents pixel-perfect across devices and browsers.

If you want to deploy your project, you will have to host your own synchronization service and change the serviceAddress in the project.

Let us know what you think about this technology preview and report issues you are having. We are more than happy to assist you.