Frontend Setup

ORMBridge decouples your frontend and backend, allowing separate deployment—unlike Django views serving server-rendered JavaScript.

Project Structure

Go to the parent folder of your Django project folder. Don't work inside your Django folder at all.

cd ..

I'll now walk you through the steps to setup your frontend. By the end, you'll have a project structure like this:

/your-projects/
├── backend/                 # Django backend project (e.g., your blog app)
└── frontend/                # Vue application
    ├── package.json
    ├── ormbridge.config.js
    └── src/
        ├── models/          # Generated TypeScript models (from your demo models)
        └── components/      # Your Vue SFCs

Setup

Use NPM to create your Vue frontend project. If you haven't already, you'll need to install Node.js and then run these commands in your Nodejs Command Prompt.

For demo purposes, we will use a vanilla Vue SPA:

# Create a new Vue project named "frontend"
npm init vue@latest frontend
cd frontend

# Install the Vue dependencies and ORMBridge client
npm i
npm install https://github.com/ormbridge/ormbridge-client

Create a Configuration File

Create a file called ormbridge.config.js in the root of your Vue project. This configuration tells ORMBridge where your backend is located and how to handle live events (using Pusher in this example):

Don't Forget To Add Your Pusher App ID and Cluster You need to type in the same appKey APP_ID and cluster CLUSTER you used in your backend configuration. Do not include your pusher secret key.

// ormbridge.config.js
export default {
  backendConfigs: {
    default: {
      API_URL: 'http://127.0.0.1:8000/ormbridge', // Django backend URL exposing ORMBridge endpoints
      GENERATED_TYPES_DIR: './src/models',         // Where the generated TypeScript models will be placed
      events: {
        type: 'pusher',
        pusher: {
          clientOptions: {
            appKey: ** Pusher App Key Goes Here **,
            cluster: ** Pusher Cluster Goes Here **,
            forceTLS: true
          }
        }
      }
    },
  }
};

Initialize ORMBridge in your main file

Open your main file (src/main.js for Vue or src/main.tsx for React) and add these lines to initialize ORMBridge:

// Import the ORMBridge config and initialization module
import config from '../ormbridge.config.js';
import { configInstance } from '@ormbridge/core';

// Initialize ORMBridge configuration
configInstance.setConfig(config);

Important: The external ormbridge.config.js file is required for the CLI tools to work properly, so make sure you're importing from this file.

Generate TypeScript Models

If you setup your Django models, you can now run this command to generate your frontend client.

npx ormbridge sync-models

This command creates TypeScript representations of your Django models (for example, Post and Category) in the folder specified in your configuration.