Setting Up the Environment

To get started, create a new folder that will hold all the source code.

Next, create two subfolders, one called frontend, and one called backend.

Configuring the backend

The backend is a node.js application that uses the Golem-Base TypeScript SDK to communicate with a running golem-base op-geth node.

package.json

Start by creating a package.json file and add in the following:

{
  "name": "backend",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "tsc; cp ./private.key dist",
    "start": "node dist/index.js",
    "build-and-start": "npm run build && npm run start",
    "dev": "ts-node src/index.ts"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "type": "module",
  "dependencies": {
    "cors": "^2.8.5",
    "express": "^5.1.0",
    "golem-base-sdk": "^0.1.16",
    "tslib": "^2.8.1"
  },
  "devDependencies": {
    "@types/cors": "^2.8.19",
    "@types/express": "^5.0.3",
    "@types/node": "^24.0.13",
    "ts-node": "^10.9.2",
    "typescript": "^5.8.3"
  }
}

Now type:

npm install

to install the packages listed in the dependencies. Notice that we'll be using express for the API framework. Notice also we're using ES style modules, hence the type set to "module."

tsconfig.json

Now, in the same backend folder, create a file called tsconfig.json, which is the TypeScript configuration file. Place the following inside it:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "esModuleInterop": true,
    "outDir": "dist",
    "rootDir": "src",
    "resolveJsonModule": true
  },
  "include": ["src"]
}

This will configure TypeScript to look for source files in the folder called src, and to output the compiled JavaScrit to a folder called dist.

Next, create a folder inside backend called src. (We'll create the source files in the next few steps; for now, leave it empty.)

Tip: TypeScript will create the dist folder automatically, so you don't need to create it. Also

Optional: .gitignore

If you're planning to use git with your project, you'll want to use a .gitignore file. There's some flexibility here, but the following is what we recommend. Notice at the top of the file is private.key; this will hold the key file needed for connecting to an op-geth node.

# Additions for this project

private.key

# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*

# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage
*.lcov

# nyc test coverage
.nyc_output

# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# Snowpack dependency directory (https://snowpack.dev/)
web_modules/

# TypeScript cache
*.tsbuildinfo

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Optional stylelint cache
.stylelintcache

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variable files
.env
.env.*
!.env.example

# parcel-bundler cache (https://parceljs.org/)
.cache
.parcel-cache

# Next.js build output
.next
out

# Nuxt.js build / generate output
.nuxt
dist

# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and not Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public

# vuepress build output
.vuepress/dist

# vuepress v2.x temp and cache directory
.temp
.cache

# Sveltekit cache directory
.svelte-kit/

# vitepress build output
**/.vitepress/dist

# vitepress cache directory
**/.vitepress/cache

# Docusaurus cache and generated files
.docusaurus

# Serverless directories
.serverless/

# FuseBox cache
.fusebox/

# DynamoDB Local files
.dynamodb/

# Firebase cache directory
.firebase/

# TernJS port file
.tern-port

# Stores VSCode versions used for testing VSCode extensions
.vscode-test

# yarn v3
.pnp.*
.yarn/*
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions

# Vite logs files
vite.config.js.timestamp-*
vite.config.ts.timestamp-*

Head to Step 2.