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

Run npm ci in the root, web/, and badseo/ directories to install all Open‑SEO dependencies from their respective 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 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 files:

• package.json (root): Core server and shared libraries for the backend API
• web/package.json: Front‑end tooling including Vite, React, and TanStack Query
• badseo/package.json: Demo project dependencies for the BadSEO feature

Each directory maintains its own 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

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:

npm ci

Why npm ci instead of npm install? The npm ci command performs a clean install that strictly respects 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

cd web
npm ci

This installs the front‑end toolchain defined in web/package.json, including the Vite build system and React runtime.

4. Install BadSEO Demo Dependencies

cd ../badseo
npm ci

The badseo/package.json contains dependencies specific to the BadSEO demonstration feature.

Complete Installation Command Sequence

# 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):

npm run dev

Web UI (from web/ directory):

cd web
npm run dev

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

Key Configuration Files

File Path	Purpose
package.json	Root server and shared library dependencies
web/package.json	Front‑end build tools and React ecosystem
badseo/package.json	BadSEO demo-specific packages
package-lock.json (each dir)	Locked dependency versions for reproducibility

Summary

• Open‑SEO uses a monorepo structure with three 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 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 files located in Open‑SEO?

The repository contains three 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, making it ideal for CI/CD and first-time setup. npm install may update version ranges in 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 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}