DEVELOPMENT.md

Development Setup Guide

This guide explains how to properly set up and run Monynha Softwares in development mode with all features working, including the contact form API.

Environment Setup

1. Create .env.local file in the project root:

   cp .env.example .env.local

2. Configure environment variables in .env.local:

   RESEND_API_KEY=your_resend_api_key
   GEMINI_API_KEY=your_gemini_api_key
   PORT=8080
   NODE_ENV=development

   • Get RESEND_API_KEY from Resend.com
   • Get GEMINI_API_KEY from Google AI Studio

Running in Development

Option 1: Two-Terminal Setup (Recommended for full functionality)

Terminal 1 - Start the API Server:

npm run start
# or with pnpm
pnpm start

The server will run on http://localhost:8080 and handle /api/* requests.

Terminal 2 - Start the Vite Dev Server:

npm run dev
# or with pnpm
pnpm dev

The Vite dev server will run on http://localhost:3000 and proxy API requests to the backend.

Option 2: Single-Terminal Setup (API calls won't work)

If you only run:

npm run dev

The frontend will work, but API calls (like the contact form) will fail with 404 errors because there's no backend server running. Use Option 1 if you need to test the contact form.

What's Fixed

✅ Tailwind CSS Production-Ready

• Removed CDN dependency (cdn.tailwindcss.com)
• Installed tailwindcss, postcss, and autoprefixer as dev dependencies
• Created tailwind.config.js with brand colors
• Created postcss.config.js for PostCSS processing
• CSS is now compiled during build for production

✅ API Proxy for Development

• Vite dev server now proxies /api/* requests to the backend
• No more 404 errors when testing contact form
• Automatic logging of proxy requests

✅ Better Error Handling

• ContactView now gracefully handles invalid JSON responses
• Improved error messages for users
• Better console logging for debugging

Tailwind CSS Changes

The project now uses:

• PostCSS to compile Tailwind CSS
• tailwind.config.js for configuration (instead of inline in HTML)
• index.css for Tailwind directives (@tailwind base; components; utilities;)

All custom styles (text-outline, glass, scrollbar) are defined in index.css.

Building for Production

npm run build

This will:

1. Compile Tailwind CSS to optimized CSS
2. Build React components with Vite
3. Generate sitemap

Then serve with:

npm run start

Troubleshooting

Contact Form Returns 404

• Make sure the API server is running on port 8080
• Check that RESEND_API_KEY is set in .env.local

Contact Form Returns 405 (Method Not Allowed)

This happens when:

1. You're using vite preview instead of npm start for production
2. The API server isn't running or is unreachable
3. The proxy configuration in vite.config.ts is incorrect

Solution: Always use npm start after building for production. The Express server handles both static files AND API endpoints.

JSON Parse Errors in Console

The frontend now handles non-JSON responses gracefully. If you see these errors:

• Check that both servers are running (dev mode)
• Check that npm start is running (production mode)
• Verify the API endpoint is accessible at http://localhost:8080/api/contact

Vite Dev Server Can't Proxy to API

Make sure:

• API server is running on port 8080 (Terminal 1: npm start)
• vite.config.ts has the proxy configuration:

  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
      }
    }
  }

• Check browser DevTools Network tab to confirm proxy is working

Tailwind Classes Not Applying

• Run pnpm install to ensure PostCSS plugins are installed
• Restart the dev server after installing dependencies
• Check that index.css is imported in index.tsx

API Endpoint Not Working

• Verify Express server is running: npm run start
• Check logs in terminal running the server
• Ensure RESEND_API_KEY is correctly set

Development Scripts

• npm run dev - Start Vite dev server (port 3000)
• npm run build - Build for production
• npm run preview - Preview production build locally
• npm run start - Run Express production server