Watchman Zēk
9 min readNov 19, 2023

--

How To Deploy your First Contract and DApp On Fuel Network Beta 4

Fuel is an Execution Layer for Modular Network. Deploying Contract is an important puzzle in the game.

However, to deploy contract needs some systems requirements.

In this case we don’t need much

30Gb memory

2–4 core

4 gb Ram

Should be enough

However, this can be run on local machine (Personal Computer). I will be using VPS instead, it is much safer that way and recommended.

Therefore, You will need a VPS service. I will recommend three VPS Service

1. Kamatera — Free for the first 1 month (credit card needed for activation — still free )

2. VPS Dime — Lowest package cost $7. It is more than enough for the task

3. Fast host — It is good host and offer one of the best service. Some packages are more than enough with only $1 — $5 for the first few months with better upgrades . Check for the Sever of the Month for cheapest option.

We will be using Linux and Ubuntu — Available with the aforementioned Servers.

Let’s assume you’ve gotten your VPS ready.

You will need your VPN and Password to login to your teminal. Preferably I will be using Termius on mobile Android.

You can choose to use Termius on Mobile or Desktop. Takes the same process

So Let’s get started. After successfully logging into your terminal.

Follow the instructions and copy necessary codes respectively.

Firstly , We will upgrade and install git

Note : Always press enter or Action Key to move to the next action

Paste this code then enter

sudo apt update && sudo apt upgrade -y

Then Copy this

sudo apt-get install git-all

Next Command, Press Y

Install Curl

sudo apt-get install curl

Now, We are getting busy. It’s going to be a long one 🕐

✓ Rust Tool Chain Installation

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

Press 1 then Enter,

Wait for Installation to Complete

Next Step, past this

source "$HOME/.cargo/env"

We will be deleting Old Files

Paste this

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

✓ Fuel Tool Chain Installation

Paste This,

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

Then Press y

Now Close the the terminal and Restart again

Set beta-4 as a default

Paste this in the teminal

fuelup self update

Then Paste this

fuelup toolchain install beta-4

If you see this then we are good. Paste this again

fuelup default beta-4

See this ? Awesome ! We have installed fuel up tool change and set default to Beta 4

Ensure Terminal is still open to ensure smooth process. However, If you enter some network issues, you can always continue from this part when you reopen the terminal.

✓ Build Sway Project

Create a folder Fuel — directory

Paste this code one by one as usual

mkdir fuel-project

cd fuel-project

forc new counter-contract

We are now in the #fuel-project folder

Paste this command

nano counter-contract/src/main.sw

A box of codes should appear. Now clear the codes by using the backspace or delete key (anyone that works for your terminal).

Now paste the following codes instead.

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);

    }

}

After pasting this successfully. Close the action by Ctrl + X or ^c on mobile(Termius).

Press Y then click enter

√ Build Your Contract

Use this command

cd counter-contract

Then paste this

forc build

✓ Setup Up Your wallet

I assumed you already have a Fuel Wallet or know how to create one. There is a way to create wallet through the terminal but I won’t include that here.

Therefore, You are expected to have a Fuel wallet installed.

You will need the 12 seed Phrase in the next step. Have it ready!

Copy this command and paste

forc-wallet import

Next step, Paste your 12 words seed Phrase and create a password to protect your wallet.

Note : When pasting Phrase or writing password, it might not appear on the screen but the action is already captured.

Afterwards, paste this

forc wallet account new

Input the password you just created and continue.

You can confirm your wallet address with this command

forc wallet accounts

✓ Contract Deployment

If you have got to this point. You are a genius 👍.

You will need testnet faucet on your wallet to deploy a contract. If you already done that before — skip this.

>>>>> Request Faucet here

Get Faucet ?!

Now Paste this command

forc deploy --testnet

Input your password 🔑

If you have more than one account in your server, you might have Upto to 0- 3 index. As you can see, we are working on “Account 0".

So type — 0

Then press Y

Bravooooo ! You have successfully deployed your contract.

You can now see your contract ID. Keep this for the next step if you wish to interact with your contract

You can check your contract on the Block explorer

Contract might not appear now. It will eventually.

✓ Build your Dapp with your Contract

We will be using NodeJS 18.

Download and Install NodeJS 18

Paste this code one by one

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

Successfully installed NodeJS 18

At this point — You are almost done !

✓ Building Front End

It is required to be in the Fuel Project Folder before any command in this case

Paste this

cd $home && cd fuel-project

Then

npx create-react-app frontend --template typescript

Then Press Y

Leave few seconds for processing

✓ Install Fuel Wallet SDk

Paste this commands

Create Frontend Folder

cd frontend

Install SDK

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

Give few seconds for processing

Then Paste this

nano tsconfig.json

Just like previous one.

Delete the codes in the Box and replace with code here

{
"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"
]
}

After pasting, Press CTRL + X

Press Y then Enter

Afterwards, Run this command

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

You should see a message such as the one below 👇

Good !

This Next step we will be Modifying the app real quick. Pay attention

Run this command

nano src/App.tsx

This will bring an IDE or a box. Just like previous ones. Delete it and Paste the following codes.

However, Edit the Contract ID in this code and paste yours.

Check in the code — paste your contract ID we just deployed instead of “0x…”

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"
}

✓ Run Your Dapp

This is the last part

Run this command

Ensure you are still fuel-project/frontend directory. If not, run two commands again

cd $home && cd fuel-project
cd frontend 

Let’s continue

Paste this

npm run build

Then

npm start

Compiled Successfully!

You should automatically get your assigned port like below. Mime in this case is :3000

To connect to your host site. Paste your VPS IP Address instead of Local host. E.g 192.34.555:3000.

Ensure your terminal is still open. Paste this in your browser and interact.

Congratulations your Dapp is officially live

Your Dapp should look like this after pasting on the browser

Connect your or any fuel wallet

Click on Increment to interact with your contract. You can interact as many times as you like.

If eventually you are getting errors. Open the terminal again and paste this code below 👇

It should work out

ufw allow 3001/tcp

I hope this is super helpful. I will appreciate you give my some applause and Follow this blog. It takes so much to get this done 🙂

Ask any question in the comment section

Gracias 👍

--

--

Watchman Zēk

Tech Expert, Defi Analyst, Blockchain Researcher and Data Analyst