Laconic Frontend

Prerequisites

Ensure you have the following installed:

• Node.js (v18+)
• pnpm (v8+)
• Git

Project Structure

This monorepo contains several packages:

• apps/deploy-fe: Frontend Next.js application
• apps/backend: Express.js backend API
• apps/deployer: Deployment service
• services/gql-client: GraphQL client library
• services/ui: Shared UI components
• services/typescript-config: Shared TypeScript configurations

Getting Started

1. Clone the repository

git clone https://github.com/yourusername/qwrk-laconic-core-develop.git
cd qwrk-laconic-core-develop

2. Install dependencies

pnpm install

3. Configure environment variables

Create a .env.local file in the apps/deploy-fe directory:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_key
CLERK_SECRET_KEY=your_clerk_secret
NEXT_PUBLIC_WALLET_IFRAME_URL=http://localhost:4000
NEXT_PUBLIC_LACONICD_CHAIN_ID=laconic-mainnet
NEXT_PUBLIC_API_URL=http://localhost:8000
NEXT_PUBLIC_GITHUB_FALLBACK_TOKEN=your_github_token

Create a local.toml file in apps/backend/environments/ (based on the example file).

4. Start the development servers

Frontend:

cd apps/deploy-fe
pnpm dev

5. Connect Your Wallet

The application requires a Laconic wallet for certain operations. You need to set up:

1. A running wallet instance (follow the setup in the laconic-wallet-web repository)
2. Configure the NEXT_PUBLIC_WALLET_IFRAME_URL to point to your wallet instance

Architecture

Frontend (Next.js App Router)

The frontend is built with:

• Next.js 15 with App Router
• React 19
• Clerk for authentication
• TailwindCSS for styling
• Radix UI components

Authentication Flow (NEEDS DEVELOPMENT!!!)

1. User authenticates with Clerk (GitHub OAuth)
2. User connects wallet (Sign-In With Ethereum)
3. Backend validates and establishes a session

Available Scripts

• pnpm dev: Start development servers
• pnpm build: Build all packages
• pnpm lint: Run linting
• pnpm check-types: Check TypeScript types

GitHub Authentication

Make sure you have:

1. Connected your GitHub account in Clerk
2. Provided the necessary permissions for repository access
3. Set a fallback GitHub token in .env.local if needed for development

Test deployment

• Follow the dev install steps for stack-orchestrator from https://git.vdb.to/cerc-io/stack-orchestrator/src/branch/main/docs/CONTRIBUTING.md#install

• Change branch

  git checkout ng-support-custom-nextjs
  

• Build the container for app

  laconic-so build-webapp --source-repo <path-to-app-repo>/laconic-deployer-frontend --base-container cerc/nextjs-base
  

• Create an env file as described in previous steps

• Run the webapp container locally

  docker run -p 3000:3000 --env-file <path-to-env-file> cerc/laconic-deployer-frontend:local
  

• Scripts used for deployment

  • App container build : build-webapp.sh
  • Run app container : run-webapp.sh