Create a basic Ethereum Dapp using the Ethereum Dapp Gatsby Starter

Introduction

One really simple way to get started with building an Ethereum Dapp is via Gatsby.js. Aside from the fact that Gatsby makes it simple to build static sites thanks to some basic quality-of-life improvements built on top of React.js, thanks to Gatsby starters—and the Ethereum Dapp starter in particular—getting up and running with Gatsby is super easy.

The Big Picture

  1. You’ll start by setting up a Rivet account if you haven’t already done so.

  2. Next, you’ll install all the necessary dependencies and configure them to use your Rivet endpoint.

  3. Finally, you’ll run your Gatsby starter, confirm it properly connects to your wallet and displays your Ethereum address.

1. Setting up Rivet

My Rivet endpoint: https://YourApiKey.eth.rpc.rivet.cloud/

If you see a URL above that does not contain “YourApiKey”, then you already have a Rivet account set up and you’re logged in. Nice work! Go ahead and skip to step 2.

If you don’t see a URL with your unique key in it, no worries! This will just take a moment:

First, navigate to the Rivet signup page.

When you get there, enter a nickname for your account and a valid email address to which you have access. Select submit.

Web3-savvy?

You can also create an account and top it up with credits via Web3 using the Login with Web3 button on the signup page.

Not sure what this is? Not to worry, just disregard this box for now. Pretty soon, this will make perfect sense.

On the next view, you’ll verify your email address using a code we sent to it when you selected submit. Check your email for a message from Rivet, copy the code, and paste it in.

Got it? Good.

Finally, acknowledge our terms of use—and if you have a promo code, don’t forget to add that too. (If you do forget, contact us at support@rivet.cloud and we’ll hook you up retroactively if you can tell us what the code was supposed to be.

Good to go? Great! Go ahead and hit submit, and voila! Your endpoint URL is:

https://YourApiKey.eth.rpc.rivet.cloud/

Still need help?

If you don’t see it, make sure you’re signed in. If you still don’t see it, please contact us at support@rivet.cloud and we’ll get to the bottom of it. If you recall it, please include the nickname you gave us when you signed up in your message.

Congratulations, you’re 1/3 of the way through this tutorial!

2. The Setup

First things first, you’ll need to install Gatsby. This can be accomplished simply by running the following command in your terminal:

$ yarn add gatsby-cli

Upon running that command, Gatsby will install itself. Super easy, right?

Next, you’ll need to initialize the appropriate Gatsby starter—in this case we’re going to use the Gatsby Ethereum Dapp Starter. First, make a directory named hello-rivet-gatsby and cd into it. Then run:

$ gatsby new gatsby-eth-dapp-starter https://github.com/robsecord/gatsby-eth-dapp-starter

The starter will install. Next, you’ll need to create a .env.development file. To do so, first cd into the project’s root directory, create a blank file, and add the following text to it:

GATSBY_ETH_JSONRPC_URL=https://YourApiKey.eth.rpc.rivet.cloud/
GATSBY_ETH_CHAIN_ID=1
GATSBY_FORTMATIC_APIKEY=__YOUR_FORTMATIC_API_KEY_HERE__
GATSBY_PORTIS_DAPP_ID=__YOUR_PORTIS_DAPP_ID_HERE__
GATSBY_UPORT_DAPP_NAME=__YOUR_UPORT_DAPP_NAME_HERE__
GATSBY_BITSKI_CLIENT_ID=__YOUR_BITSKI_CLIENT_ID_HERE__
GATSBY_SQUARELINK_DAPP_ID=__YOUR_SQUARELINK_DAPP_ID_HERE__
GATSBY_ARKANE_CLIENT_ID=__YOUR_ARKANE_CLIENT_ID_HERE__

While this starter supports Fortmatic, Portis, UPort, Bitski, Squarelink, and Arkane, integrating them is outside the scope of this tutorial, so just leave the placeholder text for now. If you like, you may return later and integrate them. For now, just save the file as .env.development.

Once that’s done, run the following to integrate your Rivet endpoint into the project:

$ yarn install

Congratulations, you’re ready to launch your starter!

3. The Grand Finale

It’s time to launch your starter and see it working! To do so, simply run:

$ yarn start

See it running in your terminal? Great!

Open your browser and navigate to http://localhost:8000/, and your starter should be running there. Select Ethereum Dapp, then Metamask, and connect when prompted by your Metamask extension. See your address? Fantastic.

Congratulations! You’ve done it!

Conclusion

As you’ve seen in this tutorial, with Gatsby and the Ethereum Dapp starter, you can get the bones of an Ethereum Dapp up and running in a flash! Once you’re this far, you can start adding components and building out whatever you can dream up!

In future tutorials, we’ll expand from here to help you grow your creative repertoire. In the meantime, you should check out the resources available in the rest of this doc site, at the Gatsby doc site, or the Github repository for the Ethereum Dapp Gatsby Starter and start dreaming up what you want to learn how to BUIDL.

Congratulations!! You’re now an Ethereum BUIDLer—welcome to the community!!

—❤️Rivet