# How to Build and Run the AiToEarn Front-End Application: Complete Setup Guide

> Learn how to build and run the AiToEarn front-end application with this complete setup guide. Install dependencies and launch locally in minutes.

- Repository: [yikart/AiToEarn](https://github.com/yikart/AiToEarn)
- Tags: how-to-guide
- Published: 2026-05-12

---

**The AiToEarn front-end is a Next.js TypeScript application located in `project/aitoearn-web` that requires Node.js 20.18.x and pnpm, and launches on `localhost:3000` with a single `pnpm run dev` command after installing dependencies.**

This guide walks you through the exact steps to build and run the AiToEarn front-end application from the `yikart/AiToEarn` repository. The UI is built with Next.js, Tailwind CSS, and TypeScript, and is designed to connect to backend services for full-stack functionality.

## Prerequisites

Before cloning the repository, ensure your environment meets the following requirements:

- **Node.js 20.18.x**: The repository explicitly requires Node.js 20.18.x as noted in the project badges and documentation. You can verify your version with `node -v`.
- **pnpm**: The monorepo uses pnpm for package management. Install it globally if you haven't already:
  ```bash
  npm i -g pnpm
  ```

## Step-by-Step Installation

Follow these steps to get the front-end running locally:

1. **Clone the repository**:
   ```bash
   git clone https://github.com/yikart/AiToEarn.git
   cd AiToEarn
   ```

2. **Install front-end dependencies**:
   Navigate to the web workspace and install dependencies using pnpm:
   ```bash
   cd project/aitoearn-web
   pnpm install
   ```

   
   This command resolves all packages listed in [`project/aitoearn-web/package.json`](https://github.com/yikart/AiToEarn/blob/main/project/aitoearn-web/package.json) and generates the [`pnpm-lock.yaml`](https://github.com/yikart/AiToEarn/blob/main/pnpm-lock.yaml) lockfile.

3. **Configure environment variables** (optional but recommended):
   Create a `.env.local` file in `project/aitoearn-web` by copying the provided example:
   ```bash
   cp .env.example .env.local
   ```

   
   Set the `NEXT_PUBLIC_API_URL` and other variables to match your backend endpoints. The default configuration expects API services at `http://localhost:3000`.

## Running the Development Server

To start the front-end application in development mode with hot reloading:

```bash
pnpm run dev

```

This command, defined in [`project/aitoearn-web/package.json`](https://github.com/yikart/AiToEarn/blob/main/project/aitoearn-web/package.json), launches the Next.js development server on `http://localhost:3000` by default.

### Optional: Running the Full Stack

If you want the UI to communicate with local backend services, start the two backend applications in separate terminals:

**Terminal 1 (AI API service):**

```bash
cd project/aitoearn-backend
pnpm install
pnpm nx serve aitoearn-ai

```

**Terminal 2 (Publishing server):**

```bash
pnpm nx serve aitoearn-server

```

**Terminal 3 (Front-end):**

```bash
cd project/aitoearn-web
pnpm run dev

```

The front-end will now proxy API requests to your locally running backend services.

## Key Project Files and Architecture

Understanding the file structure helps when customizing the application:

- **[`project/aitoearn-web/package.json`](https://github.com/yikart/AiToEarn/blob/main/project/aitoearn-web/package.json)**: Defines the dependency tree and npm scripts including `dev`, `build`, and `start`.
- **[`project/aitoearn-web/tsconfig.json`](https://github.com/yikart/AiToEarn/blob/main/project/aitoearn-web/tsconfig.json)**: Configures TypeScript compiler options and path aliases for the Next.js application.
- **[`project/aitoearn-web/tailwind.config.ts`](https://github.com/yikart/AiToEarn/blob/main/project/aitoearn-web/tailwind.config.ts)**: Houses the Tailwind CSS configuration including custom themes and plugins.
- **[`project/aitoearn-web/src/pages/_app.tsx`](https://github.com/yikart/AiToEarn/blob/main/project/aitoearn-web/src/pages/_app.tsx)**: The global application wrapper that registers Tailwind styles and provides app-wide context providers.
- **[`project/aitoearn-web/src/pages/index.tsx`](https://github.com/yikart/AiToEarn/blob/main/project/aitoearn-web/src/pages/index.tsx)**: The entry point for the dashboard home page.
- **[`project/aitoearn-web/src/utils/request.ts`](https://github.com/yikart/AiToEarn/blob/main/project/aitoearn-web/src/utils/request.ts)**: Contains the HTTP client helper used for all API communications from the UI layer.
- **`project/aitoearn-web/.env.example`**: Template file showing required environment variables such as `NEXT_PUBLIC_API_URL`.

## Environment Configuration Details

The front-end relies on specific environment variables to connect to backend services:

- **`NEXT_PUBLIC_API_URL`**: The base URL for the AI service API (aitoearn-ai)
- **`NEXT_PUBLIC_PUBLISH_URL`**: The base URL for the publishing service (aitoearn-server)

These variables must be prefixed with `NEXT_PUBLIC_` to be exposed to the browser-side code in Next.js. Without these configured in `.env.local`, the application may fail to fetch data from backend endpoints.

## Summary

- **Install prerequisites**: Node.js 20.18.x and pnpm are required to build and run the AiToEarn front-end application.
- **Navigate to the workspace**: All front-end code lives in `project/aitoearn-web`.
- **Install dependencies**: Run `pnpm install` to resolve the Next.js, Tailwind, and TypeScript dependencies.
- **Start development**: Use `pnpm run dev` to launch the hot-reloading server on `localhost:3000`.
- **Configure environment**: Set `NEXT_PUBLIC_API_URL` in `.env.local` to point to your backend services.

## Frequently Asked Questions

### What Node.js version is required for AiToEarn?

The AiToEarn front-end application requires **Node.js 20.18.x** specifically. This version requirement is enforced throughout the repository documentation and ensures compatibility with the Next.js features and dependency tree used in `project/aitoearn-web`.

### Can I run the front-end without the backend services?

Yes, the front-end will start and run without the backend services running. However, functionality that requires API calls—such as AI generation features and publishing workflows—will fail or show errors. The UI will still render and allow navigation, but data-dependent features require the aitoearn-ai and aitoearn-server services to be accessible.

### How do I change the API endpoint URL that the front-end uses?

Create a `.env.local` file in the `project/aitoearn-web` directory and define `NEXT_PUBLIC_API_URL` with your desired endpoint. For example: `NEXT_PUBLIC_API_URL=http://localhost:3001`. The variable must use the `NEXT_PUBLIC_` prefix to be available in browser-side code, as handled by the request utility in [`src/utils/request.ts`](https://github.com/yikart/AiToEarn/blob/main/src/utils/request.ts).

### Why does the project use pnpm instead of npm or yarn?

The `yikart/AiToEarn` repository is structured as a monorepo using Nx workspaces, and pnpm provides better disk space efficiency and stricter dependency resolution through its content-addressable store. All workspace commands and lock files ([`pnpm-lock.yaml`](https://github.com/yikart/AiToEarn/blob/main/pnpm-lock.yaml)) are specifically configured for pnpm, making it the required package manager for consistent builds.