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
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-cliAfter successful installation, we would be logging in to our zoho account from the cli which can be done with the following command.
catalyst loginFollowing 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 initSince 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/cliNow let’s create a new project inside our catalyst project.
vue create vue-todo-app cd vue-todo-appNow, 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 serveIf 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 serveAfter successful serve, the terminal will show the following output.
Since, we want to deploy our project after testing locally, write
catalyst deployAnd 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.
