Full-Stack TypeScript: Vue.js & Deno Deploy for Modern Web Apps

Modern web development demands speed, scalability, and type safety. Integrating Vue.js for a dynamic frontend with Deno Deploy for a serverless TypeScript backend offers a powerful solution. This guide demonstrates how to combine these technologies into a robust, type-safe application.

Architecture Overview

Our application follows a standard client-server architecture. The Vue.js frontend, compiled into static assets, consumes data from a backend API hosted on Deno Deploy. TypeScript is leveraged end-to-end, ensuring type consistency and developer confidence across the stack.

Vue.js Frontend Setup

Vue.js excels at building reactive user interfaces with its declarative syntax and component-based architecture. We'll create a simple Vue component (using Vue 3's Composition API and <script setup>) that fetches a message from our Deno Deploy backend.

First, define a shared interface for the data structure to ensure type-safety between frontend and backend. Create src/types/api.ts:

// src/types/api.ts
export interface MessageResponse {
  message: string;
  timestamp: string;
}

Now, implement the frontend component in src/App.vue:

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import type { MessageResponse } from './types/api'; // Import the shared interface

const backendMessage = ref<string | null>(null);
const error = ref<string | null>(null);

onMounted(async () => {
  try {
    // Replace with your actual Deno Deploy URL
    const response = await fetch('https://your-deno-deploy-url.deno.dev/api/message');
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data: MessageResponse = await response.json();
    backendMessage.value = data.message;
  } catch (e: any) {
    error.value = `Failed to fetch message: ${e.message}`;
  }
});
</script>

<template>
  <div id="app">
    <h1>Vue.js & Deno Deploy Integration</h1>
    <p v-if="backendMessage">Message from Deno: <strong>{{ backendMessage }}</strong></p>
    <p v-else-if="error" class="error">{{ error }}</p>
    <p v-else>Loading message...</p>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.error {
  color: red;
}
</style>

This Vue component fetches data asynchronously and displays it, demonstrating basic API integration. Remember to replace https://your-deno-deploy-url.deno.dev with your actual backend URL.

Deno Deploy Backend Setup

Deno Deploy provides a global, serverless platform for JavaScript, TypeScript, and WebAssembly, ideal for high-performance APIs. It leverages Deno's secure runtime and native web APIs, simplifying backend development.

Create main.ts for your Deno Deploy project:

// main.ts
import { serve } from "https://deno.land/std@0.218.2/http/server.ts";

// Re-use the shared interface from your frontend project (or define it here)
interface MessageResponse {
  message: string;
  timestamp: string;
}

serve(async (req: Request) => {
  const url = new URL(req.url);

  // CORS headers are crucial for allowing your frontend to communicate with this API
  const headers = new Headers({
    "Access-Control-Allow-Origin": "*", // IMPORTANT: Restrict this in production to your frontend's origin
    "Access-Control-Allow-Methods": "GET, OPTIONS",
    "Access-Control-Allow-Headers": "Content-Type",
    "Content-Type": "application/json",
  });

  // Handle CORS preflight requests (OPTIONS method)
  if (req.method === "OPTIONS") {
    return new Response(null, { status: 204, headers });
  }

  if (url.pathname === "/api/message") {
    const data: MessageResponse = {
      message: "Hello from Deno Deploy!",
      timestamp: new Date().toISOString(),
    };
    return new Response(JSON.stringify(data), { headers, status: 200 });
  }

  return new Response("Not Found", { status: 404, headers });
});

This Deno script defines a simple API endpoint /api/message that returns a JSON object. The serve function from Deno's standard library (deno.land/std/http/server) handles incoming requests, and critical CORS headers are included to enable cross-origin communication.

Integration & Deployment

1. Shared Types: The MessageResponse interface is key for type-safety. In a real project, consider a monorepo or a dedicated shared package to manage these types, ensuring both frontend and backend use the identical definitions.
2. CORS: Properly configure Access-Control-Allow-Origin on your Deno Deploy backend. For development, * is fine, but for production, specify your Vue.js application's domain.
3. Deploying Vue.js: Build your Vue application (npm run build or yarn build) and deploy the resulting static dist folder to a static hosting provider (e.g., Netlify, Vercel, Cloudflare Pages).
4. Deploying Deno Deploy: Push your main.ts to a Git repository. Connect it to Deno Deploy for automatic global deployment. Deno Deploy handles TypeScript compilation and execution natively.

Best Practices

• End-to-End Type Safety: Always use shared TypeScript interfaces for API contracts. This eliminates a major class of bugs related to data mismatch.
• Environment Variables: Use Deno Deploy's environment variables (Deno.env.get("VAR_NAME")) for sensitive data or configuration. For Vue.js, use .env files and import.meta.env.
• Robust Error Handling: Implement comprehensive error handling on both sides. The frontend should gracefully display API errors, and the backend should log errors and return appropriate HTTP status codes.
• Security: Beyond CORS, consider input validation, authentication, and authorization for production applications.

Conclusion

Integrating Vue.js with Deno Deploy offers a streamlined, type-safe, and highly performant full-stack development experience. By leveraging TypeScript across your entire application, you gain increased reliability and maintainability, paving the way for scalable and modern web applications. Start building your next project with this powerful combination today!