Skip to main content
This guide will help you set up your local development environment for the AgrospAI Data Space Portal. The application is a React-based Next.js app built with TypeScript and CSS modules.

​
Prerequisites

Before you begin, ensure you have the following installed:
  • Node.js (required) - Version 20.x (check the .nvmrc file)
  • nvm (recommended) - For managing Node.js versions
  • Git - Required for cloning the repository
The project uses Node.js version 20. Using nvm is the recommended way to manage Node.js versions.

​
Initial Setup

1

Clone the Repository

Clone the repository and navigate to the project directory:
git clone [email protected]:oceanprotocol/market.git
cd market
2

Use Correct Node.js Version

If you’re using nvm to manage Node.js versions:
nvm use
This will automatically switch to Node.js version 20 as specified in .nvmrc.
3

Install Dependencies

Install the project dependencies using npm or yarn:
npm install
If you encounter dependency conflicts, use the --legacy-peer-deps flag with npm.
4

Configure Environment Variables

Copy the example environment file and configure it:
cp .env.example .env
Edit .env to add your configuration. Key variables include:
.env
# Required API Keys
NEXT_PUBLIC_INFURA_PROJECT_ID="your_infura_project_id"
NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID="your_walletconnect_project_id"

# Market Fee Configuration
NEXT_PUBLIC_MARKET_FEE_ADDRESS="0x..."
NEXT_PUBLIC_PUBLISHER_MARKET_ORDER_FEE="1"
NEXT_PUBLIC_PUBLISHER_MARKET_FIXED_SWAP_FEE="1"
NEXT_PUBLIC_CONSUME_MARKET_ORDER_FEE="1"
NEXT_PUBLIC_CONSUME_MARKET_FIXED_SWAP_FEE="1"

# Pricing Options
NEXT_PUBLIC_ALLOW_FIXED_PRICING="true"
NEXT_PUBLIC_ALLOW_FREE_PRICING="true"

# AgroPortal Integration
AGROPORTAL_API_KEY="your_agroportal_api_key_here"
The .env.example file contains all available configuration options. Review it to understand what can be customized.
5

Start Development Server

Start the development server:
npm start
The application will be available at http://localhost:8000.

​
Available Scripts

The project includes several npm scripts for development:
CommandDescription
npm startStarts the development server on port 8000
npm run buildCreates a production build
npm run build:staticCreates a static export
npm run serveServes the production build
npm testRuns linting, type checking, and tests
npm run lintRuns ESLint checks
npm run lint:fixFixes ESLint issues automatically
npm run formatFormats code with Prettier
npm run type-checkRuns TypeScript type checking
npm run set-barge-envSets up environment for local Barge

​
Development Workflow

​
Code Style

The project enforces code style through ESLint and Prettier:
  • Git pre-commit hook - Runs Prettier on staged files (configured with Husky)
  • VS Code integration - Recommended extensions for auto-formatting on save
  • CI checks - Linting and type checking runs on all commits
npm run lint

​
Hot Reloading

The development server supports hot module replacement (HMR). Changes to your code will automatically refresh the browser.

​
TypeScript Configuration

The project uses TypeScript with path aliases configured: 
import Component from '@components/MyComponent'
import { useCustomHook } from '@hooks/useCustomHook'
import { utility } from '@utils/helper'
import Asset from '@context/Asset'
import Logo from '@images/logo.svg'

​
Building for Production

1

Create Production Build

npm run build
This generates an optimized production build in the .next directory.
2

Test Production Build Locally

npm run serve
The production build will be served locally for testing.
3

Create Static Export (Optional)

npm run build:static
This creates a static HTML export in the public/ directory.

​
Troubleshooting

​
Dependency Installation Issues

If you encounter peer dependency warnings or errors:
npm install --legacy-peer-deps
This bypasses peer dependency conflict checks.
Ensure you’re using the correct Node.js version:
# Check current version
node --version

# Should output: v20.x.x
# If not, use nvm
nvm install 20
nvm use 20
If dependencies are corrupted, perform a clean install:
# Remove existing dependencies
rm -rf node_modules package-lock.json

# Reinstall
npm install --legacy-peer-deps

​
Build Issues

Check for type errors without building:
npm run type-check
Fix any reported type errors before attempting to build.
Ensure your .env file exists and contains all required variables:
# Check if .env exists
ls -la .env

# If not, copy from example
cp .env.example .env
Restart the development server after modifying .env.
If port 8000 is already in use:
# Find process using port 8000
lsof -i :8000

# Kill the process or use a different port
next dev -p 8001

​
Runtime Errors

Clear Next.js cache and rebuild:
rm -rf .next
npm start
Verify your environment variables for API endpoints:
  • Check NEXT_PUBLIC_METADATACACHE_URI
  • Check NEXT_PUBLIC_SUBGRAPH_URI
  • Check NEXT_PUBLIC_PROVIDER_URL
Ensure the services are accessible from your development environment.

​
Editor Setup

The project includes recommended VS Code extensions. Install them for the best development experience:
  1. ESLint
  2. Prettier - Code formatter
  3. TypeScript Vue Plugin (Volar)

​
Settings

Add these settings to your VS Code workspace for auto-formatting:
.vscode/settings.json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

​
Next Steps

Barge Integration

Set up local Ocean Protocol components with Barge

Testing Guide

Learn how to write and run tests

Architecture

Understand the system architecture

Data Sources

Explore data sources and APIs

Build docs developers (and LLMs) love

Get started for freeTalk to us