## Introduction In today’s fast-paced digital world, a document on which multiple users can collaborate allows for improved efficiency and speed. A collaborative document ensures that all the parties involved in editing the document are kept in the loop. This tutorial article will guide users in creating a real-time collaboration document editing tool using Strapi, WebSockets, and Vue.js. ## Prerequisites To follow through with the article, you should have the following: * [Node.js](https://nodejs.org/en) and a package manager, yarn, or npm installed on your computer * Basic understanding of JavaScript and [Vue.js](https://vuejs.org/) * Knowledge of WebSockets * A code editor (Vscode, Sublime) ## What is Strapi Headless CMS? [Strapi](https://strapi.io/) is an open-source, highly customizable headless content management system (CMS). It allows developers to create, edit, and manage digital content via its APIs. Strapi provides a flexible platform that can deliver content to any front-end framework through its APIs. The benefits of using Strapi as a headless CMS in front-end development include its ease of use, robust customization, and scalability, among others. It also has strong community support and comprehensive documentation to guide new users. Do check out the [Strapi docs](https://docs.strapi.io/). In this article, we’ll leverage Strapi’s features and walk through a Strapi tutorial to build a collaborative document editing tool. We will use its headless CMS capabilities to deliver content to our front end, its customization options to define the fields and inputs we want in our project, and its API flexibility to fetch data using RESTful APIs. ## What is Vue.js? [Vue](https://vuejs.org/) is the progressive JavaScript framework for building interactive user interfaces and single-page applications. It is known for its simplicity, flexibility, and reactive data binding. These features make it the ideal choice for this tutorial as it allows for efficient and dynamic updates, which is essential for a real-time document editing tool. In this Vue.js tutorial, Vue.js will be used to implement the UI components to display document content and active users, providing seamless editing. ## What are WebSockets? WebSockets are a communication protocol that enhances bi-directional, real-time communication between a client and server. Unlike HTTP, which is unidirectional and request-server based, WebSockets allow for persistent communication. WebSockets are a more efficient alternative for real-time interactions than other communication protocols like HTTP. HTTP supports only client-initiated requests, and Server-Sent Events (SSE) manage updates from server to client. On the other hand, WebSockets support two-way simultaneous communication, which is ideal for applications requiring persistent communication. In this WebSockets and Vue.js tutorial, you will learn how to implement this communication protocol to achieve seamless real-time communication in a document editing tool. ## Setting Up the Backend with Strapi At the backend, Strapi will be used to manage the storage and retrieval of document data. We will create the document with Strapi and define the content type. To create a new Strapi project, have Node.js and your preferred package manager installed on your computer. Here, we will use [npm](https://www.npmjs.com/) to manage the packages and dependencies required for the project. ### Installing Strapi To start, create a folder named `document-editing-tool`. This folder will be the project folder. On your terminal, navigate to the directory you created. Next up, Paste the following command in your terminal: ```bash npx create-strapi-app@latest strapi ``` After running the command, you will be prompted to choose an installation type between Quickstart (recommended) and Custom (manual settings). The recommended option is to opt for the Quickstart installation. All necessary dependencies will be installed, and a new Strapi project will be created in a directory with what you named it. You are now ready to develop your application. > Note: If the Strapi project does not run after being bootstrapped. Do the following: ```bash= cd strapi npm run develop ``` ### Starting Strapi Your browser will direct you to a site where you must register your credentials. After signing up, you will be able to access the dashboard. ![starting strapi.jpeg](https://delicate-dawn-ac25646e6d.media.strapiapp.com/starting_strapi_d15d18f738.jpeg) ### Create the Document Content Type From the admin panel you’re on, we will create the **Document** content type, which allows multiple users to make edits. In the left panel, click on **Content-Types Builder**, then click the **create new collection type** button in the dropdown. ![create content type.jpeg](https://delicate-dawn-ac25646e6d.media.strapiapp.com/create_content_type_7e7f807206.jpeg) Give it a display name of "Document.” Next, we will define the fields for the document editing tool. Click the **Finish** button and then **Add new field**. ![give strapi collection type a name.jpeg](https://delicate-dawn-ac25646e6d.media.strapiapp.com/give_strapi_collection_type_a_name_18d30c2986.jpeg) ### Create Content Type Fields Select **Text** and input `Title` in the name attribute. Select **Short text** as the Type. ![create content type fields.jpeg](https://delicate-dawn-ac25646e6d.media.strapiapp.com/create_content_type_fields_47b57cd311.jpeg) We will add another field, so click on **Add another field** and select **Text**. In the name attribute, input `Content` and choose **Long text** as the type. ![create content type fields 1.jpeg](https://delicate-dawn-ac25646e6d.media.strapiapp.com/create_content_type_fields_1_1b01afb3ba.jpeg) Click on **Advanced settings** and mark the **Required field** checkbox. ![create content type fields 2.jpeg](https://delicate-dawn-ac25646e6d.media.strapiapp.com/create_content_type_fields_2_aeeb1499aa.jpeg) This will ensure that the content information is provided when updating the document. Now, click **Finish** to be done with the fields. Click **save** at the top right corner to create the new content type. ![content types and fields.jpeg](https://delicate-dawn-ac25646e6d.media.strapiapp.com/content_types_and_fields_7376a2e757.jpeg) ### Roles and API Permissions setup in Strapi CMS We want to disable Strapi's default Authentication and Authorization service for our application for the `Document` Content-Type we created previously. To do this, go to Settings in the left panel, under the Users and Permissions Plugin, and click on Roles. From the list of roles, we will focus on the Public role to allow any user to edit the document. Click P**ublic** and scroll down to the Permissions** section, then select our content type, which is Document**. ![Roles and API Permissions setup in Strapi CMS.jpeg](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Roles_and_API_Permissions_setup_in_Strapi_CMS_a65bbf0a21.jpeg) Click on the dropdown and check the **Select all** box to allow public users to create new documents, find individual documents, update documents, and delete documents. You can now save the changes at the top right. ![allow public access for Document collection.jpeg](https://delicate-dawn-ac25646e6d.media.strapiapp.com/allow_public_access_for_Document_collection_a5f855f4e9.jpeg) ## Implementing Real-Time Communication with WebSockets using Strapi WebSockets play a significant role in enabling real-time communication in web applications by facilitating two-way communication between a client and a server over a single TCP connection, allowing messages to be sent back and forth simultaneously. WebSockets will be used to implement real-time collaboration features in our document editing tool and to track changes made to the document. ### Setting up WebSockets Here, we will set up a WebSocket server using a Strapi plugin. The Strapi plugin [strapi-plugin-io](https://market.strapi.io/plugins/strapi-plugin-io) is a plugin for Strapi CMS that allows Socket IO integration. We will use this to implement WebSocket server functionality. Navigate to your Strapi directory in your terminal and input the following to install `strapi-plugin-io`. ```bash npm install strapi-plugin-io ``` ### Integrating `strapi-plugin-io` with Strapi We will now integrate the Strapi plugin `strapi-plugin-io` into our project. To integrate `strapi-plugin-io` with Strapi, input the following code in the `./config/plugins.js` file of the `strapi` directory, which is the backend of the editing tool. The relative path should be like this `strapi/config/plugins.js` ```javascript module.exports = () => ({ io: { enabled: true, config: { // This will listen for all supported events on the document content type contentTypes: ['api::document.document'], socket: { serverOptions: { cors: { origin: "*", methods: ["GET", "POST"], }, }, }, events: [ { name: 'connection', handler: ({ strapi }, socket) => { strapi.log.info(`[io] user with socket ${socket.id} connected.`); strapi.activeUsers = strapi.activeUsers || [] strapi.$io.raw({ event: 'active-users', data: strapi.activeUsers.map(s => s.name) }); } }, { name: 'user-joined', handler: ({ strapi }, socket, name) => { strapi.log.info(`[io] trigger update for socket ${socket.id}.`); socket.name = name; strapi.activeUsers.push({ id: socket.id, name }); strapi.$io.raw({ event: 'active-users', data: strapi.activeUsers.map(s => s.name) }); }, }, { name: "update-history", handler: ({ strapi }, socket, name) => { strapi.$io.raw({ event: 'document-history', data: `${name} just made a change` }); } }, { name: 'disconnect', handler: ({ strapi }, socket) => { strapi.log.info(`[io] user with socket ${socket.id} disconnected.`); strapi.activeUsers = strapi.activeUsers.filter(s => s.id !== socket.id); strapi.$io.raw({ event: 'active-users', data: strapi.activeUsers.map(s => s.name) }); } } ] }, }, }); ``` Here, we've enabled the Strapi plugin to set up events for various actions of the `document` content type. This allows us to easily manage events for `create`, `update`, and `delete` actions. We also configured the plugin's default behavior to set up extra events to manage the active users currently editing the document. ## Building the Frontend with Vue.js Vue.js is a performant JavaScript framework that allows us to create the interactive interface that contributors will use to edit the document. ### Setting up a New Vue.js Project and Integrating with the Strapi Backend Follow the following steps to set up Vue and integrate it with the Strapi backend. In a new project terminal, input the following to create a new directory. ```bash mkdir frontend ``` Navigate into the new frontend directory. ```bash cd frontend ``` Create a new Vue project in the frontend directory. ```bash npx @vue/cli create my-vue-app ``` You will be prompted with some options for setting up the project. Choose the default options. We have now completely set up the Vue project. In your `document-editing-tool` project directory, you will find the frontend directory and the `my-vue-app` folder within it. Navigate to the `frontend` project in your terminal and run the command below: ```bash cd my-vue-app ``` Next, install [Axio](https://www.npmjs.com/package/axios) to make HTTP requests to the Strapi backend. Go ahead with the following. Input the next command ```bash npm install axios ``` ### Create a Vue.js Service to Communicate with Strapi Create a folder named ' services ' in your Vue project (`my-vue-app` directory). Create a file within that folder and name it `strapi.js` So your file path should be like this `my-vue-app/src/services/strapi.js` Paste this code into the `strapi.js` file ```javascript import axios from "axios"; const api = axios.create({ baseURL: "http://localhost:1337/api", }); export default api; ``` Now that we’ve configured Axios to communicate with the Strapi backend, the next step is to set up the component responsible for displaying and editing the document. ### Create Vue.js Component for Editing the Document Create a new `component` in your `components` folder and call it `DocumentEditor.vue`. Input the following code. ```javascript ``` This snippet above is a Vue.js component that fetches data from the Strapi backend and creates a new one if it does not already exist. ### Integrate WebSocket in Vue.js Project Go along with the following prompt to integrate WebSocket functionality into the `DocumentEditor.vue` component. In your Vue project, go to your terminal and install `socket.io-client`. ```bash npm install socket.io-client ``` Update the `DocumentEditor.vue` component code with the one below. ```javascript ``` This snippet above will get the document from the Strapi backend and display it to enable real-time collaboration by broadcasting updates through socket.io. It also re-fetches the document for each update event to get recent updates. Replace the `App.vue` in the `src` folder with the following: ```javascript ``` ## Active users and Document History We implemented a simple application to edit a sample document and broadcast its changes to all connected users. But we can make it even better. We will improve the user interface, add features for viewing other users currently on the file, and add the document’s content history at the side of the page. Update the Vue.js component `DocumentEditor.vue` file to the following: ```javascript ``` The code has been updated to keep track of users editing the document. Users have to set their usernames and log in before accessing the document. The active users editing the document are now displayed along with the history of their changes. ### Running the application To run the application's frontend, navigate to your terminal's `my-vue-app` directory. Run the command below in the terminal to start the frontend of our application. The application will start on localhost: http://localhost:8080/. ```bash npm run serve ``` To ensure the backend service is also running, run the command below while in the `strapi` project folder. ```bash npm run develop ``` Here is what the fronntend looks like: ![first frontend collaborative editing tool.jpeg](https://delicate-dawn-ac25646e6d.media.strapiapp.com/first_frontend_collaborative_editing_tool_d7622549bd.jpeg) ## Demo Here, we can see that "Jane", a current user, has logged into the document and can tell from the document history that another active user, Joe, has just made changes. ![demo.gif](https://delicate-dawn-ac25646e6d.media.strapiapp.com/demo_1cfbc01590.gif) Similarly, from this demo, "Jane," who logged in as a current user, can also see that Joe is an active user and can tell from the document history that Joe has just made an edit. Overall, this entire code block handles the user logins, displays active users and document history, and syncs document updates in real-time using `strapi-plugin-io`. The editor only allows logged-in users to edit the document. These features enhance the collaborative editing experience supported by the Strapi backend. ## Conclusion In this article, we successfully built a collaborative document editing tool by integrating Strapi for backend management, Vue.js for the frontend interface, and WebSockets for real-time collaboration. We covered setting up the document content types and Strapi's easy configuration for plugins. We also demonstrated how to use WebSockets to manage document edits and track user presence, while the frontend in Vue.js provided a responsive editing experience. You are encouraged to continue exploring with [Strapi Docs](https://docs.strapi.io/) to gain further firsthand insight and enhance your projects. You can also join the [Discord](https://discord.com/invite/strapi) community to access shared resources and connect with other developers. ## Resources [Link to GitHub demo project](https://github.com/EstherChristopher/document-editing-tool)

{{ document.Title }}

Current User

Active Users

Document History