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!

Open a terminal in Ubuntu

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

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

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

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

fuelup self update

fuelup default beta-4

*You can check your fuelup version

fuelup --version

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

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

Move to the folder of your created project

cd counter-contract

Now it’s time to build your contract

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

• 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

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

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

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.

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

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

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

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

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!

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!

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

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!

See you in the next guide! <3

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!

Open a terminal in Ubuntu

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

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

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

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

fuelup self update

fuelup default beta-4

*You can check your fuelup version

fuelup --version

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

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

Move to the folder of your created project

cd counter-contract

Now it’s time to build your contract

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

• 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

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

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

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.

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

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

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

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

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!

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!

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

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!

See you in the next guide! <3