83 lines
2.6 KiB
Markdown
83 lines
2.6 KiB
Markdown
# 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:
|
|
```bash
|
|
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**:
|
|
```bash
|
|
cd ember-market-frontend
|
|
npm install
|
|
```
|
|
|
|
3. **Run the setup script** to copy backend files to the frontend project:
|
|
```bash
|
|
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
|
|
|
|
```bash
|
|
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
|
|
|
|
```bash
|
|
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 |