Deploying Frontend and Backend on Separate Servers

You're taking the right approach by deploying your frontend and backend on separate servers and using environment variables to manage the API URL. This separation provides better scalability and security. Let me guide you through the setup process.

Frontend Configuration (Next.js)

Environment Variables Setup

1. Create a .env.local file for local development:

   NEXT_PUBLIC_API_URL=http://localhost:3001/api

2. For production, set the environment variable in your Vercel dashboard:

   • Go to your project settings
   • Navigate to the "Environment Variables" section
   • Add NEXT_PUBLIC_API_URL with the value of your production backend URL (e.g., https://your-backend-api.com/api)

3. Using the environment variable in your code: The lib/api.ts file is already set up to use this environment variable:

   export const api = axios.create({ baseURL: process.env.NEXT_PUBLIC_API_URL || "http://localhost:3001/api", headers: { "Content-Type": "application/json", }, });

CORS Considerations

Since your frontend and backend will be on different domains, you need to ensure CORS is properly configured on the backend.

Backend Configuration (Node.js)

Environment Variables Setup

1. Create a .env file for local development:

   PORT=3001 JWT_SECRET=your-secret-key ENCRYPTION_KEY=your-secret-key-for-aes-encryption OPENAI_API_KEY=your-openai-api-key FRONTEND_URL=http://localhost:3000

2. For production, set these environment variables in your hosting platform:

   • PORT: The port your server will run on (often set automatically by the hosting provider)
   • JWT_SECRET: Secret key for JWT token generation
   • ENCRYPTION_KEY: Secret key for AES encryption
   • OPENAI_API_KEY: Your OpenAI API key
   • FRONTEND_URL: Your frontend URL for CORS configuration

CORS Configuration

Update your backend server to allow requests from your frontend domain:

Deployment Process

Frontend Deployment (Vercel)

1. Push your code to GitHub
2. Import your repository in Vercel
3. Set the NEXT_PUBLIC_API_URL environment variable
4. Deploy your application

Backend Deployment (Render, Railway, Heroku, etc.)

1. Push your code to a separate GitHub repository
2. Set up deployment on your chosen platform
3. Configure all required environment variables
4. Deploy your application

Testing the Connection

After deployment, test the connection between your frontend and backend:

1. Open your deployed frontend application
2. Try to register a new user or log in
3. Check the network tab in your browser's developer tools to ensure API calls are going to the correct URL
4. Verify that responses are being received correctly

Security Considerations

Since you're deploying on separate servers and using environment variables, consider these additional security measures:

1. HTTPS: Ensure both your frontend and backend use HTTPS
2. Environment Variable Encryption: Some platforms offer encryption for environment variables
3. API Rate Limiting: Implement rate limiting on your backend to prevent abuse
4. Regular Key Rotation: Periodically update your JWT_SECRET and ENCRYPTION_KEY

Monitoring API Calls

To monitor API calls between your frontend and backend:

1. Implement logging middleware on your backend:

   app.use((req, res, next) => { console.log(`${req.method} ${req.path} - ${new Date().toISOString()}`); next(); });
2. Consider using a monitoring service like Sentry or LogRocket to track API calls and errors

This setup will ensure your frontend and backend can communicate securely while being deployed on separate servers, with all configuration managed through environment variables.

AI Database Query Tool with MongoDB Integration

I'll modify the entire codebase to use MongoDB for storing all server details, user information, and database configurations. This will make the application more robust and production-ready.

MongoDB Schema Design

First, let's design the MongoDB schemas we'll need:

Now, let's implement the complete solution with MongoDB integration.

Backend Implementation

Frontend Updates

Now, let's update the frontend to work with our MongoDB backend:

Deployment Instructions

Environment Variables Setup

You'll need to set up the following environment variables for both your frontend and backend:

Backend Environment Variables

Frontend Environment Variables

MongoDB Setup

1. Create a MongoDB Atlas account (or use another MongoDB provider)
2. Create a new cluster
3. Create a database named ai_db_query_tool

4. Create the following collections:

   • users
   • databases
   • queryhistories
5. Get your MongoDB connection string and add it to your backend environment variables

Deployment Steps

Backend Deployment

1. Push your backend code to a GitHub repository
2. Deploy to a Node.js hosting service like Render, Railway, or Heroku
3. Set all the required environment variables in your hosting platform
4. Make note of your backend URL for the frontend configuration

Frontend Deployment

1. Push your frontend code to a GitHub repository
2. Deploy to Vercel or another Next.js-compatible hosting service
3. Set the NEXT_PUBLIC_API_URL to point to your deployed backend
4. Set the NEXT_PUBLIC_ENCRYPTION_KEY (must match the backend's ENCRYPTION_KEY)

Key Improvements in This Version

1. Persistent Storage: All data is now stored in MongoDB instead of in-memory arrays
2. Database Password Encryption: Database passwords are encrypted before storage
3. Query History: Added a new feature to track and display query history
4. Real Database Connectors: Added actual database connector implementations for MySQL, SQL Server, Oracle, and MongoDB
5. Improved Security: Better encryption and authentication flow
6. Environment Variable Validation: Added proper environment variable handling
7. Health Check Endpoint: Added a /api/health endpoint for monitoring
8. Logging: Added request logging for better debugging
9. Code Organization: Better code structure with separate model and utility files

This implementation provides a robust foundation for your AI-powered database query tool with MongoDB for storing all server details, user information, and database configurations.

Please make sure to add the following environment variables to your project: