{"id":3995,"date":"2024-08-21T14:18:27","date_gmt":"2024-08-21T21:18:27","guid":{"rendered":"https:\/\/www.couchbase.com\/blog\/svelte-and-couchbase\/"},"modified":"2024-08-21T14:18:27","modified_gmt":"2024-08-21T21:18:27","slug":"svelte-and-couchbase","status":"publish","type":"post","link":"https:\/\/www.couchbase.com\/blog\/es\/svelte-and-couchbase\/","title":{"rendered":"Quick and In Sync with Svelte and Couchbase"},"content":{"rendered":"\n<p><span>Are you ready to build a reactive real-time web application?\u00a0<\/span><\/p>\n\n\n\n<p><i><span>tl;dr Don\u2019t have time to read and work through this entire tutorial? You\u2019re in luck! You can find a fully working example on <\/span><\/i><a href=\"https:\/\/github.com\/hummusonrails\/real-time-chat-svelte-couchbase\"><i><span>GitHub<\/span><\/i><\/a><i><span>. Feel free to go there, clone the repository and start exploring.<\/span><\/i><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><span>In this tutorial, we&#8217;ll explore the combination of <\/span><a href=\"https:\/\/svelte.dev\/\"><span>Svelte<\/span><\/a><span> and <\/span><a href=\"https:\/\/cloud.couchbase.com\/\"><span>Couchbase Capella<\/span><\/a><span> to create a dynamic and interactive chat application. Svelte, with an impressive 72.8% admiration rate according to the <\/span><a href=\"https:\/\/survey.stackoverflow.co\/2024\/technology#admired-and-desired-webframe-desire-admire\"><span>2024 Stack Overflow Developer Survey<\/span><\/a><span>, is celebrated for several reasons. It efficiently takes much of the work out of the browser by compiling your components into highly efficient, imperative code that directly manipulates the DOM, eliminating the need for a virtual DOM and leading to faster updates and smaller bundle sizes.<\/span><\/p>\n\n\n\n<p><span>Svelte&#8217;s built-in reactivity automatically tracks state changes, ensuring fast and efficient updates without the need for complex state management libraries. This reactivity simplifies the development process and enhances performance. Additionally, Svelte&#8217;s component-based architecture makes it easier to build and maintain complex user interfaces, offering a more straightforward and enjoyable development experience. And, when your application needs responsive, adaptive data Couchbase Capella offers a straightforward solution to implement.<\/span><\/p>\n\n\n\n<p><span>Couchbase Capella is not just a NoSQL cloud database platform; it&#8217;s an all-in-one data platform offering full-text search, vector search, data caching, analytics, and more. This comprehensive functionality allows you to build robust applications with diverse data requirements. Together, Svelte and Couchbase Capella make possible real-time applications that are blazingly fast and performant.<\/span><\/p>\n\n\n\n<p><span>Okay, enough talk. Let\u2019s get started!<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span>Setting up the Dev Environment<\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span>Creating a New SvelteKit Project<\/span><\/h3>\n\n\n\n<p><span>Before diving into the setup, let&#8217;s clarify the difference between Svelte and SvelteKit. Svelte is a front-end framework that compiles your code into highly efficient, imperative code that directly manipulates the DOM. This results in faster updates and smaller bundle sizes. On the other hand, SvelteKit is a framework built on top of Svelte, designed for building full-stack web applications. SvelteKit provides additional features such as routing, server-side rendering, and static site generation, making it a powerful tool for developing modern web applications.<\/span><\/p>\n\n\n\n<p><span>In your project, SvelteKit will handle the application structure, routing, and server-side rendering, while Svelte will manage the efficient rendering of UI components.<\/span><\/p>\n\n\n\n<p><span>To start a new project you can initialize it on the command line:<\/span><\/p>\n\n\n<p>[crayon nums=&#8221;false&#8221; lang=&#8221;default&#8221; decode=&#8221;true&#8221;]npm create svelte@latest svelte-couchbase-real-time-chat<br \/>\ncd svelte-couchbase-real-time-chat<br \/>\n[\/crayon]<\/p>\n\n\n\n<p><span>You will be prompted with several choices by the CLI tool. Answer with the following responses:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Skeleton Project<\/b><span>: Select <\/span><strong>yes<\/strong><span> to start with a basic project structure.<\/span><\/li>\n\n\n<li><b>Typescript<\/b><span>: Select <\/span><strong>no<\/strong><span> for now to keep things simple.<\/span><\/li>\n\n\n<li><b>ESLint<\/b><span>: Select <\/span><strong>yes<\/strong><span> to include linting, which helps in maintaining code quality.<\/span><\/li>\n\n\n<li><b>Prettier<\/b><span>: Select <\/span><strong>yes<\/strong><span> for code formatting.<\/span><\/li>\n\n\n<li><b>Playwright<\/b><span>: Select <\/span><strong>no<\/strong><span> unless you plan to write end-to-end tests from the beginning.<\/span><\/li>\n\n<\/ul>\n\n\n\n<p><span>Then, install the dependencies by running <\/span><em><span>npm install<\/span><\/em><span> from the command line. After running these commands, you&#8217;ll have a new SvelteKit project set up and ready to go!<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span>Installing Dependencies<\/span><\/h3>\n\n\n\n<p><span>Next, we&#8217;ll install additional dependencies required for our project, including Tailwind CSS for styling, the Couchbase SDK for database interactions, and WebSocket support for real-time communication.<\/span><\/p>\n\n\n<p>[crayon nums=&#8221;false&#8221; lang=&#8221;default&#8221; decode=&#8221;true&#8221;]npm install -D tailwindcss postcss autoprefixer couchbase ws dotenv<br \/>\nnpx tailwindcss init -p[\/crayon]<\/p>\n\n\n\n<p><span>What are each of these dependencies doing in your application?<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/tailwindcss.com\/\"><span>TailwindCSS<\/span><\/a><span> is a utility-first CSS framework that makes it more straightforward to style your application with predefined classes.<\/span><\/li>\n\n\n<li><span>The <\/span><a href=\"https:\/\/docs.couchbase.com\/nodejs-sdk\/current\/hello-world\/start-using-sdk.html\"><span>Couchbase Node.js SDK<\/span><\/a><span> introduces functionality to interact with your data on Couchbase Capella using methods that abstract away a lot of the work.<\/span><\/li>\n\n\n<li><em><span>ws<\/span><\/em><span> is a small Websocket library for Node.js. You will be enabling the real-time chat functionality in the application with Websockets.<\/span><\/li>\n\n\n<li><span>Lastly, <\/span><em><span>dotenv<\/span><\/em><span> loads environment variables from a <\/span><i><span>.env<\/span><\/i><span> file into <\/span><em><span>process.env<\/span><\/em><span> making it easier to manage configuration.<\/span><\/li>\n\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span>Configuring TailwindCSS<\/span><\/h3>\n\n\n\n<p><span>As mentioned above, TailwindCSS introduces classes that you can use to define the styling for your application. This is helpful if you are not a frontend expert, or even if you are, if you wish to shortcut the process of building elegantly designed applications. To use TailwindCSS in your Svelte project, follow these steps:<\/span><\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span>Configure <\/span><em><span>tailwind.config.js<\/span><\/em><\/h4>\n\n\n\n<p><span>Update the <\/span><em><span>tailwind.config.cjs<\/span><\/em><span> file to specify the content sources. This ensures that Tailwind CSS can remove unused styles from your production build, making it more efficient.<\/span><\/p>\n\n\n<p>[crayon nums=&#8221;false&#8221; lang=&#8221;default&#8221; decode=&#8221;true&#8221;]\/** @type {import(&#8216;tailwindcss&#8217;).Config} *\/<br \/>\nmodule.exports = {<br \/>\n\u00a0\u00a0content: [&#8216;.\/src\/**\/*.{html,js,svelte,ts}&#8217;],<br \/>\n\u00a0\u00a0theme: {<br \/>\n\u00a0\u00a0\u00a0\u00a0extend: {},<br \/>\n\u00a0\u00a0},<br \/>\n\u00a0\u00a0plugins: [],<br \/>\n}<br \/>\n[\/crayon]<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span>Add Tailwind CSS directives<\/span><\/h4>\n\n\n\n<p><span>Create or update the <\/span><em><span>src\/app.css<\/span><\/em><span> file to include Tailwind CSS directives. These directives load Tailwind&#8217;s base, components, and utility styles.<\/span><\/p>\n\n\n<p>[crayon nums=&#8221;false&#8221; lang=&#8221;default&#8221; decode=&#8221;true&#8221;]@tailwind base;<br \/>\n@tailwind components;<br \/>\n@tailwind utilities;[\/crayon]<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span>Include the CSS in your Svelte project<\/span><\/h4>\n\n\n\n<p><span>Open or create the <\/span><em><span>src\/routes\/+layout.svelte<\/span><\/em><span> file and import the CSS file. This ensures that Tailwind&#8217;s styles are available throughout your application.<\/span><\/p>\n\n\n<p>[crayon nums=&#8221;false&#8221; lang=&#8221;default&#8221; decode=&#8221;true&#8221;]&lt;script&gt;<br \/>\n\u00a0\u00a0import &#8220;..\/app.css&#8221;;<br \/>\n&lt;\/script&gt;<\/p>\n<p>&lt;slot \/&gt;<br \/>\n[\/crayon]<\/p>\n\n\n\n<p><span>Now that you\u2019ve completed these steps, TailwindCSS has been successfully initialized in your application! You&#8217;re ready to move on to setting up Couchbase Capella and building the backend for your chat application.\u00a0<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span>Setting Up Couchbase Capella<\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span>Creating a Cluster<\/span><\/h3>\n\n\n\n<p><span>It is free to sign up and try Couchbase Capella, and if you have not done so yet, you can do so by navigating to <\/span><a href=\"https:\/\/cloud.couchbase.com\/\"><span>cloud.couchbase.com<\/span><\/a><span> and creating an account using your GitHub or Google credentials, or by making a new account with an email address and password combination.<\/span><\/p>\n\n\n\n<p><span>Once you have done so, from within your Capella dashboard, you will create your first cluster. For the purposes of this walkthrough, let\u2019s name it <\/span><i><span>SvelteChatApp<\/span><\/i><span>.<\/span><\/p>\n\n\n\n<p><span>The summary of your new cluster will be presented on the left-hand side of the dashboard. Capella is multi-cloud and can work with AWS, Google Cloud or Azure. For this example, you will deploy to AWS.<\/span><\/p>\n\n\n\n<p><span>After you have created your cluster, you need to create a <\/span><i><span>bucket<\/span><\/i><span>. A <\/span><i><span>bucket<\/span><\/i><span> in Couchbase is the container where the data is stored. Each item of data, known as a document, is kept in JSON making its syntax familiar to most developers. You can name your bucket whatever you want. However, for the purposes of this walkthrough, let\u2019s name this bucket <\/span><i><span>svelte_chat_app_messages<\/span><\/i><span>.<\/span><\/p>\n\n\n\n<p><span>Now that you have created both your database and your bucket, you are ready to create your database access credentials and to fetch your connection URL that you will be using in your Lambda function.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span>Obtaining Connection Details<\/span><\/h3>\n\n\n\n<p><span>The connection details are essential as you will be using them in your application to establish a connection to your Couchbase data and to interact with the data. Navigate to the <\/span><i><span>Connect<\/span><\/i><span> section in the Capella dashboard and take note of the <\/span><i><span>Connection String<\/span><\/i><span>.<\/span><\/p>\n\n\n\n<p><a href=\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2024\/08\/image2-2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-16201\" src=\"https:\/\/www.couchbase.com\/wp-content\/uploads\/sites\/5\/2026\/05\/image2-2-1024x583-2.png\" alt=\"Capella SDK connection details\" width=\"900\" height=\"512\"><\/a><\/p>\n\n\n\n<p><span>Then, click on the <\/span><i><span>Database Access<\/span><\/i><span> link under section two. In that section, you will create credentials \u2013 a username and password \u2013 that your application will use to authenticate with the database. You can scope the credentials to the specific bucket you created or give it permission for all buckets and databases in your account. You need to make sure it has both read and write access, regardless.<\/span><\/p>\n\n\n\n<p><span>Once you have finished, the last step in this part of the process is to add your new connection string and connection credentials to your application as environment variables.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span>Setting Up Environment Variables<\/span><\/h3>\n\n\n\n<p><span>In a production environment, you will store your credentials and other confidential information for your application in a secure format. Different cloud providers have different paths to store sensitive information, and you should follow the procedure defined by the cloud provider you are using, whether it is AWS, Google Cloud, Azure, Netlify, Vercel or any other. For our purposes, you are adding your credentials to a <\/span><i><span>.env<\/span><\/i><span> file in the root folder of your application. The <\/span><em><span>dotenv<\/span><\/em><span> package reads those credentials from there and loads them into your application.<\/span><\/p>\n\n\n<p>[crayon nums=&#8221;false&#8221; lang=&#8221;default&#8221; decode=&#8221;true&#8221;]# .env<br \/>\nCOUCHBASE_BUCKET=your_bucket_name<br \/>\nCOUCHBASE_CONNECTION_STRING=your_connection_string<br \/>\nCOUCHBASE_USER=your_username<br \/>\nCOUCHBASE_PASSWORD=your_password[\/crayon]<\/p>\n\n\n\n<p><span>That\u2019s it! Your Couchbase cluster is all set up and ready to be used. At this point, you are ready to build the application. Let\u2019s start with the backend server with Nodejs and then move on to the frontend with Svelte.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span>Building the Backend with Node.js<\/span><\/h2>\n\n\n\n<p><span>With our development environment set up, it&#8217;s time to build the backend for our real-time chat application. We&#8217;ll use Node.js to create the server, connect to Couchbase Capella for data storage, and set up a WebSocket server for real-time communication.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span>Creating <\/span><em><span>server.cjs<\/span><\/em><\/h3>\n\n\n\n<p><span>First, we&#8217;ll create a file named server.cjs which will serve as the entry point for our backend.<\/span><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><span>Create <\/span><em><span>server.cjs<\/span><\/em><span>:<br>\nIn the root directory of your project, create a new file named <i>server.cjs<\/i>.<br>\n<\/span><\/li>\n\n\n<li><span>Setup Express and Dependencies:<br>\nWe&#8217;ll use Express for our server framework, the Couchbase SDK for database operations, WebSocket for real-time communication, and <em>dotenv<\/em> for environment variables management. Add the following code to <i>server.cjs<\/i>:<br>\n<\/span><\/li>\n\n<\/ol>\n\n\n<p>[crayon nums=&#8221;false&#8221; lang=&#8221;default&#8221; decode=&#8221;true&#8221;]const express = require(&#8216;express&#8217;);<br \/>\nconst couchbase = require(&#8216;couchbase&#8217;);<br \/>\nconst { createServer } = require(&#8216;http&#8217;);<br \/>\nconst { WebSocketServer } = require(&#8216;ws&#8217;);<br \/>\nconst dotenv = require(&#8216;dotenv&#8217;);<\/p>\n<p>dotenv.config();<\/p>\n<p>const app = express();<br \/>\nconst server = createServer(app);<br \/>\nconst wss = new WebSocketServer({ server });[\/crayon]<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span>Connecting to Couchbase<\/span><\/h3>\n\n\n\n<p><span>Next, we&#8217;ll set up the connection to Couchbase Capella. Ensure your .env file contains the correct connection details. Add the following code to <\/span><i><span>server.cjs <\/span><\/i><span>\u00a0to connect to Couchbase:<\/span><\/p>\n\n\n<p>[crayon nums=&#8221;false&#8221; lang=&#8221;default&#8221; decode=&#8221;true&#8221;]let cluster, bucket, collection;<\/p>\n<p>async function connectToCouchbase() {<br \/>\n\u00a0\u00a0\u00a0\u00a0try {<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(&#8216;Connecting to Couchbase&#8230;&#8217;);<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const clusterConnStr = process.env.COUCHBASE_CONNECTION_STRING;<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const username = process.env.COUCHBASE_USER;<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const password = process.env.COUCHBASE_PASSWORD;<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const bucketName = process.env.COUCHBASE_BUCKET;<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0cluster = await couchbase.connect(clusterConnStr, {<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0username: username,<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0password: password,<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0configProfile: &#8216;wanDevelopment&#8217;,<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0bucket = cluster.bucket(bucketName);<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0collection = bucket.defaultCollection();<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(&#8216;Connected to Couchbase successfully.&#8217;);<br \/>\n\u00a0\u00a0\u00a0\u00a0} catch (error) {<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.error(&#8216;Error connecting to Couchbase:&#8217;, error);<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0process.exit(1);<br \/>\n\u00a0\u00a0\u00a0\u00a0}<br \/>\n}<\/p>\n<p>connectToCouchbase();[\/crayon]<\/p>\n\n\n\n<p><span>This function handles the connection to Couchbase, ensuring that all necessary parameters are properly configured. All that is left for our backend is to create the websocket server to handle the sending and receiving of new chat messages.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span>Setting up the Websocket Server<\/span><\/h3>\n\n\n\n<p><span>The Websocket server functionality is also added to the <\/span><i><span>server.cjs<\/span><\/i><span> file. The server will broadcast all new messages for the frontend of the application to receive, and send all newly created messages to Couchbase for saving in the bucket you created.<\/span><\/p>\n\n\n<p>[crayon nums=&#8221;false&#8221; lang=&#8221;default&#8221; decode=&#8221;true&#8221;]wss.on(&#8216;connection&#8217;, (ws) =&gt; {<br \/>\n\u00a0\u00a0\u00a0\u00a0console.log(&#8216;New WebSocket connection established.&#8217;);<br \/>\n\u00a0\u00a0\u00a0\u00a0ws.on(&#8216;message&#8217;, async (message) =&gt; {<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0try {<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const messageString = message.toString();<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(&#8216;Received message:&#8217;, messageString);<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Save message to Couchbase<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const id = `message::${Date.now()}`;<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0await collection.upsert(id, { text: messageString });<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(&#8216;Message saved to Couchbase:&#8217;, id);<\/p>\n<p>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Broadcast message<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0wss.clients.forEach((client) =&gt; {<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (client.readyState === WebSocket.OPEN) {<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0client.send(messageString);<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(&#8216;Broadcasted message to client:&#8217;, messageString);<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} catch (error) {<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.error(&#8216;Error handling message:&#8217;, error);<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<br \/>\n\u00a0\u00a0\u00a0\u00a0});<br \/>\n});<\/p>\n<p>server.listen(3000, () =&gt; {<br \/>\n\u00a0\u00a0\u00a0\u00a0console.log(&#8216;Server started on https:\/\/localhost:3000&#8217;);<br \/>\n});[\/crayon]<\/p>\n\n\n\n<p><span>Note that before sending the message to Couchbase, you first convert the message into a <\/span><em><span>String<\/span><\/em><span> as it is received as binary data buffers by default. The conversion to <\/span><em><span>String<\/span><\/em><span> format is achieved by calling the <\/span><em><span>toString()<\/span><\/em><span> function on the message. The newly defined <\/span><em><span>messageString<\/span><\/em><span> variable now contains the data in readable format for both sending to Couchbase and rendering in the application.<\/span><\/p>\n\n\n\n<p><span>That is the entire backend of your new real-time chat application. However, as good as any backend for a web application is, it needs a frontend to render it for the user. Svelte offers us the performance and reactivity to do so with speed and with an excellent developer experience.\u00a0<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span>Creating the Frontend with Svelte<\/span><\/h2>\n\n\n\n<p><span>With your backend set up, it&#8217;s time to build the frontend of our real-time chat application using Svelte. You\u2019ll leverage Svelte&#8217;s strengths to create a responsive and dynamic chat interface.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span>Building the Chat Interface<\/span><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><span><span>Create the Svelte Component<br>\nIn your SvelteKit project, create a new file named <i>+page.svelte<\/i> in the <i>src\/routes<\/i> directory. This file will serve as the main component for our chat interface.<br>\n<\/span><\/span>\n<p><p>[crayon nums=&#8221;false&#8221; lang=&#8221;default&#8221; decode=&#8221;true&#8221;]touch src\/routes\/+page.svelte[\/crayon]<\/p>\n<\/p>\n<\/li>\n\n\n<li><span>Set Up the Basic Structure<br>\n<\/span>Open <i>+page.svelte<\/i> and set up the basic HTML structure with TailwindCSS classes for styling:\n<p><p>[crayon nums=&#8221;false&#8221; lang=&#8221;default&#8221; decode=&#8221;true&#8221;]npm install -D tailwindcss postcss autoprefixer couchbase ws dotenv<br \/>\nnpx tailwindcss init -p[\/crayon]<\/p>\n0<\/p>\n<\/li>\n\n<\/ol>\n\n\n\n<p><span>The <\/span><em><span>&lt;script&gt;<\/span><\/em><span> section of the above code example initializes Websocket and handles the messages, both sending and receiving. The <\/span><em><span>onMount<\/span><\/em><span> function ensures that the Websocket connection is established when the component is initialized. Svelte&#8217;s reactivity automatically updates the DOM whenever the <\/span><em><span>messages<\/span><\/em><span> array changes, ensuring new messages are displayed in real-time. With that your frontend is now complete.<\/span><\/p>\n\n\n\n<p><span>You did it! You have built an entire chat application enabling real-time communication utilizing the performance, flexibility and adaptability of both Svelte and Couchbase to deliver an optimal experience for your users. Yes, this is a fairly simple implementation, however, it provides the skeleton for you to build even more expansive and complex real-time applications. The potential is only limited by your imagination.<\/span><\/p>\n\n\n\n<p><span>Want to give it a go? Let\u2019s start up your application and begin chatting.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span>Running the application<\/span><\/h2>\n\n\n\n<p><span>To run your application, you will initialize both the backend Node.js server and the SvelteKit frontend. First, let\u2019s start the backend from your terminal:<\/span><\/p>\n\n\n\n<p><p>[crayon nums=&#8221;false&#8221; lang=&#8221;default&#8221; decode=&#8221;true&#8221;]npm install -D tailwindcss postcss autoprefixer couchbase ws dotenv<br \/>\nnpx tailwindcss init -p[\/crayon]<\/p>\n1<\/p>\n\n\n\n<p><span>Then, start the frontend in a new terminal window:<\/span><\/p>\n\n\n\n<p><p>[crayon nums=&#8221;false&#8221; lang=&#8221;default&#8221; decode=&#8221;true&#8221;]npm install -D tailwindcss postcss autoprefixer couchbase ws dotenv<br \/>\nnpx tailwindcss init -p[\/crayon]<\/p>\n2<\/p>\n\n\n\n<p><span>Now, navigate in your browser to <\/span><a href=\"https:\/\/localhost:5173\/\"><i><span>https:\/\/localhost:5173<\/span><\/i><\/a><span> and start chatting!\u00a0<\/span><\/p>\n\n\n\n<p><a href=\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2024\/08\/image3-2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-16202\" src=\"https:\/\/www.couchbase.com\/wp-content\/uploads\/sites\/5\/2026\/05\/image3-2-1024x396-1.png\" alt=\"backend Node.js server and the SvelteKit frontend.\" width=\"900\" height=\"348\"><\/a><\/p>\n\n\n\n<p><span>You can open up multiple browser tabs to simulate multiple users or use a service like <\/span><a href=\"https:\/\/ngrok.com\/\"><span>ngrok<\/span><\/a><span> to share the application with your friends and chat in real time with them.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span>Wrapping Up<\/span><\/h2>\n\n\n\n<p><span>In this tutorial you have learned how quickly you can create a fully responsive application that functions with real time data. Svelte updates the DOM with ease, while Couchbase lets you start creating and storing messages in mere seconds.\u00a0<\/span><\/p>\n\n\n\n<p><span>There are so many reasons why Svelte is quickly growing in admiration and popularity in the highly competitive web framework space. Couchbase as the data backend paired with Svelte increases the potential for what you can build and achieve by so much more. No need to define complicated schema, no need to add more dependencies later on if you wish to implement data caching or search capabilities, it\u2019s all baked in with Couchbase and comes right out of the box.\u00a0<\/span><\/p>\n\n\n\n<p><span>The only remaining question is: What will you build next?<\/span><\/p>\n\n\n\n<p>Get started for free using <a href=\"https:\/\/cloud.couchbase.com\/\">Couchbase Capella<\/a>.<\/p>\n\n\n\n<p><br><br><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Are you ready to build a reactive real-time web application?\u00a0 tl;dr Don\u2019t have time to read and work through this entire tutorial? You\u2019re in luck! You can find a fully working example on GitHub. Feel free to go there, clone the repository and start exploring. In this tutorial, we&#8217;ll explore the combination of Svelte and [&hellip;]<\/p>\n","protected":false},"author":85356,"featured_media":3992,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[136,178,301,49],"tags":[876,877],"ppma_author":[852],"class_list":["post-3995","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-best-practices-and-tutorials","category-connectors","category-cloud","category-node-js","tag-svelte","tag-websocket"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.6 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Quick and In Sync with Svelte and Couchbase - The Couchbase Blog<\/title>\n<meta name=\"description\" content=\"Build a chat application enabling real-time communication with the performance, flexibility and adaptability of both Svelte and Couchbase\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.couchbase.com\/blog\/es\/svelte-and-couchbase\/\" \/>\n<meta property=\"og:locale\" content=\"es_MX\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Quick and In Sync with Svelte and Couchbase\" \/>\n<meta property=\"og:description\" content=\"Build a chat application enabling real-time communication with the performance, flexibility and adaptability of both Svelte and Couchbase\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.couchbase.com\/blog\/es\/svelte-and-couchbase\/\" \/>\n<meta property=\"og:site_name\" content=\"The Couchbase Blog\" \/>\n<meta property=\"article:published_time\" content=\"2024-08-21T21:18:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/5\/2026\/05\/blog-svelta.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2400\" \/>\n\t<meta property=\"og:image:height\" content=\"1256\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ben Greenberg, Senior Developer Evangelist\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ben Greenberg, Senior Developer Evangelist\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/svelte-and-couchbase\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/svelte-and-couchbase\\\/\"},\"author\":{\"name\":\"Ben Greenberg, Senior Developer Evangelist\",\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/#\\\/schema\\\/person\\\/48efa1524aec97312d92f65a270c255d\"},\"headline\":\"Quick and In Sync with Svelte and Couchbase\",\"datePublished\":\"2024-08-21T21:18:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/svelte-and-couchbase\\\/\"},\"wordCount\":2521,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/svelte-and-couchbase\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/5\\\/2026\\\/05\\\/blog-svelta.png\",\"keywords\":[\"svelte\",\"websocket\"],\"articleSection\":[\"Best Practices and Tutorials\",\"Connectors\",\"Couchbase Capella\",\"Node.js\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/svelte-and-couchbase\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/svelte-and-couchbase\\\/\",\"url\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/svelte-and-couchbase\\\/\",\"name\":\"Quick and In Sync with Svelte and Couchbase - The Couchbase Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/svelte-and-couchbase\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/svelte-and-couchbase\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/5\\\/2026\\\/05\\\/blog-svelta.png\",\"datePublished\":\"2024-08-21T21:18:27+00:00\",\"description\":\"Build a chat application enabling real-time communication with the performance, flexibility and adaptability of both Svelte and Couchbase\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/svelte-and-couchbase\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/svelte-and-couchbase\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/svelte-and-couchbase\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/5\\\/2026\\\/05\\\/blog-svelta.png\",\"contentUrl\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/5\\\/2026\\\/05\\\/blog-svelta.png\",\"width\":2400,\"height\":1256},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/svelte-and-couchbase\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Quick and In Sync with Svelte and Couchbase\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/\",\"name\":\"The Couchbase Blog\",\"description\":\"Couchbase, the NoSQL Database\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/#organization\",\"name\":\"The Couchbase Blog\",\"url\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/5\\\/2026\\\/06\\\/logo.svg\",\"contentUrl\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/5\\\/2026\\\/06\\\/logo.svg\",\"width\":\"1024\",\"height\":\"1024\",\"caption\":\"The Couchbase Blog\"},\"image\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/#\\\/schema\\\/person\\\/48efa1524aec97312d92f65a270c255d\",\"name\":\"Ben Greenberg, Senior Developer Evangelist\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/365b64ca9dda70fb57c32645f0ae9d61350022d36a9b7d264e2668ad1741e0d3?s=96&d=mm&r=g8058b8c8566f325c9af22e5182088ccb\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/365b64ca9dda70fb57c32645f0ae9d61350022d36a9b7d264e2668ad1741e0d3?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/365b64ca9dda70fb57c32645f0ae9d61350022d36a9b7d264e2668ad1741e0d3?s=96&d=mm&r=g\",\"caption\":\"Ben Greenberg, Senior Developer Evangelist\"},\"url\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/es\\\/author\\\/bengreenberg\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Quick and In Sync with Svelte and Couchbase - The Couchbase Blog","description":"Build a chat application enabling real-time communication with the performance, flexibility and adaptability of both Svelte and Couchbase","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.couchbase.com\/blog\/es\/svelte-and-couchbase\/","og_locale":"es_MX","og_type":"article","og_title":"Quick and In Sync with Svelte and Couchbase","og_description":"Build a chat application enabling real-time communication with the performance, flexibility and adaptability of both Svelte and Couchbase","og_url":"https:\/\/www.couchbase.com\/blog\/es\/svelte-and-couchbase\/","og_site_name":"The Couchbase Blog","article_published_time":"2024-08-21T21:18:27+00:00","og_image":[{"width":2400,"height":1256,"url":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/5\/2026\/05\/blog-svelta.png","type":"image\/png"}],"author":"Ben Greenberg, Senior Developer Evangelist","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Ben Greenberg, Senior Developer Evangelist","Est. reading time":"10 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.couchbase.com\/blog\/svelte-and-couchbase\/#article","isPartOf":{"@id":"https:\/\/www.couchbase.com\/blog\/svelte-and-couchbase\/"},"author":{"name":"Ben Greenberg, Senior Developer Evangelist","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/48efa1524aec97312d92f65a270c255d"},"headline":"Quick and In Sync with Svelte and Couchbase","datePublished":"2024-08-21T21:18:27+00:00","mainEntityOfPage":{"@id":"https:\/\/www.couchbase.com\/blog\/svelte-and-couchbase\/"},"wordCount":2521,"commentCount":0,"publisher":{"@id":"https:\/\/www.couchbase.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.couchbase.com\/blog\/svelte-and-couchbase\/#primaryimage"},"thumbnailUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/5\/2026\/05\/blog-svelta.png","keywords":["svelte","websocket"],"articleSection":["Best Practices and Tutorials","Connectors","Couchbase Capella","Node.js"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.couchbase.com\/blog\/svelte-and-couchbase\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.couchbase.com\/blog\/svelte-and-couchbase\/","url":"https:\/\/www.couchbase.com\/blog\/svelte-and-couchbase\/","name":"Quick and In Sync with Svelte and Couchbase - The Couchbase Blog","isPartOf":{"@id":"https:\/\/www.couchbase.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.couchbase.com\/blog\/svelte-and-couchbase\/#primaryimage"},"image":{"@id":"https:\/\/www.couchbase.com\/blog\/svelte-and-couchbase\/#primaryimage"},"thumbnailUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/5\/2026\/05\/blog-svelta.png","datePublished":"2024-08-21T21:18:27+00:00","description":"Build a chat application enabling real-time communication with the performance, flexibility and adaptability of both Svelte and Couchbase","breadcrumb":{"@id":"https:\/\/www.couchbase.com\/blog\/svelte-and-couchbase\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.couchbase.com\/blog\/svelte-and-couchbase\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.couchbase.com\/blog\/svelte-and-couchbase\/#primaryimage","url":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/5\/2026\/05\/blog-svelta.png","contentUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/5\/2026\/05\/blog-svelta.png","width":2400,"height":1256},{"@type":"BreadcrumbList","@id":"https:\/\/www.couchbase.com\/blog\/svelte-and-couchbase\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.couchbase.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Quick and In Sync with Svelte and Couchbase"}]},{"@type":"WebSite","@id":"https:\/\/www.couchbase.com\/blog\/#website","url":"https:\/\/www.couchbase.com\/blog\/","name":"The Couchbase Blog","description":"Couchbase, the NoSQL Database","publisher":{"@id":"https:\/\/www.couchbase.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.couchbase.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/www.couchbase.com\/blog\/#organization","name":"The Couchbase Blog","url":"https:\/\/www.couchbase.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/5\/2026\/06\/logo.svg","contentUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/5\/2026\/06\/logo.svg","width":"1024","height":"1024","caption":"The Couchbase Blog"},"image":{"@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/48efa1524aec97312d92f65a270c255d","name":"Ben Greenberg, Senior Developer Evangelist","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/365b64ca9dda70fb57c32645f0ae9d61350022d36a9b7d264e2668ad1741e0d3?s=96&d=mm&r=g8058b8c8566f325c9af22e5182088ccb","url":"https:\/\/secure.gravatar.com\/avatar\/365b64ca9dda70fb57c32645f0ae9d61350022d36a9b7d264e2668ad1741e0d3?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/365b64ca9dda70fb57c32645f0ae9d61350022d36a9b7d264e2668ad1741e0d3?s=96&d=mm&r=g","caption":"Ben Greenberg, Senior Developer Evangelist"},"url":"https:\/\/www.couchbase.com\/blog\/es\/author\/bengreenberg\/"}]}},"acf":[],"authors":[{"term_id":852,"user_id":85356,"is_guest":0,"slug":"bengreenberg","display_name":"Ben Greenberg, Senior Developer Evangelist","avatar_url":{"url":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/5\/2026\/05\/T024FJS4M-U075H3NTJUR-b4c321d902e2-512-23.jpeg","url2x":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/5\/2026\/05\/T024FJS4M-U075H3NTJUR-b4c321d902e2-512-23.jpeg"},"0":null,"1":"","2":"","3":"","4":"","5":"","6":"","7":"","8":""}],"_links":{"self":[{"href":"https:\/\/www.couchbase.com\/blog\/es\/wp-json\/wp\/v2\/posts\/3995","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.couchbase.com\/blog\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.couchbase.com\/blog\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/es\/wp-json\/wp\/v2\/users\/85356"}],"replies":[{"embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/es\/wp-json\/wp\/v2\/comments?post=3995"}],"version-history":[{"count":0,"href":"https:\/\/www.couchbase.com\/blog\/es\/wp-json\/wp\/v2\/posts\/3995\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/es\/wp-json\/wp\/v2\/media\/3992"}],"wp:attachment":[{"href":"https:\/\/www.couchbase.com\/blog\/es\/wp-json\/wp\/v2\/media?parent=3995"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/es\/wp-json\/wp\/v2\/categories?post=3995"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/es\/wp-json\/wp\/v2\/tags?post=3995"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/es\/wp-json\/wp\/v2\/ppma_author?post=3995"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}