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 👍
