How to deploy your first dApp on Beta-4 Fuel
September 29th, 2023

Welcome here guys, as you know Beta-4 was recently released and it means that it’s time to build our first program on Fuel!Actually, I am a coder-beginner so I created that guide so guys,who think it is extremely hard will find out that it is don’t!(At least write just a simple contract)

So before we start just one more clarification - I’ll be using a Linux and this guide is mostly Linux-oriented. You can just install Linux as a separate OS , or rent a server, or , like in my case, run a Virtual Machine and install Linux on it! The link to download Ubuntu is here - it is absolutely free so you don’t need to worry about it!

For virtual Machine I’m using a VMware workstation,you can use any VM you like!

So,enough words - lets action!

Open a terminal in Ubuntu

And now we will be pasting commands step-by-step

1.1 First of all we need to upgrade and install git

sudo apt update && sudo apt upgrade -y

Then type:

sudo apt-get install git-all

Press Y

Then,to make next steps work out,let’s install curl

sudo apt-get install curl

1.2 Now let’s install Rust Toolchain

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
Press 1
Press 1

Then type

source "$HOME/.cargo/env"

Let’s delete the old files

cd $home && rm -rf .fuel && rm -rf .forc && rm -rf .fuelup && rm -rf fuel-project

Then, let’s install install the Fuel toolchain.

curl --proto '=https' --tlsv1.2 -sSf https://install.fuel.network/fuelup-init.sh | sh

Press Y

After that you need to close and open you Terminal again

1.3 Let’s update and set beta-4 as a default:

fuelup self update
fuelup toolchain install beta-4
fuelup default beta-4
Make sure you have something like that after typing that commands
Make sure you have something like that after typing that commands


*You can check your fuelup version

fuelup --version

1.4 Now let’s build your first Sway Project!

Now we create the folder with our project

mkdir fuel-project

And we enter that folder

cd fuel-project


Then we create a contract project using forc:

forc new counter-contract


Then type

nano counter-contract/src/main.sw

We could actually use VS Code or any other IDE but I decided that the best way is to just open a file from terminal.

So now delete everything that is inside the file

DELETE THIS
DELETE THIS

And Paste this:

contract;
 
storage {
    counter: u64 = 0,
}
 
abi Counter {
    #[storage(read, write)]
    fn increment();
 
    #[storage(read)]
    fn count() -> u64;
}
 
impl Counter for Contract {
    #[storage(read)]
    fn count() -> u64 {
        storage.counter.read()
    }
 
    #[storage(read, write)]
    fn increment() {
        let incremented = storage.counter.read() + 1;
        storage.counter.write(incremented);
    }
}

Every Sway file must start with a declaration of what type of program the file contains; here, we've declared that this file is a contract.In our case as you can see this is contract;

Once you’ve pasted it:

Press Ctrl + X

Then Y

Then Enter

1.5 Build your contract

Move to the folder of your created project

cd counter-contract

Now it’s time to build your contract

forc build

I’ll just leave you a link to the official guide - where you can check out how to test your contract and how to check out thee view of your project

1.6 Setup or Import your wallet

  • If you already have a fuel-wallet(like in my case - btw you can set up it here):

Just write that command

forc-wallet import

You’ll be asked to write 12 words - your seed and create a password to protect your wallet.

Then write

forc wallet account new

And one more time you’ll be asked to write a password that you’ve created.

  • If you don’t have an account:

You can create a new wallet with the command below:

forc wallet new

Create a password to protect your wallet and make sure to save your seed.

Next, create a new wallet account with:

forc wallet account new



By that command you can check list of your wallets:

forc wallet accounts
As you can see I only have 1 account with that address
As you can see I only have 1 account with that address

1.7 Faucet some funds

To deploy your contract on the network - you need some Test Eth.
You can faucet it here.

1.8 Deploy Contract

And now it’s finally time to deploy your contract on the Fuel Network

forc deploy --testnet

You’ll be asked to enter your password again

Once you’ve entered a password,you’ll see your accounts(in my case there is only 1 account - its number is 0 )

Select number of your account and then type y

And magic - you’ve done it!!!

You can see your Contract ID - which you need to save here as we will need it in the next steps!But I want to congratulate you - you’ve deployed your first contract on Beta-4.

1.9 Check our contract in the block explorer

