Gitpod x Blockchain
Tags: blockchain, thegraph, ipfs
Published: 2022-07-07 17:25:43

Save your hours for **blockchain** development by removing hard setup on **Gitpod**.

First lets see this repo [StoreFront_contracts](https://github.com/MyriadFlow/StoreFront_contracts)
This project is build with [hardhat](https://hardhat.org/) and also has [TheGraph](https://thegraph.com/) powered indexer in subgraph.
The project provides NFT based smart contract like **ERC721** build on top of **openzeppelin** contracts.

Now lets assume this is your project and you want your co-worker or friend to start with it, well then he can right?

Nope, that's not that easy.
Try to construct the steps required to do the steps.

## Like,
**Step 1** - Clone (Yeaaaaah!)
**Step 2** - Install packages (You have npm right? 😏)
```bash
om@linux-pc:/# npm
bash: npm: command not found
om@linux-pc:/# 
```
**Step 3** - Install node, npm and `npm i` (How come you don't have npm 
😔)
**Step 4** - Start local ethereum node
```bash
npm install -g ganache-cli && ganache-cli -h 0.0.0.0 -m "$MNEMONIC"
```

### Ooof thats going to take time and with another such painful 4-5 steps.

---

## How to fix this?

Easy, just use **gitpod**.

Try going to this [link](https://gitpod.io/#https://github.com/MyriadFlow/StoreFront_contracts) now and see the magic, everything should be up and running.

Now new window should open,
just append `subgraphs/name/TheLazarusNetwork/MyriadFlow` to url and hit `**Enter**`

Here you can write any graphQL queries and get the needed data.
For example try 
```
{
  tokens{
    id
    metaDataUri
  }
}
```

Now try changing scripts/deploy.ts line 48 to 
```ts
 await creatify.createArtifact("https://ipfs.infura.io/ipfs/itworks")
```
By the way this field is for **ipfs** hash, `itworks` is not valid ipfs hash it is just used here for testing.

Now check your terminal,
![Terminal after changes to code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7m0naz2efvrd9cft05vu.png) everything should be redploying live and then you can rerun the query and see that the new ipfs hash is there. Its like live reloading in blockchain development, isn't it?

---

## How is that happening?
Again easy, just write **gitpod** config, like provide initial scripts, start up scripts and custom docker image, like we did that in our repo
```yaml
---
image:
  file: .gitpod.Dockerfile
ports:
  - name: Graph query
    port: 8000
    visibility: private
    onOpen: open-browser

tasks:
  - init: |
      npm install
      cd subgraph && yarn install && cd -
    command: gp sync-done depinit
  - name: Ethereum Node
    command: ganache-cli -h 0.0.0.0 -m "$MNEMONIC"
  - name: Graph Node
    command: |
      cd /home/gitpod/graph-docker/graph-node/docker
      docker-compose up -d
      sleep 10
      gp sync-done graphnode
  - name: Create deploy
    command: |
      gp sync-await depinit
      gp sync-await graphnode
      gp await-port 8020
      cd subgraph && yarn create-local && cd -
      gp sync-done graphdeploy
  - name: Smart contract
    command: |
      gp sync-await depinit
      gp sync-await graphdeploy
      gp sync-await graphnode
      gp await-port 8020
      ./watch.sh

vscode:
  extensions:
    - dbaeumer.vscode-eslint
    - graphql.vscode-graphql
    - juanblanco.solidity
```

Why not gave it a try with your own blockchain project, there is whole easy documentation https://www.gitpod.io/docs

Also you can contact [me](https://www.linkedin.com/in/ommore/) and join discord [server](https://discord.com/invite/gitpod).

Happy coding 👋