122 lines
3.2 KiB
Markdown
122 lines
3.2 KiB
Markdown
# Laconic Frontend
|
|
|
|
## Prerequisites
|
|
|
|
Ensure you have the following installed:
|
|
- [Node.js](https://nodejs.org/) (v18+)
|
|
- [pnpm](https://pnpm.io/) (v8+)
|
|
- [Git](https://git-scm.com/)
|
|
|
|
## 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
|
|
|
|
```bash
|
|
git clone https://github.com/yourusername/qwrk-laconic-core-develop.git
|
|
cd qwrk-laconic-core-develop
|
|
```
|
|
|
|
### 2. Install dependencies
|
|
|
|
```bash
|
|
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-testnet-2
|
|
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:
|
|
```bash
|
|
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>
|
|
|
|
<!-- TODO: Remove after SO PR https://git.vdb.to/cerc-io/stack-orchestrator/pulls/969 is merged -->
|
|
- Change branch
|
|
```bash
|
|
git checkout ng-support-custom-nextjs
|
|
```
|
|
|
|
- Build the container for app
|
|
```bash
|
|
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](#3-configure-environment-variables)
|
|
|
|
- Run the webapp container locally
|
|
```bash
|
|
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](./build-webapp.sh)
|
|
- Run app container : [run-webapp.sh](./run-webapp.sh)
|