Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/onflow/flow-playground
Flow Playground front-end app 🤹♂️
https://github.com/onflow/flow-playground
dapps javascript onflow react smart-contracts
Last synced: 1 day ago
JSON representation
Flow Playground front-end app 🤹♂️
- Host: GitHub
- URL: https://github.com/onflow/flow-playground
- Owner: onflow
- License: apache-2.0
- Created: 2020-04-20T19:25:58.000Z (over 4 years ago)
- Default Branch: staging
- Last Pushed: 2024-09-17T19:11:38.000Z (about 2 months ago)
- Last Synced: 2024-09-18T03:10:54.243Z (about 2 months ago)
- Topics: dapps, javascript, onflow, react, smart-contracts
- Language: TypeScript
- Homepage: https://play.flow.com
- Size: 11.6 MB
- Stars: 115
- Watchers: 33
- Forks: 26
- Open Issues: 33
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: CODEOWNERS
- Security: .github/security-scann.yaml
Awesome Lists containing this project
README
# Flow Playground
The Flow Playground is the best way to learn and try Cadence. For newcomers to Flow,
the [Flow Developer Documentation](https://docs.onflow.org) includes a guide on how to use the Playground.
## Philosophy
### How It's Built
We built the Flow Playground as a static website or typical "JAM stack" website because of these properties:
- Portability. It is easy to move a static website GUI between platforms if desired
- We want to have the ability to deploy the Playground on peer-to-peer networks like IPFS or DAT
- Fast build and deploy cycles
- We want to maximize the amount of potential contributions
### What is the Playground?
We want the Playground to have features that help you build on Flow. We also want to balance functionality with learning.
The Playground is a learning tool first and an awesome development tool second, although the two go hand-in-hand.
## Contributing
### Read the [Contribution Guidelines](CONTRIBUTING.md)
### Git Workflow
- Use merge squashing, not commit merging [eg. here](https://blog.dnsimple.com/2019/01/two-years-of-squash-merge/). Squash merge is your friend.
- The `staging` branch is the base branch and contains the code deployed at https://play.staging.onflow.org.
## Developing
### Pre-requisites
You'll need to have Docker installed to develop.
### Installation
Clone the repo
```shell script
git clone [email protected]:onflow/flow-playground.git
```
Install dependencies
```
npm install
```
Rename `.env.local` to `.env`
Start the API (Flow Emulator and services)
```
docker run -e FLOW_DEBUG=true -e FLOW_SESSIONCOOKIESSECURE=false -p 8080:8080 gcr.io/dl-flow/playground-api:latest
```
Start the React app
```
npm run start
```
✨ The Playground is running on localhost:3000 ✨
If you are using VSCode, you can use this debugging config (works with workspaces)
```
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch",
"type": "chrome",
"request": "launch",
"port": 9229,
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}/src",
"sourceMaps": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*",
"webpack:///./~/*": "${workspaceFolder}/node_modules/*",
"webpack:///./*": "${webRoot}/*",
"webpack:///*": "*"
},
"trace": true
}
]
}
```
## Deployment
The runbook contains details on [how to deploy the Flow Playground web app](RUNBOOK.md).