DEV Community

Cover image for From Remix to Hardhat: What Changes When You Go Pro
Srashti
Srashti

Posted on

From Remix to Hardhat: What Changes When You Go Pro

#javascript #web3 #programming #learning

Remix spoiled me.

Open browser. Write code. Compile. Deploy. No installation, no config files, no "why is this not working" at 11pm.

Hardhat is the opposite of that. And honestly? That's the point.

Why leave Remix at all

Remix is great for learning. It is genuinely bad for building anything real.

You can't version control it properly. You can't write proper automated tests. You can't integrate it with a frontend easily. Every real Web3 project — the ones actually shipping to mainnet — uses something like Hardhat or Foundry.

So if the crowdfunding DApp is going to be a real thing and not just a browser tab, it has to move out of Remix.

This is the "going pro" moment. It's also the first moment things stopped being smooth.

The Node version trap nobody warns you about

Here's the thing that cost me actual time before I even wrote a line of contract code.

Hardhat needs a recent Node.js version. If you're running an older version — anything below Node 20 — newer Hardhat versions will either refuse to install properly or throw confusing errors that have absolutely nothing to do with the real problem.

You'll see errors about modules, about syntax, about things that sound like your code is broken. It's not your code. It's your Node version.

Check yours first:

node -v
Enter fullscreen mode Exit fullscreen mode

If you're below v20, update before doing anything else. I'm using nvm (Node Version Manager) to handle this because switching Node versions between projects is just a fact of life in this ecosystem now.

nvm install 20
nvm use 20
Enter fullscreen mode Exit fullscreen mode

Save yourself the hour I lost. Check this before you touch Hardhat at all.

Actually installing Hardhat

Once Node is sorted, this part is simple.

mkdir crowdfund-dapp
cd crowdfund-dapp
npm init -y
npm install --save-dev hardhat
Enter fullscreen mode Exit fullscreen mode

Then initialize the project:

npx hardhat init
Enter fullscreen mode Exit fullscreen mode

This gives you options — pick the JavaScript project (TypeScript is great too, but one new thing at a time). It'll ask to install some dependencies. Say yes.

The config file that doesn't always behave

Here's the second honest problem.

Hardhat creates a hardhat.config.js file automatically. Sometimes it generates clean. Sometimes — depending on the version, the Node setup, or honestly just bad luck — it doesn't set up correctly, and you get errors when you try to compile.

If that happens to you, don't panic and don't assume you broke something fundamental. Just rewrite the config manually. Here's a clean baseline that works:

require("@nomicfoundation/hardhat-toolbox");

/** @type import('hardhat/config').HardhatUserConfig */
module.exports = {
  solidity: "0.8.20",
  paths: {
    sources: "./contracts",
    tests: "./test",
    cache: "./cache",
    artifacts: "./artifacts",
  },
};
Enter fullscreen mode Exit fullscreen mode

Make sure the Solidity version here matches the pragma solidity line in your contract. Mismatch between these two is one of the most common compile errors beginners hit, and the error message doesn't always make that obvious.

Setting up the project structure

Hardhat expects a specific folder structure:

crowdfund-dapp/
├── contracts/
│   └── CrowdFund.sol
├── test/
├── scripts/
└── hardhat.config.js
Enter fullscreen mode Exit fullscreen mode

Drop the contract we wrote in the last post into contracts/CrowdFund.sol. Exactly as written before — createCampaign, contribute, withdraw, refund, all of it.

Compiling for the first time

This is the moment of truth.

npx hardhat compile
Enter fullscreen mode Exit fullscreen mode

If everything's set up right, you'll see something like:

Compiled 1 Solidity file successfully
Enter fullscreen mode Exit fullscreen mode

If you see red text instead — read the actual error, not just the first line. Most Hardhat compile errors are one of these three things:

  1. Solidity version mismatch — your pragma line and your config don't agree
  2. Missing semicolon or bracket — Solidity is strict, unlike JS where you can get away with a lot
  3. Node version issue — back to the trap from earlier. If the error looks unrelated to your actual code, suspect this first

What compiling actually does

When this succeeds, Hardhat generates an artifacts folder. Inside it sits the compiled bytecode and the ABI (Application Binary Interface) — basically the instruction manual that tells anything talking to this contract what functions exist and what they expect.

This is the same ABI we'll eventually feed into Web3.js so the React frontend can actually talk to this contract. Compiling isn't just "checking for errors" — it's generating the exact files the rest of the DApp depends on.

The honest difference from Remix

In Remix, compiling is instant and invisible. You don't think about Node versions, config files, or folder structures. It just runs.

Hardhat makes you own all of that. More setup, more things that can break, more moments of staring at an error message that doesn't explain itself.

But here's what you get in return — a project that's actually testable, versionable, and deployable to a real network in a real, repeatable way. Remix can't give you that.

This is the trade every Solidity developer makes eventually. Comfort for control.

What's next

Contract is compiled. Files are generated. Project structure exists.

Next up — actually writing tests. Because a contract that compiles isn't a contract that works. Those are two very different claims, and the gap between them is where bugs live.

We're going to deliberately try to break this thing before anyone else gets the chance to.

I'm Srashti Gupta, building in the Web3 space. I write about real builds, real setup headaches, and blockchain development from scratch. Let's connect on LinkedIn.

Top comments (0)