{"id":19610784,"url":"https://github.com/onflow/scaffold-flow","last_synced_at":"2025-06-30T22:05:55.832Z","repository":{"id":103345926,"uuid":"588331209","full_name":"onflow/scaffold-flow","owner":"onflow","description":"🌊 forkable Flow dev stack focused on fast product iterations","archived":false,"fork":false,"pushed_at":"2023-02-20T15:26:23.000Z","size":616,"stargazers_count":5,"open_issues_count":8,"forks_count":1,"subscribers_count":29,"default_branch":"main","last_synced_at":"2025-04-27T22:33:00.684Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/onflow.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-01-12T21:42:50.000Z","updated_at":"2023-02-28T02:13:29.000Z","dependencies_parsed_at":null,"dependency_job_id":"4692dbdb-6c10-45fa-b474-576962b30f71","html_url":"https://github.com/onflow/scaffold-flow","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/onflow/scaffold-flow","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onflow%2Fscaffold-flow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onflow%2Fscaffold-flow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onflow%2Fscaffold-flow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onflow%2Fscaffold-flow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/onflow","download_url":"https://codeload.github.com/onflow/scaffold-flow/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onflow%2Fscaffold-flow/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262857262,"owners_count":23375490,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-11T10:33:25.817Z","updated_at":"2025-06-30T22:05:55.779Z","avatar_url":"https://github.com/onflow.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 👋  Flow Web dApp Scaffold\nWe've created this scaffold to showcase a simple web application that mints tokens that contain tweet like posts. \nYou are able to observe a web application setup using next.js and FCL (Flow javascript library). \nWe've also created the contracts and transactions this application need to function.\n\n**Here's an example of the application UI**\n\n![](./example_screen.png)\nAs you can see we can write different \"talks\" which in background are minted on the Flow network and displayed \nas a list. In order to mint this \"talks\" we use a development wallet, which you choose when \nsigning in the application. Because the FCL handles authentication for you, there's no \nadditional work required from a developer. If you are coming from Ethereum world you can \nthink of it as Metamask but no extension required because it works as a library integrated \ninto your application, making it work seamless. You can [read more about FCL and how it works here](https://developers.flow.com/tools/fcl-js#what-is-fcl).\n\n\n## 🔨 Getting Started\n\n### Prerequisites\n- [Flow-CLI v0.44+](https://developers.flow.com/tools/flow-cli/install) \n- [Node v18](https://nodejs.org/en/download/)\n\n### Components\n- Flow CLI contains a lot of utilities and tools you can use during development\n- [Flow Emulator](https://developers.flow.com/tools/emulator) is a simple version of a Flow network you run locally during development\n- [Flow Dev Wallet](https://github.com/onflow/fcl-dev-wallet) is a tool that simulates a wallet provider, which is then consumed by FCL (Flow library used in the web application)\n\nAll of the above components can be run using the Flow CLI. \n\n## 👨‍💻 Setup\n\n**1. Setup your project** (run in terminal)\n```bash \nflow setup {your project name} --scaffold\n```\nChoose the `Web Dapp using FCL` scaffold.\n\n_Here's an example_\n```\nflow setup my-project --scaffold\n\n? Which scaffold would you like to use:\n    Simple Cadence Project - Scaffold contains required folder structure as well as some example Cadence code.\n  ▸ Web Dapp using FCL - Simple demo application using next.js and FCL with provided Cadence contracts.\n```\n\n_Alternatively you can just clone the Github project to your machine_\n`git clone https://github.com/onflow/scaffold-flow.git`\n\n\n**2. Install required packages**\n```bash\nnpm install\n```\n\n## 🚧 Start Up\n\nYou can first run your application locally using the emulator and dev-wallet, \nany changes you make to the application will be updated automatically too. \nThere is another testnet network you can also use to deploy this application, but \nthat network is not hosted locally by you, but it's provided by Flow. So in order to run the \napplication there you will need to follow couple additional steps.\n\n### Local Emulator Deployment\n\n**1. Start Emulator and Dev Wallet**\n```bash\nflow emulator \u0026 flow dev-wallet\n```\n\n**2. Deploy Contracts**\n\nRunning dev command will automatically deploy and update application contracts.\n\n```bash\nflow dev\n```\n\n**3. Build Web Application**\n\nRunning this command will build your next.js application.\n```bash\nnpm run dev:local\n```\n**4. You're done!**\n\nOpen the application at http://localhost:3000\n\n---\n\n### Testnet Deployment\nIf you want to go further and deploy the dApp to our testnet you can proceed with the next steps.\n\n**1. Create a Testnet Account**\n\nRun the account create command and choose any name but pick the testnet network. \n\n```bash\nflow accounts create\n```\nThis is what you should see (the address and name will be different):\n```\n✔ Enter an account name: alice\n\n? Choose a network:\n    Emulator\n  ▸ Testnet\n    Mainnet\n    \n🎉 New account created with address 0x9e3251b6a0958efd and name alice on Testnet network.\n\nHere’s a summary of all the actions that were taken:\n - Added the new account to flow.json.\n - Saved the private key to testnet.pkey.\n - Added testnet.pkey to .gitignore.\n```\n\nAs written this created a new testnet account for us and saved the key to a separate file for improved security.\n\n**2. Deploy Contracts**\n\nRunning project deploy command will deploy application contracts to testnet. \n\n_💡 We are not using flow dev command, since that is meant to be used during rapid local development which shouldn't be done on testnet._ \n\nFirst we need to add a testnet deployment for our contract by running:\n```bash\nflow config add deployment\n```\nAnd choosing the testnet as a network, the account name we just created, and the contract that needs to be deployed:\n```\n? Choose network for deployment:\n    emulator\n    mainnet\n    sandboxnet\n  ▸ testnet\n  \n? Choose an account to deploy to:\n    ▸ alice\n    emulator-account\n    \n? Choose contract you wish to deploy:\n  ▸ BlockTalk\n  \n✔ testnet\n✔ alice\n✔ BlockTalk\n✔ No\n```\nAnd then run this command to deploy our just configured deployment:\n```bash\nflow project deploy --network testnet --update\n```\n\n**3. Build Web Application**\n\nRunning this command will build your next.js application. We must replace the address with \nthe account address we just created in the step 1. \n_You can look into flow.json if you cleared the output._\n```bash\nCONTRACT_ADDRESS={account address} npm run dev:testnet\n```\n\n**4. You are done!**\n\nOpen the application at http://localhost:3000\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fonflow%2Fscaffold-flow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fonflow%2Fscaffold-flow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fonflow%2Fscaffold-flow/lists"}