DEV Community

Jerry Musaga
Jerry Musaga

Posted on • Edited on

How to quickly create a React Starter template using Celo-composer.

Overview

With Celo-Composer, building fullstack dApps on celo blockchain network is extremely easy and quick. In this tutorial, you will learn how to

  • setup metamask
  • add Celo Alfajores Testnet network to metamask
  • fund your testnet account
  • generate a React.js template
  • run your frontend on localhost and connect wallet

A look at the output on localhost

Image description

Prerequisite

To fully follow up with this tutorial, you will need to have

  • Node or Nvm installed on your system
  • general understanding on running commands on the terminal
  • good knowledge on React

Setting up Metamask and connecting to Celo

I'd recommend going through this, 3-simple steps to connect your metamask wallet to celo for a detailed explanation to this, which is from the Celo documentation tutorials.

  • After setting up metamask extension, to easily connect to the Celo Alfajores network, go to chainlist which is a site that has a list of EVM networks.
  • Tick on the checkbox, Include Testnets and search for Celo Alfajores Tesnet. Connect your wallet and then select Add to Metamask.

Image description

  • To fund your wallet address, visit celo-faucet, copy your wallet address from metamask and paste it in the Account Address so that your account can get funded with Celo.

Generate React template

  • Open the terminal and paste this command npx @celo/celo-composer create This is a command line tool which will help us in quickly generating a template for dApp development and in this tutorial, we will be opting for React, which is the frontend framework we will be using.

Image description

  • After selecting React, we will be opting for Rainbowkit-celo which is a component that makes it easy for us to integrate wallet connection into any dApps.

Image description

  • After selecting Rainbowkit-celo, you can either opt for Hardhat or Truffle which will be for smart contract development or you could just opt for None.

Image description

  • Next, we will be selecting either No or Yes to creating a subgraph, which will help in querying data from the celo blockchain.

Image description

  • Next, You'll be providing a project name for the dApp and voila, your React template will be generated and you can start building your dApp.

  • On your terminal, navigate to your project's directory using this command cd [project-name]/packages/react-app and
    run yarn to install all the dependencies needed to run the application.
    When the installation is successful, you will get an output like this

Image description

  • Next up, run this command yarn run dev to start up the server in your localhost

Image description

Image description

Top comments (0)