feat(backend): add serverless backend (#85)

* feat(backend): add serverless backend

* build: add scripts for building backend and frontend

* fix: fix build script

* fix: fix build script

* chore: remove debug message

.circleci/config.yml

@@ -16,12 +16,12 @@ step_defs:
  - run: &node_version
  name: Set Node version
  command: |
- nvm install v16
- nvm alias default v16
+ nvm install v18
+ nvm alias default v18
  echo "nvm use default" >> $BASH_ENV
  - run: &check_version
  name: Check Node version
- command: node -v | grep v16
+ command: node -v | grep v18
 
 jobs:
  deploy:

.github/workflows/deploy.yml

@@ -0,0 +1,27 @@
+name: Deploy pages
+
+on: [push, pull_request]
+
+jobs:
+ deploy:
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v3
+ - name: Use Node.js 18.x
+ uses: actions/setup-node@v3
+ with:
+ node-version: 18.x
+ cache: 'npm'
+ - run: yarn install
+ - name: Build
+ run: |
+ cd packages/serverless-backend
+ npx @cloudflare/next-on-pages@1
+ - name: Deploy
+ env: 
+ BRANCH_NAME: ${{ github.head_ref || github.ref_name }} 
+ CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+ CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+ run: |
+ cd packages/serverless-backend
+ npx wrangler pages deploy .vercel/output/static --branch=$BRANCH_NAME --project-name=unirep-explorer-backend

.prettierignore

@@ -6,3 +6,6 @@
 
 yarn.lock
 .yarn
+
+**/.next
+**/.vercel

package.json

@@ -8,10 +8,12 @@
  "scripts": {
  "install": "lerna bootstrap",
  "backend": "yarn workspace backend",
+ "serverless-backend": "yarn workspace serverless-backend",
  "frontend": "yarn workspace frontend",
  "lint": "prettier .",
  "lint:check": "prettier . --check",
- "lint:fix": "prettier . --write"
+ "lint:fix": "prettier . --write",
+ "prepare": "scripts/cf_build.sh"
  },
  "devDependencies": {
  "lerna": "^5.5.4"

packages/frontend/src/config.js

@@ -2,5 +2,5 @@ export const version = 'v2.0.0'
 export const network = 'sepolia'
 
 // in CI we append a change to this value
-let SERVER = process.env.SERVER ?? 'http://127.0.0.1:8000'
+let SERVER = process.env.SERVER ?? 'http://127.0.0.1:8788'
 export { SERVER }

packages/serverless-backend/.env.example

@@ -0,0 +1,2 @@
+UNIREP_ADDRESS='0x83cB6AF63eAfEc7998cC601eC3f56d064892b386'
+INFURA_KEY=...

packages/serverless-backend/.eslintrc.json

@@ -0,0 +1,7 @@
+{
+ "extends": [
+ "next/core-web-vitals",
+ "plugin:eslint-plugin-next-on-pages/recommended"
+ ],
+ "plugins": ["eslint-plugin-next-on-pages"]
+}

packages/serverless-backend/.gitignore

@@ -0,0 +1,39 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# wrangler
+./wrangler

packages/serverless-backend/README.md

@@ -0,0 +1,43 @@
+# UniRep Explorer Backend
+
+## Create a D1 instance
+
+Learn more about D1: https://developers.cloudflare.com/d1/get-started/
+
+1. Log in
+
+```bash
+npx wrangler login
+```
+
+2. Create a database
+
+```bash
+npx wrangler d1 create explorer
+```
+
+3. Create a `wrangler.toml` file
+
+```bash
+[[d1_databases]]
+binding = "DB" # i.e. available in your Worker on env.DB
+database_name = "explorer"
+database_id = "<unique-ID-for-your-database>"
+```
+
+## Build
+
+Build the pages
+
+```bash
+npx @cloudflare/next-on-pages@1
+```
+
+## Start a developement server
+
+```bash
+npx wrangler pages dev .vercel/output/static \
+ --compatibility-date 2022-11-30 \
+ --compatibility-flag nodejs_compat \
+ --d1 DB="<unique-ID-for-your-database>"
+```

packages/serverless-backend/env.d.ts

@@ -0,0 +1,18 @@
+declare global {
+ namespace NodeJS {
+ interface ProcessEnv {
+ [key: string]: string | undefined
+ // The KV Namespace binding type used here comes
+ // from `@cloudflare/workers-types`, in order to
+ // use it like so, make sure that you have installed
+ // the package as a dev dependency and you have added
+ // it to your `tsconfig.json` file under
+ // `compilerOptions.types`.
+ DB: D1Database
+ UNIREP_ADDRESS: string
+ INFURA_KEY: string
+ }
+ }
+}
+
+export {}

packages/serverless-backend/next.config.js

@@ -0,0 +1,26 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+ async headers() {
+ return [
+ {
+ // matching all API routes
+ source: '/api/:path*',
+ headers: [
+ { key: 'Access-Control-Allow-Credentials', value: 'true' },
+ { key: 'Access-Control-Allow-Origin', value: '*' }, // replace this your actual origin
+ {
+ key: 'Access-Control-Allow-Methods',
+ value: 'GET,DELETE,PATCH,POST,PUT,OPTIONS',
+ },
+ {
+ key: 'Access-Control-Allow-Headers',
+ value:
+ 'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version, network',
+ },
+ ],
+ },
+ ]
+ },
+}
+
+module.exports = nextConfig

packages/serverless-backend/package.json

@@ -0,0 +1,39 @@
+{
+ "name": "serverless-backend",
+ "version": "0.1.0",
+ "private": true,
+ "scripts": {
+ "vercel-build": "next build",
+ "dev": "next dev",
+ "build": "next build",
+ "start": "next start",
+ "lint": "next lint",
+ "pages:build": "npx @cloudflare/next-on-pages",
+ "pages:deploy": "npm run pages:build && wrangler pages deploy .vercel/output/static",
+ "pages:watch": "npx @cloudflare/next-on-pages --watch",
+ "pages:dev": "npx wrangler pages dev .vercel/output/static --compatibility-date=2023-12-18 --compatibility-flag=nodejs_compat"
+ },
+ "dependencies": {
+ "@ethersproject/hash": "^5.7.0",
+ "@unirep/core": "^2.0.1",
+ "dotenv": "^16.3.1",
+ "next": "14.0.4",
+ "react": "^18",
+ "react-dom": "^18",
+ "viem": "^2.0.2"
+ },
+ "devDependencies": {
+ "@cloudflare/next-on-pages": "^1.8.3",
+ "@types/node": "^20",
+ "@types/react": "^18",
+ "@types/react-dom": "^18",
+ "autoprefixer": "^10.0.1",
+ "eslint": "^8",
+ "eslint-config-next": "14.0.4",
+ "eslint-plugin-next-on-pages": "^1.8.3",
+ "postcss": "^8",
+ "tailwindcss": "^3.3.0",
+ "typescript": "^5",
+ "vercel": "^33.0.2"
+ }
+}