ember-market-frontend/COMBINED-README.md

Ember Market Integrated Application

This project combines both the Ember Market frontend (Next.js) and backend (Express) into a single application. This approach eliminates the need to run two separate servers and avoids routing conflicts between Next.js and Express.

Setup Instructions

1. Clone both repositories if you haven't already:

git clone https://github.com/your-username/ember-market-frontend.git
git clone https://github.com/your-username/ember-market-backend.git

2. Install dependencies:

cd ember-market-frontend
npm install

3. Run the setup script to copy backend files to the frontend project:

npm run setup-backend

4. Update environment variables:
   • The setup script copies the backend .env file to .env.backend in the frontend project
   • Make sure to review and adjust environment variables as needed
   • Ensure MongoDB connection string and other critical variables are set correctly

Running the Application

Development Mode

npm run dev:custom

This starts the combined server in development mode on port 3000 (or the port specified in your environment variables).

Production Mode

npm run build
npm run start:custom

How It Works

This integration uses a custom Express server that:

1. Handles API routes at /api/* using the existing Express backend code
2. Delegates all other routes to Next.js to handle frontend rendering

Key Files

• server.js: Custom server that combines Express and Next.js
• setup-backend.js: Script to copy backend files into the frontend project
• next.config.mjs: Configured to work with the custom Express server

API Routes

All backend API routes are available at the same paths as before, but now they're served from the same server as your frontend:

• Authentication: /api/auth/*
• Products: /api/products/*
• Orders: /api/orders/*
• etc.

Development Workflow

When making changes:

1. Frontend changes: Modify files in the frontend project as usual
2. Backend changes: You have two options:
   • Make changes in the original backend repo and run npm run setup-backend to sync
   • Make changes directly in the frontend project's backend/ directory

Remember that changes made directly in the frontend project's backend/ directory won't automatically sync back to the original backend repository.

Troubleshooting

• Port conflicts: Make sure no other service is using port 3000 (or your configured port)
• MongoDB connection issues: Verify your connection string in the environment variables
• Path issues: Ensure paths in imports are correct for the new project structure