What I did:
- Installed as per GitHub - onflow/kitty-items: Kitty Items: CryptoKitties Sample App
- Start up the project locally
- Opened up web app http://0.0.0.0:3001
- Clicked Login or Sign up
And then I was met with an empty gray screen
What I did:
And then I was met with an empty gray screen
- Start up the project locally
Just some clarification before going forward - did you run the project and the emulator?
Yes I did both these steps
npm run start:dev
flow project deploy --network emulator
~/code/crypto/flow/kitty-items master* ❯ npm run start:dev 09:31:15 AM
kitty-items@1.0.0 start:dev
docker-compose --env-file .env.dev --profile dev up -d --build
WARNING: The FUSD_ADDRESS variable is not set. Defaulting to a blank string.
Building api
[+] Building 9.8s (11/11) FINISHED
=> [internal] load build definition from Dockerfile.dev 0.0s
=> => transferring dockerfile: 172B 0.0s
=> [internal] load .dockerignore 0.0s
=> => transferring context: 2B 0.0s
=> [internal] load metadata for Docker 2.7s
=> [auth] library/node:pull token for registry-1.docker.io 0.0s
=> [internal] load build context 7.0s
=> => transferring context: 187.25MB 6.7s
=> [1/5] FROM Docker 0.0s
=> CACHED [2/5] WORKDIR /api 0.0s
=> CACHED [3/5] RUN npm install typescript 0.0s
=> CACHED [4/5] COPY ./api . 0.0s
=> CACHED [5/5] COPY ./cadence /cadence 0.0s
=> exporting to image 0.0s
=> => exporting layers 0.0s
=> => writing image sha256:5993593111a1fef844820bfa7ecba5a808db1ba2cae03e1ff39d8a34041839fe 0.0s
=> => naming to Docker 0.0s
Use ‘docker scan’ to run Snyk tests against images to find vulnerabilities and learn how to fix them
Building web
[+] Building 9.8s (9/9) FINISHED
=> [internal] load build definition from Dockerfile.dev 0.0s
=> => transferring dockerfile: 131B 0.0s
=> [internal] load .dockerignore 0.0s
=> => transferring context: 2B 0.0s
=> [internal] load metadata for Docker 1.2s
=> [1/4] FROM Docker 0.0s
=> [internal] load build context 8.4s
=> => transferring context: 212.69MB 8.3s
=> CACHED [2/4] WORKDIR /web 0.0s
=> CACHED [3/4] COPY ./web . 0.0s
=> CACHED [4/4] RUN npm i 0.0s
=> exporting to image 0.0s
=> => exporting layers 0.0s
=> => writing image sha256:1fb4c3d4f14fe8fbf0c57e04637b6fc60803bb45d93366645fa2ac6725df9e10 0.0s
=> => naming to Docker 0.0s
Use ‘docker scan’ to run Snyk tests against images to find vulnerabilities and learn how to fix them
Starting kitty-items_db_1 … done
Starting kitty-items_emulator_1 … done
Starting kitty-items_api_1 … done
Starting kitty-items_dev-wallet_1 … done
Starting kitty-items_web_1 … done
~/code/crypto/flow/kitty-items master* ❯ flow project deploy --network emulator 25s 09:31:47 AM
Deploying 5 contracts for accounts: emulator-account
FUSD → 0xf8d6e0586b0a20c7 (e3c23ddddda6b0425d41449b79a49ca96bcff8183148cc07d79b7a5e7fa84240)
Kibble → 0xf8d6e0586b0a20c7 (7af2c22ee057f0a9445ca1946861714d361da74da306ed8df2c197e06250013e)
NonFungibleToken → 0xf8d6e0586b0a20c7 (dfbcf287e8be5ad2c6798a11b5b01b3cf2ab9b4da60a23b76830aa3b00f00c5c)
KittyItems → 0xf8d6e0586b0a20c7 (ae69069f014419e9f41f9d1f1e7bec617f077be009feab90a1e5dbb22b1665b2)
NFTStorefront → 0xf8d6e0586b0a20c7 (f7c3072a29fa134b0ae8011a92e53db237d571f359d57bd26b218e5458268824)
All contracts deployed successfully
You’ll need to start the fcl-dev-wallet
which is another service that provides a wallet for your application when in development.
Currently you can check-out and run this project: GitHub - onflow/fcl-dev-wallet: A FCL Dev Wallet to be used with the Flow Emulator
(Ensure it’s running on port 8701)
We’re going to create a Docker image for this project (fcl-dev-wallet), so it can be run directly from Kitty-Items, this week, but for now you’ll need to run this project, as well as the flow emulator, alongside Kitty Items.
Hi Mackenzie,
1/ First, I ran kitty-items and the Flow emulator that came with its docker setup. I ran npm run start:dev
and then flow project deploy --network emulator
on GitHub - onflow/kitty-items: Kitty Items: CryptoKitties Sample App. Both commands were successful.
2/ Then, I stopped the kitty-items_dev-wallet-1 container as it was on port 8701.
3/ Then, I checked out and ran the fcl-dev-wallet project separately, ensuring I use port 8701 by changing the dev
script to "dev": "next dev -- -p 8701",
in package.json. I ran with npm run dev
4/ I opened localhost:8701 and saw
5/ I opened localhost:3001, clicked Login and saw an error in the fcl-dev-wallet logs
TX:ERROR Error
at Object.onEnd (/Users/eric/code/crypto/flow/fcl-dev-wallet/node_modules/@onflow/sdk/dist/sdk.js:1:8818)
at /Users/eric/code/crypto/flow/fcl-dev-wallet/node_modules/@improbable-eng/grpc-web/dist/grpc-web-client.js:1:24140
at /Users/eric/code/crypto/flow/fcl-dev-wallet/node_modules/@improbable-eng/grpc-web/dist/grpc-web-client.js:1:11457
at Array.forEach (<anonymous>)
at e.rawOnError (/Users/eric/code/crypto/flow/fcl-dev-wallet/node_modules/@improbable-eng/grpc-web/dist/grpc-web-client.js:1:11419)
at e.onTransportHeaders (/Users/eric/code/crypto/flow/fcl-dev-wallet/node_modules/@improbable-eng/grpc-web/dist/grpc-web-client.js:1:8996)
at NodeHttp.responseCallback (/Users/eric/code/crypto/flow/fcl-dev-wallet/node_modules/@improbable-eng/grpc-web-node-http-transport/lib/index.js:31:22)
at Object.onceWrapper (node:events:485:26)
at ClientRequest.emit (node:events:378:20)
at HTTPParser.parserOnIncomingClient (node:_http_client:636:27)
6/ I then checked kitty-items_api logs, and saw it’s running
Do the logs help at all in identifying what’s wrong?