Skip to main content

Set up frontend

Set up the Next.js frontend for local development and testing.

Prerequisites​

  • Node.js (v18 LTS or v20 LTS)
  • npm (v9+) or pnpm (v8+)
  • Git

Clone the repository​

git clone https://github.com/GenomicDataInfrastructure/gdi-userportal-frontend.git
cd gdi-userportal-frontend

Install dependencies​

Using npm:

npm install

Using pnpm (recommended):

pnpm install

Configure environment variables​

Create a .env.local file in the project root:

# Copy example environment file
cp .env.example .env.local

Edit .env.local to configure:

# API endpoints
NEXT_PUBLIC_DDS_API_URL=http://localhost:8080
NEXT_PUBLIC_AMS_API_URL=http://localhost:8081

# Authentication
NEXT_PUBLIC_KEYCLOAK_URL=http://localhost:8180
NEXT_PUBLIC_KEYCLOAK_REALM=gdi
NEXT_PUBLIC_KEYCLOAK_CLIENT_ID=gdi-portal

# Feature flags
NEXT_PUBLIC_ENABLE_MULTILINGUAL=false
NEXT_PUBLIC_SHOW_BASKET_AND_LOGIN=true

Run the development server​

npm run dev
# or
pnpm dev

The application will start at http://localhost:3000.

Development workflow​

Hot reload​

The development server supports hot module replacement (HMR). Changes to components are reflected immediately without full page reload.

TypeScript checking​

Run type checking separately:

npm run type-check

Linting​

Check code style:

npm run lint

Formatting​

Format code with Prettier:

npm run format

Common issues​

  • Port 3000 already in use: Change the port.

    PORT=3001 npm run dev

  • Module not found errors: Clear node_modules and reinstall.

    rm -rf node_modules package-lock.json
    npm install

  • Environment variables not loading: Ensure .env.local exists and restart the development server.