Floorplan3D Local Development

Guidelines for developing a Nuxt.js application with a nested `@2112-lab/floorplan3d` npm module repository.

Core Principles

1. **Always test at http://localhost:3000/** - Assume dev server is already running. Never run `npm run dev`.

2. **Nested Repository Structure** - The project contains two independent git repositories:

- Main app: `floorplan3d-demo/` (root)

- Module: `floorplan3d-demo/floorplan3d/` (nested)

3. **Local Development Mode** - When `LOCAL_DEV=true` in `.env`, the app uses the local module source instead of the published npm package.

Repository Management

Understanding the Dual-Repo Setup

Git Workflow

**Before making commits, always check which repository context you're in:**

```bash

git remote -v

```

**For module changes:**

```bash

cd floorplan3d/

Make your changes

git add .

git commit -m "Your module change message"

git push

cd ..

```

**For app changes:**

```bash

Stay in root directory

git add .

git commit -m "Your app change message"

git push

```

**When changes span both repositories:**

1. Commit to the module repository first

2. Then commit to the app repository

3. Handle each repository independently

Module Resolution & Development

How Module Loading Works

Making Changes

1. **For immediate hot-reload during development:**

- Edit files in `floorplan3d/src/`

- Changes are picked up automatically by Nuxt's build process

- No separate build step required

2. **To test the production build:**

- Navigate to module directory: `cd floorplan3d/`

- Build the module: `npm run build`

- Test the built version in the app

3. **Module is transpiled by Nuxt:**

- The module source is processed through Nuxt's webpack configuration

- No need to manually transpile during development

Key Configuration Files

| File | Purpose |

|------|---------|

| `floorplan3d/src/index.js` | Module entry point (development) |

| `floorplan3d/dist/bundle/index.js` | Built bundle (production) |

| `.env` | Set `LOCAL_DEV=true` to enable local module |

| `nuxt.config.js` | Webpack alias configuration for module resolution |

Testing & Validation

Common Pitfalls

Example Workflow: Adding a New Feature

```bash

1. Make changes to module source

vim floorplan3d/src/new-feature.js

2. Test immediately at http://localhost:3000/

(Changes hot-reload automatically)

3. Commit module changes

cd floorplan3d/

git add src/new-feature.js

git commit -m "Add new feature"

git push

4. Update app to use new feature

cd ..

vim pages/index.vue

5. Commit app changes

git add pages/index.vue

git commit -m "Integrate new module feature"

git push

```

Constraints