# How to Install Open‑SEO Project Dependencies Using `package.json`: A Complete Guide

> Easily install Open-SEO project dependencies with package.json. Follow our guide and run npm ci in key directories for a quick setup.

- Repository: [Every App/open-seo](https://github.com/every-app/open-seo)
- Tags: how-to-guide
- Published: 2026-08-08

---

**Run `npm ci` in the root, `web/`, and `badseo/` directories to install all Open‑SEO dependencies from their respective [`package.json`](https://github.com/every-app/open-seo/blob/main/package.json) files.**

Open‑SEO is a Node.js‑based monorepo that manages dependencies across three distinct packages. Each package has its own [`package.json`](https://github.com/every-app/open-seo/blob/main/package.json) file defining runtime requirements, and the repository includes lockfiles to ensure reproducible installs. This guide covers the exact steps to install project dependencies for open-seo using package.json across all workspace directories.

## Understanding the Open‑SEO Dependency Structure

The repository organizes its dependencies into three separate [`package.json`](https://github.com/every-app/open-seo/blob/main/package.json) files:

- **[`package.json`](https://github.com/every-app/open-seo/blob/main/package.json)** (root): Core server and shared libraries for the backend API
- **[`web/package.json`](https://github.com/every-app/open-seo/blob/main/web/package.json)**: Front‑end tooling including Vite, React, and TanStack Query
- **[`badseo/package.json`](https://github.com/every-app/open-seo/blob/main/badseo/package.json)**: Demo project dependencies for the BadSEO feature

Each directory maintains its own [`package-lock.json`](https://github.com/every-app/open-seo/blob/main/package-lock.json) to pin exact versions. This structure requires separate installation steps for each workspace component.

## Installing Dependencies Step by Step

### 1. Clone the Repository

```bash
git clone https://github.com/every-app/open-seo.git
cd open-seo

```

### 2. Install Root Dependencies

From the repository root, install the core server dependencies:

```bash
npm ci

```

**Why `npm ci` instead of `npm install`?** The `npm ci` command performs a clean install that strictly respects [`package-lock.json`](https://github.com/every-app/open-seo/blob/main/package-lock.json), ensuring identical dependency trees across environments. It is faster, deletes existing `node_modules`, and is the recommended approach for CI pipelines and reproducible setups. For casual development, `npm install` also works.

### 3. Install Web UI Dependencies

```bash
cd web
npm ci

```

This installs the front‑end toolchain defined in [`web/package.json`](https://github.com/every-app/open-seo/blob/main/web/package.json), including the Vite build system and React runtime.

### 4. Install BadSEO Demo Dependencies

```bash
cd ../badseo
npm ci

```

The [`badseo/package.json`](https://github.com/every-app/open-seo/blob/main/badseo/package.json) contains dependencies specific to the BadSEO demonstration feature.

## Complete Installation Command Sequence

```bash

# Clone and enter the repository

git clone https://github.com/every-app/open-seo.git
cd open-seo

# Install all three package dependency sets

npm ci          # root dependencies

cd web && npm ci && cd ..
cd badseo && npm ci && cd ..

```

## Alternative Package Managers

You may use **Yarn** or **PNPM** if preferred. Run the equivalent install command in each directory:

| Package Manager | Root Install | Web Install | BadSEO Install |
|-----------------|------------|-------------|----------------|
| npm | `npm ci` | `npm ci` | `npm ci` |
| Yarn | `yarn install` | `yarn install` | `yarn install` |
| PNPM | `pnpm install` | `pnpm install` | `pnpm install` |

## Verifying the Installation

After installing dependencies, start the development servers to confirm everything works:

**Backend API (from root):**

```bash
npm run dev

```

**Web UI (from `web/` directory):**

```bash
cd web
npm run dev

```

The Vite dev server starts at `http://localhost:5173` by default.

## Key Configuration Files

| File Path | Purpose |
|-----------|---------|
| [`package.json`](https://github.com/every-app/open-seo/blob/main/package.json) | Root server and shared library dependencies |
| [`web/package.json`](https://github.com/every-app/open-seo/blob/main/web/package.json) | Front‑end build tools and React ecosystem |
| [`badseo/package.json`](https://github.com/every-app/open-seo/blob/main/badseo/package.json) | BadSEO demo-specific packages |
| [`package-lock.json`](https://github.com/every-app/open-seo/blob/main/package-lock.json) (each dir) | Locked dependency versions for reproducibility |

## Summary

- Open‑SEO uses a monorepo structure with three [`package.json`](https://github.com/every-app/open-seo/blob/main/package.json) files requiring separate installs
- Run `npm ci` in root, `web/`, and `badseo/` directories for reproducible dependency installation
- The repository includes [`package-lock.json`](https://github.com/every-app/open-seo/blob/main/package-lock.json) files; `npm ci` respects these exactly
- Alternative package managers (Yarn, PNPM) work with equivalent commands
- Development servers start with `npm run dev` in their respective directories

## Frequently Asked Questions

### Where are the [`package.json`](https://github.com/every-app/open-seo/blob/main/package.json) files located in Open‑SEO?

The repository contains three [`package.json`](https://github.com/every-app/open-seo/blob/main/package.json) files: at the repository root, inside the `web/` directory for the front‑end UI, and inside the `badseo/` directory for the demo project. Each defines dependencies for its specific component of the application.

### Can I use Yarn or PNPM instead of npm to install Open‑SEO dependencies?

Yes. Yarn and PNPM are fully compatible. Run `yarn install` or `pnpm install` in each of the three directories (root, `web/`, `badseo/`) instead of `npm ci`. The repository does not enforce a specific package manager.

### What is the difference between `npm ci` and `npm install` for Open‑SEO?

`npm ci` performs a clean, reproducible install using exact versions from [`package-lock.json`](https://github.com/every-app/open-seo/blob/main/package-lock.json), making it ideal for CI/CD and first-time setup. `npm install` may update version ranges in [`package-lock.json`](https://github.com/every-app/open-seo/blob/main/package-lock.json) and is suitable for adding new dependencies during active development.

### Do I need to install dependencies in all three directories?

Yes. Each [`package.json`](https://github.com/every-app/open-seo/blob/main/package.json) manages dependencies for a distinct part of the application. The root handles the backend server, `web/` handles the React front‑end, and `badseo/` handles the demonstration project. Skipping any directory results in missing modules when running that component.