01 — `Someli-Designer` setup¶

You've finished ../00-workstation-setup.md. Now stand up Someli-Designer.

1. Clone¶

cd ~/src/someli
git clone git@github.com:Someli-ai/Someli-Designer.git
cd Someli-Designer
git checkout uat_des_app          # observed active branch; verify with the team

The branch convention here is dev_des_app / uat_des_app / main. Verify with the team which is currently the development target.

2. Pin Node 20¶

nvm use 20.18.3
node --version
yarn --version          # 1.22.x classic

This repo uses npm by default (lockfile is package-lock.json), but yarn also works in practice. Verify with the team which the team uses day-to-day.

3. Install — TWO `node_modules` trees¶

Same dual-project layout as someli-platform:

Someli-Designer/                  ← Nuxt 2 SPA
├── package.json                  ← Nuxt deps
├── package-lock.json
├── node_modules/
│
└── polotno-editor/               ← independent React 18 + Polotno (its own deps)
    ├── package.json
    ├── node_modules/

Install both:

# At repo root
npm install                       # or yarn install

# Polotno sub-project
cd polotno-editor
yarn install                      # the editor uses Parcel; yarn is the common choice
cd ..

4. The `.env` file¶

The repo does not ship a .env.example. Ask the team for a dev .env.

The Nuxt config loads .env via @nuxtjs/dotenv. The file lives at the repo root: Someli-Designer/.env.

Variables you need at minimum¶

Var	What
`baseURL`	Backend base URL — points at `designer-api` (`http://localhost:5003` if running it locally, else the team's dev URL)

The Nuxt config reads this as axios.baseURL = process.env.baseURL.

baseURL vs API_URL: the customer-app FE uses API_URL; this designer FE uses baseURL. Different env-var names for the same concept. Don't get tripped up.

5. Start the dev server¶

yarn dev          # or: npm run dev
# Nuxt dev server on http://localhost:3000 by default

If you're also running someli-platform locally (which uses port 3000 by default), set a different port:

PORT=3001 yarn dev

First build takes 30–90 seconds. HMR is fast afterwards.

6. Rebuild the Polotno bundle (when needed)¶

The editor lives at the repo root as polotno-bundle.js (+ .map). To rebuild after editing polotno-editor/...:

cd polotno-editor
yarn dev                          # Parcel dev server on http://localhost:1234 for interactive work
# or
yarn build                        # writes polotno-bundle.js into the parent repo root
cd ..
# restart the Nuxt dev server at the repo root

Important: the polotno-editor/ directory here is a different fork from someli-platform/polotno-editor/. They have diverged — different file names (brandkitPanel.js here vs brandkitpanel.js in the customer app), different panels, different subfolders. Edits to one are not automatically reflected in the other.

See ../../audit/Someli-Designer/polotno-integration.md.

7. Smoke test¶

Open http://localhost:3000 (or :3001). You should see the login page (pages/login.vue).

Log in with a staff account. Verify with the team which roles can access which features — the navbar gates nav items by role_type.

8. Browser tooling¶

Vue DevTools v6.x (legacy version — Vue 3 DevTools breaks on Vue 2.7).
Network panel — verify the baseURL requests are reaching designer-api.

9. You're done¶

If yarn dev runs, you can hit http://localhost:3000, and login works against designer-api, you are ready.

Next: 02-stack.md.

Troubleshooting¶

Symptom	Likely cause
`Module not found: bootstrap-vue/nuxt`	`node_modules` not installed; re-run `npm install`
Login fails	Network tab — is the backend reachable? Check `baseURL`
Navbar visual glitch	Bootstrap-Vue brings Bootstrap 4 CSS, while the navbar CDN-loads Bootstrap 5 JS. The Bootstrap 4 vs 5 mismatch is a known cause of navbar bugs — see `02-stack.md`
Polotno editor blank	`polotno-bundle.js` missing or stale — rebuild inside `polotno-editor/`
Hotjar tracker errors in console	`plugins/hotjar.js` may need a `VITE_HOTJAR_ID`-style env var (or be safely disabled in dev)
Wrong role sees wrong nav items	Role check is in `components/Navbar.vue`; commit `074b9ec` introduced role gating

01 — Someli-Designer setup¶