npx --yes gitpick ithacaxyz/porto/tree/main/examples/standalone porto-standalone && cd porto-standalonebuild
docker buildx build --tag porto-standalone --file Dockerfile . --no-cache --progress=plain --tag porto-standalonerun
docker run --publish 3000:3000 --rm -it porto-standalone:latestonce done, visit
visit http://localhost:3000
| FROM node:lts-bookworm-slim AS builder | |
| RUN apt-get --yes update && apt-get --yes install \ | |
| curl \ | |
| git \ | |
| && rm -rf /var/lib/apt/lists/* | |
| WORKDIR /app | |
| RUN git clone https://github.com/ithacaxyz/porto.git . | |
| RUN corepack enable && corepack prepare pnpm --activate && pnpm install | |
| RUN pnpm dlx tsdown@latest src/index.ts --sourcemap --target es2020 --format esm --shims --platform browser | |
| COPY index.html ./dist/index.html | |
| FROM node:lts-bookworm-slim AS runner | |
| WORKDIR /app | |
| COPY --from=builder /app/dist ./dist | |
| EXPOSE 3000 | |
| CMD ["npx", "--yes", "serve@latest", "dist"] |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <title>gm</title> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| </head> | |
| <body> | |
| <script type="module"> | |
| import { | |
| Porto | |
| } from './index.js' | |
| // | |
| const porto = Porto.create() | |
| // | |
| const blockButton = document.querySelector('button#get-block') | |
| const pBlock = document.querySelector('p#block') | |
| blockButton.addEventListener('click', event => { | |
| porto.provider.request({ | |
| method: 'eth_getBlockByNumber', | |
| params: ['latest', false] | |
| }).then(result => { | |
| console.log(result) | |
| pBlock.textContent = result.number.toString() | |
| }) | |
| }) | |
| // | |
| const connectButton = document.querySelector('button#connect') | |
| const pConnect = document.querySelector('p#connect') | |
| connectButton.addEventListener('click', event => { | |
| porto.provider.request({ | |
| method: 'wallet_connect', | |
| params: [{}] | |
| }).then(result => { | |
| console.log(result) | |
| const [account] = result.accounts | |
| pConnect.textContent = account.address | |
| }) | |
| }) | |
| </script> | |
| <button id="get-block">get block</button> | |
| <p id="block">block...</p> | |
| <button id="connect">connect</button> | |
| <p id="connect">address</p> | |
| </body> | |
| </html> |