Deploying a Vue.js and Node.js Todo App on Zoho Catalyst

In this tutorial, we’ll walk through the process of deploying a basic to-do application built with Vue.js and Node.js (Express) to Zoho Catalyst. Zoho Catalyst is a serverless platform that allows you to deploy and run serverless applications effortlessly.

Published on February 23, 2024

Share This Post
1aa5d799 da62 458d 93df 5ea2331314c3

In this tutorial, we’ll walk through the process of deploying a basic to-do application built with Vue.js and Node.js (Express) to Zoho Catalyst. Zoho Catalyst is a serverless platform that allows you to deploy and run serverless applications effortlessly. This blog will have two main parts, creating the application and deploying it.

Prerequisites

Before we begin, make sure you have the following:

1. Node.js and npm installed on your machine.

2. Zoho Catalyst account. You can sign up her](https://www.zoho.com/catalyst/)

Initializing Catalyst project

To get started, we have to install the cli for the zoho catalyst. It can be done by using the following npm command.

npm install -g zcatalyst-cli

After successful installation, we would be logging in to our zoho account from the cli which can be done with the following command.

catalyst login

Following the instructions on the browser for logging in and after success, you will be redirected back to the terminal.

Now, let us initialize a new catalyst project with the following command.

catalyst init

Since we are creating a vue app with serverless functions, select the following option in the terminal.

initialise project

 Please select the client and functions.

Your file directory will look as follows after completing all the steps.

Project structure.

Here, catalyst.json is the configuration file for our project. Other config files in client and functions folders are respective to the frontend and the server.

Since we will be using vue for our frontend, let us delete everything inside the client except the client-package.json

Set Up the Vue.js Todo App

Now, coming to the development, we will install vue cli globally with the following command.

npm install -g @vue/cli

Now let’s create a new project inside our catalyst project.

vue create vue-todo-app cd vue-todo-app

Now, our directory will look as follows.

project

After installing and setting up the project, replace the content of src/App.vue with the following code.

 
<template>
 <div id="app">
   <h1>Vue Todo App</h1>
   <button @click="fetchTasks">Fetch Tasks</button>
   <input v-model="task" @keyup.enter="addTask" placeholder="Add a new task" />
   <ul>
     <li v-for="(task, index) in tasks" :key="index">
       {{ task }}
     </li>
   </ul>
 </div>
</template>


<script>
export default {
 data() {
   return {
     task: "",
     tasks: [],
   };
 },
 methods: {
   async fetchTasks() {
     try {
       // Make a GET request to fetch tasks from the backend
       const response = await fetch("/server/my_vue_todo_function/");
       const tasks = await response.json();
       this.tasks = tasks;
     } catch (error) {
       console.error("Error fetching tasks:", error);
     }
   },
   async addTask() {
     if (this.task.trim() !== "") {
       try {
         // Make a POST request to add a new task to the backend
         const response = await fetch("/server/my_vue_todo_function/", {
           method: "POST",
           headers: {
             "Content-Type": "application/json",
           },
           body: JSON.stringify({ task: this.task.trim() }),
         });


         // If the task was added successfully, update the local tasks array
         if (response.ok) {
           this.tasks.push(this.task.trim());
           this.task = "";
         } else {
           console.error("Failed to add task");
         }
       } catch (error) {
         console.error("Error adding task:", error);
       }
     }
   },
 },
};
</script>


<style>
#app {
 text-align: center;
 margin-top: 60px;
}


ul {
 list-style-type: none;
 padding: 0;
}


li {
 margin: 5px 0;
}
</style> 

To serve the app, write the following command in the terminal.

npm run serve

If everything works fine, you will see the following output in the browser.

Writing nodejs serverless function

Now, it is time to set up a serverless function for our to-do application that can be accessed from our frontend.

Navigate to the index.js of the serverless function that we had created in project setup and enter the following code.



"use strict";


const tasks = [];


module.exports = async (req, res) => {
 const url = req.url;
 const method = req.method;


 switch (url) {
   case "/":
     if (method === "GET") {
       // Retrieve tasks
       res.writeHead(200, { "Content-Type": "application/json" });
       res.write(JSON.stringify(tasks));
     } else if (method === "POST") {
       // Add a new task
       try {
         const body = JSON.parse(await getRequestBody(req));
         const newTask = body.task;
         tasks.push(newTask);
         res.writeHead(201, { "Content-Type": "application/json" });
         res.write(JSON.stringify(newTask));
       } catch (error) {
         console.error("Error parsing request body:", error);
         res.writeHead(400, { "Content-Type": "application/json" });
         res.write(JSON.stringify({ error: "Invalid request body" }));
       }
     }
     break;


   default:
     res.writeHead(404);
     res.write('You might find the page you are looking for at "/tasks" path');
     break;
 }


 res.end();
};


async function getRequestBody(req) {
 return new Promise((resolve, reject) => {
   let body = "";


   req.on("data", (chunk) => {
     body += chunk.toString();
   });


   req.on("end", () => {
     resolve(body);
   });


   req.on("error", (error) => {
     reject(error);
   });
 });
}

Setting up deployment.

If you have followed the tutorial as it is with the right project structures, let’s continue with setting up the deployment setup for the project.

Open catalyst.json and configure it as follows.


{
 "functions": {
   "targets": ["my_vue_todo_function"],
   "ignore": [],
   "source": "functions"
 },
 "client": {
   "source": "client",
   "scripts": {
     "packageJson": "cp -r ../vue-todo-app/dist/ .",
     "build": "cd ../vue-todo-app && npm install && npm run build",
     "preserve": "catalyst run client:build && catalyst run client:packageJson",
     "predeploy": "catalyst run client:build && catalyst run client:packageJson"
   }
 }
}

Explanation: Catalyst offers lifecycle scripts that are useful in creating a deployment flow. Everything that is in the source directory is deployed to the cloud. In our scripts, before serving and before deploying, we build our vuejs project and copy everything in the dist directory that is created during the build process to the source directory.

After preserve or predeploy runs, our client directory looks something like below.

To locally test the application, write following command in terminal

catalyst serve

After successful serve, the terminal will show the following output.

Since, we want to deploy our project after testing locally, write

catalyst deploy

And voila! Your application is live on the zoho catalyst!

Navigate to the url and see the output in the browser window.

Conclusion

You have successfully deployed your vuejs application to catalyst with the serverless function. This is a very basic application and you can easily setup and deploy bigger applications in the same way.

Recent Posts
  • How to Create Custom Zoho Writer Documents with Conditions and Subforms
  • How to Create Macros to Automate Ticket Replies in Zoho Desk
  • Integrating Zoho Creator and Zoho Desk using a Widget Extension
  • A System Admin’s Guide to Securing Zoho One Using Active Directory (Part II)
Share This Post

Related Posts

Discover the latest news and updates on Zoho applications.

Unlock Your Knowledge Journey!

Get three articles for free, then enjoy unlimited access by registering.