Ganache: Create a dApp Hosted on IPFS

Learn how to create a dApp hosted on IPFS.

What is a dApp?

Decentralized applications, known as dApps, are open-source applications developed using cryptocurrency and smart contracts, then deployed on a blockchain network.

Read below to learn how to create a dApp hosted on IPFS.

Prerequisites:

• Download and install Truffle and Truffle Contract.

• Download and install Ganache.

• Download and install Vite (VanillaJS).

• Download and install TailwindCSS.

• A cryptowallet, such as MetaMask.

• Sign up for a free Filebase account.

• Have your Filebase Access and Secret Keys. Learn how to view your access keys here.

1. First, we need a Filebase IPFS bucket.

To do this, navigate to console.filebase.com. If you don’t have an account already, sign up, then log in.

2. Select ‘Buckets’ from the left side bar menu, or navigate to console.filebase.com/buckets.

Select ‘Create Bucket’ in the top right corner to create a new bucket.

3. Enter a bucket name and choose the IPFS storage network to create the bucket.

Bucket names must be unique across all Filebase users, be between 3 and 63 characters long, and can contain only lowercase characters, numbers, and dashes.

4. Next, download and install S3FS-FUSE on a Linux or macOS system.

5. Set up an Access Key file for use with S3FS-FUSE.

Set up a credentials file for S3FS at ${HOME}/.passwd-s3fs. You will need to save your Filebase Access and Secret keys to this file and give it owner permissions. You can do so with the following commands:

echo ACCESS_KEY_ID:SECRET_ACCESS_KEY > ${HOME}/.passwd-s3fs

chmod 600 ${HOME}/.passwd-s3fs

ACCESS_KEY_ID is your Filebase Access key, and SECRET_ACCESS_KEY is your Filebase Secret key. For more information on Filebase access keys, see here.

6. Mount your bucket.

You can mount a Filebase IPFS bucket with the command:

s3fs mybucket /path/to/mountpoint -o passwd_file=${HOME}/.passwd-s3fs -o url=https://s3.filebase.com

• mybucket: name of your Filebase bucket

• /path/to/mountpoint

7. Now, navigate into the mounted Filebase bucket.

cd /path/to/mounted/bucket

8. Next, git clone the quick dApp template:

git clone https://github.com/MatthieuScarset/quick-dapp.git

9. Navigate into the newly cloned directory:

cd quick-dapp

10. Start the dApp with the command:

yarn start

11. Once started, a browser window will open at localhost:3000. You’ll be prompted to authorize the connection to your cryptowallet:

After authorizing your wallet, you will see the following default dApp screen:

13. To use the dApp, retrieve the Ganache wallet address from the ganache.json file:

Note: Do not use this app in a production environment!

cat ganache.json

{"addresses":{"0x90f8bf6a479f320ead074411a4b0e7944ea8c9c1":"0x90f8bf6a479f320ead074411a4b0e7944ea8c9c1"},"private_keys":{"0x90f8bf6a479f320ead074411a4b0e7944ea8c9c1":"0x4f3edf983ac636a65a842ce7c78d9aa706d3b113bce9c46f30d7d21715b23b1d"}}

14. Open your wallet provider and select ‘Import Account’:

15. Then select ‘JSON File’ and choose the ganache.json file from the quick-dapp directory.

16. Next, you can customize the backend of the app by creating custom smart contracts in the /contracts folder.

To test your smart contracts, use the yarn test command.

Then, to redeploy your dapp with your new smart contracts, use yarn migrate, yarn stop && yarn start.