Are You Using AI In Your Job?

We want to understand the real-world applications of AL and ML in business and the impact it will have on all our jobs.

Want to help? Complete the survey, your insights could make a big difference. It will just take one minute.
You'll be the first to get access to the final report.-->

How To Connect The Remix IDE To Hardhat For Ethereum Contract Development

Bobby Gill | January 18, 2022

The web-based Remix IDE is the go-to development editor for those looking to develop and test remix Ethereum contracts.

However, while Remix is an excellent tool for developing Ethereum contracts, under the hood, it has some limitations, mainly because the Ethereum test network it uses to run contracts is a blackbox running inside a virtual machine in the browser.

Given the local test network runs in the browser, it is difficult to monitor the properties of that blockchain, such as which transactions are running or to configure the actual properties of the local chain for advanced testing.

Further, some developers (ie. me) don’t really like the coding experience of a web-based IDE like Remix and want to use a local editor like Visual Studio Code alongside a locally running blockchain network like Hardhat or Truffle’s Ganache to actually develop our web3 apps. At the same time, we don’t want to lose the incredibly powerful testing and deployment experience that Remix provides.

In this article, I will walk through the steps of bringing these two worlds together and show you how to configure the Remix IDE to compile contracts using Hardhat and then deploy them to a locally running Hardhat test network.

What is the Remix IDE?

Remix is a web-based integrated development environment (IDE) created by the Ethereum foundation to make developing and testing Ethereum contracts written in the Solidity programming language a snap.

Remix is a very powerful IDE, as it supports linting, and debugging, in addition to providing fantastic testing tools that make it a snap to deploy contracts to a test blockchain network and then make interacting with those contracts a breeze.

Within Remix, once you deploy a Contract to the test network, you are then able to send transactions and interact with a Contract all through a dynamic UI that reads a Contract’s metadata and exposes each input parameter as a UI control and allowing you to easily select various test accounts to use to execute functions on the method.

What is Hardhat?

Hardhat is a locally installed development environment, that comes with its own Ethereum test network, that aims to simplify the deployment and testing of Solidity-based contracts, especially when compared to the long established Truffle/Ganache set of tools.

Ethereum Hardhat isn’t an IDE, meaning you still need to use something like Visual Studio Code to write your code in, however Hardhat provides the local runtime for deploying that code and testing it. One of the big advantages of using something like Hardhat is that it is designed to make debugging a lot easier, as it exposes complete stack traces and console logs when errors happen, something that both Remix and Truffle don’t do as well.

However, a major drawback to Hardhat is that all interaction with the local test network is done through a CLI which makes it extremely cumbersome to interact with the test network.

What if you could leverage the Remix IDE’s fantastic testing tools alongside a development workflow that leverages an editor like Visual Studio Code and a local blockchain runtime like

Hardhat?

Connecting the Remix IDE to Hardhat

Here are the steps to connect the Remix IDE to use a locally running Hardhat test network. The following commands assume you are running an Ubuntu terminal. However, that doesn’t mean you need to be running on an Ubuntu machine. I’ve tested and used these commands on Windows 10’s fantastic Linux Subsystem running an Ubuntu image.

  • On your development machine, install the remixd npm package globally (or if you aren’t the -g type, in the root folder containing your Contract project): npm install -g @remix-project/remixd
npm install -g @remix-project/remixd
  • Navigate to the root of your project (wherever your hardhat.config.js is located) and share it with the Remix IDE through the following command: remixd -s <path to your root> –remix-ide https://remix.ethereum.org
remixd -s <path to your root> --remix-ide https://remix.ethereum.org
  • In a new terminal window, launch the local Hardhat test node: npx hardhat node
npx hardhat node
  • Open the Remix IDE, under the File Explorer, click “Connect to Localhost”. This will bring up a prompt warning you this feature is in Alpha, click “Connect” on it. At this point in time if you switch back to the terminal window running Hardhat, you should see a flurry of commands being run that are coming from Remix.

  • In Remix, under the Solidity Compiler options window, check the option to enable “Hardhat Compilation”.

  • Finally, in the Remix plugins menu, search for the plugin named “Hardhat Provider” and click “Activate”.
  • Go back to the “Deploy & Run Transactions” window in Remix and now under environment select “Hardhat Provider”. At this point you can now deploy your contract to the Hardhat node running on your machine and then be able to send commands to the contract through Remix!

Bobby Gill
Co-Founder & Chief Architect at BlueLabel | + posts

Blue Label Labs Is Hiring

We are looking for exceptional people to join our exceptional team and build great things together.

See Our Current Open Positions