You can see your contract in the block explorer here (if it doesn’t appear - don’t worry,explorer doesn’t show most of the transactions right now but the team I’m sure is working on it!

***********For now you’ve completed the first part - you’ve created your own smart contract,in the next steps we will create a Frontend for your dApp!***********

Anyway don’t forget to tweet that you’ve built a smart-contract on Fuel,tagging @fuel_network

Frontend part

Before we start,make sure to install Fuel wallet on your browser

2.1 Install NodeJS

To check out your JS version

node --version


The best version of NodeJS for now is 18,if you have it you can freely move to the step 2.3,if you don’t - let’s solve it!

There will be quite a lot of commands,but just paste them one after another.

If you have another versions,you need to uninstall NodeJS beforehand

sudo apt-get remove nodejs

Press Y

sudo apt-get purge nodejs

Then write

sudo apt-get autoremove

Press Y

sudo rm /etc/apt/keyrings/nodesource.gpg

And then write:

sudo rm /etc/apt/sources.list.d/nodesource.list


You’ve successfully uninstall NodeJS,and now let’s download NodeJS 18

2.2 Download NodeJS 18

NODE_MAJOR=18
sudo apt-get update
sudo apt-get install -y ca-certificates curl gnupg
sudo mkdir -p /etc/apt/keyrings
curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | sudo gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg
echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_${NODE_MAJOR}.x nodistro main" | sudo tee /etc/apt/sources.list.d/nodesource.list
sudo apt-get update
sudo apt-get install -y nodejs

You’ve install NodeJS and now let’s check that we have the right version:

node --version

2.3 Setting up Frontend


Move to the fuel-project folder

cd $home && cd fuel-project

Then write

npx create-react-app frontend --template typescript

Press Y

Now let’s head to the frontend folder

cd frontend

And now install fuels and @fuel-wallet/sdk

npm install fuels@0.60.0 @fuel-wallet/sdk@0.13.0 --save


As I’ve said previously you can just use VS code or any other IDE,I’ll edit it in terminal

nano tsconfig.json

Replace the previous code and paste that one

{
  "compilerOptions": {
    "types": ["@fuel-wallet/sdk"],
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

As usual:


Press Ctrl + X

ThenY

ThenEnter

After that run this:

npx fuels typegen -i ../counter-contract/out/debug/*-abi.json -o ./src/contracts


And after that,you should see something like that:

If you see some kind of errors,feel free to visit Fuel Forum - it is more likely someone already faced with the same issue!

2.4 Modify your dApp

Open-up:

nano src/App.tsx


And in the code below, replace all the :

CONTRACT_ID = the address of the contract you just deployed on step 1.8

Code:

import { useEffect, useState } from "react";
import "./App.css";
// Import the contract factory -- you can find the name in index.ts.
// You can also do command + space and the compiler will suggest the correct name.
import { CounterContractAbi__factory } from "./contracts";
 
// The address of the contract deployed the Fuel testnet
const CONTRACT_ID =
  "0x...";
 
function App() {
  const [connected, setConnected] = useState<boolean>(false);
  const [account, setAccount] = useState<string>("");
  const [counter, setCounter] = useState<number>(0);
  const [loaded, setLoaded] = useState(false);
 
  useEffect(() => {
    setTimeout(() => {
      checkConnection();
      setLoaded(true);
    }, 200)
    if (connected) getCount();
  }, [connected])
 
  async function connect() {
    if (window.fuel) {
      try {
        await window.fuel.connect();
        const [account] = await window.fuel.accounts();
        setAccount(account);
        setConnected(true);
      } catch (err) {
        console.log("error connecting: ", err);
      }
    }
  }
 
  async function checkConnection() {
    if (window.fuel) {
      const isConnected = await window.fuel.isConnected();
      if (isConnected) {
        const [account] = await window.fuel.accounts();
        setAccount(account);
        setConnected(true);
      }
    }
  }
 
  async function getCount() {
    if (window.fuel) {
      const wallet = await window.fuel.getWallet(account);
      const contract = CounterContractAbi__factory.connect(CONTRACT_ID, wallet);
      const { value } = await contract.functions.count().simulate();
      setCounter(value.toNumber());
    }
  }
 
  async function increment() {
    if (window.fuel) {
      const wallet = await window.fuel.getWallet(account);
      const contract = CounterContractAbi__factory.connect(CONTRACT_ID, wallet);
      // Creates a transactions to call the increment function
      // because it creates a TX and updates the contract state this requires the wallet to have enough coins to cover the costs and also to sign the Transaction
      try {
        await contract.functions.increment().txParams({ gasPrice: 1 }).call();
        getCount();
      } catch (err) {
        console.log("error sending transaction...", err);
      }
    }
  }
 
  if (!loaded) return null
 
  return (
    <>
      <div className="App">
        {
          connected ? (
            <>
              <h3>Counter: {counter}</h3>
              <button style={buttonStyle} onClick={increment}>
                Increment
              </button>
            </>
          ) : (
            <button style={buttonStyle} onClick={connect}>Connect</button>
          )
        }
      </div>
    </>
  );
}
 
export default App;
 
const buttonStyle = {
  borderRadius: "48px",
  marginTop: "10px",
  backgroundColor: "#03ffc8",
  fontSize: "20px",
  fontWeight: "600",
  color: "rgba(0, 0, 0, .88)",
  border: "none",
  outline: "none",
  height: "60px",
  width: "400px",
  cursor: "pointer"
}


And we are amost there!

2.5 Run your app

Now let’s go to the root to open port 3000

sudo su -

Open port 3000

ufw allow 3000/tcp

Then go out from root

exit

And finallllllly run your program!

npm start


And now make sure that you localhost will be opened and you can finally test your app!!!

Counter check

If you have that button it means that everything works fine!
If you have that button it means that everything works fine!

So that was it guys,thanks everyone for reading,I hope you’ve made that far and congratulations on deploying your first smart contract on Beta-4!

One more time I remind you, that don’t forget to tweet that you’ve built a smart-contract on Fuel, tagging @fuel_network

See you in the next guide! <3

Subscribe to alexprimak
Receive the latest updates directly to your inbox.
Mint this entry as an NFT to add it to your collection.
Verification
This entry has been permanently stored onchain and signed by its creator.
More from alexprimak

Skeleton

Skeleton

Skeleton