# How To Deploy Contract on Fuel Network

By [Moei](https://paragraph.com/@0xmoei-2) · 2023-02-18

---

### Deploy Smart Contract on Fuel Network step by step guide

Smart contract deployment does not require a special system and only needs a coding environment like Linux Ubuntu 22.04 (LTS) x64 OS ⚠️ You can Install Ubuntu Linux beside the Windows or use a cheap VPS for 5$ on [DigitalOcean](https://www.digitalocean.com/)

Deploy Contract Steps
---------------------

1\. Install Dependecies
-----------------------

### 1.1 Install Rust

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

    rustup update stable
    

    rustup default stable
    

2\. Install Fuelup Toolchain
----------------------------

### 2.1 Install Fuelup

    curl --proto '=https' --tlsv1.2 -sSf https://fuellabs.github.io/fuelup/fuelup-init.sh | sh
    

_Press_ **_Y_** _and then_ **_ENTER_** _on your keyboard_

    export PATH="$HOME/.fuelup/bin:$PATH"
    

    source /root/.bashrc
    

If any command starting with `Fuelup` or `Forc` didn’t work, you can use the above command to fix it

    fuelup self update
    

### 2.2 Install beta-2 testnet

    fuelup default beta-2
    

### 2.3 Check Fuelup version

    fuelup --version
    

### 2.4 set Beta-2 Testnet

    fuelup default beta-2
    

3.Write the Contract
--------------------

### 3.1 Create project

Create the project directory & go to it.

    mkdir fuel-project
    

    cd fuel-project
    

### 3.2 Config Contract

    forc new counter-contract
    

    nano counter-contract/src/main.sw
    

Above command opens the **edit window** of **contract config** file on this directory: `counter-contract/src/main.sw`

**_Paste in_**\* the window the information below:\*

    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
    }
    #[storage(read, write)]
    fn increment() {
        storage.counter = storage.counter + 1;
    }
    }
    

Then:

Press `Ctrl + X`

Press `Y`

Press `Enter`

### 3.3 Build Contract

Make sure you are in `fuel-project` directory then:

    cd counter-contract
    

4\. Create Wallet
-----------------

### 4.1 Initialize Wallet

**!!! Choose 1 of the next 2 commands:**

**Create New Wallet**

    forc-wallet init
    

`Set Password`

`Save 12 Words Recover Phrase`

**Recover Old Wallet**

    forc-wallet import
    

It asks you your wallet 12 words recovery phrase

`Enter 12 Words Recovery Phrase`

`Set Password`

### 4.2 Create Wallet

    forc-wallet new
    

`Enter Your Password`

It gives you a wallet address like the example below:

`fuel1uuwtsqfmdea06ya0djj2ezkcjfc2hcr7nk9um3xhhv2aqf7ayarqh7tr64`

**If you had any problem creating wallet, It is possibly because you used both commands above, to fix it use the below command & try again from step 4.1**

    cd $home && rm -rf .fuel/wallets && cd fuel-project/counter-contract
    

### 4.3 Get Faucet Tokens

Get testnet tokens [here](https://faucet-beta-2.fuel.network/)

5\. Deploy Contract
-------------------

### 5.1 Create Deploy Transaction

    forc deploy --url node-beta-2.fuel.network/graphql --gas-price 1
    

It asks you to Enter `Your Wallet Address`

Save `Contract id` we need it for interacting with contract at final steps

Save `Transcation id` we need it for next step

![](https://storage.googleapis.com/papyrus_images/591b17ca115676ad413d924951ccfe29b9a065ebc0e7cfbb2a2d0e771efb3589.png)

### 5.2 Open new terminal

Open a new terminal to sign with your `Transaction ID`

![](https://storage.googleapis.com/papyrus_images/9f0e35df0138450eda552578963129ec54331950229a4c41ddd026ca5945c2c3.png)

In the new terminal, commands starting with `Fuelup` or `Forc` might not work. Use the command below to fix it!

    source /root/.bashrc
    

### 5.3 Sign the Transaction

    forc-wallet sign Transaction_id 0
    

Replace your saved Transaction ID at part 5.1 with `Transaction_id` on the above command

`Enter Password`

`Copy Signature` It gives you a Signature which you have to **paste** in the **main terminal**

![](https://storage.googleapis.com/papyrus_images/f10678acbbdd1d9cc624ad7f9ed2dc79e902b8081176d6ec8cb4dff9f5f0f50e.png)

After you pasted the signature in the main terminal, you’ll get a contract address which is deployed on the network

![If the contract is deployed successfully](https://storage.googleapis.com/papyrus_images/aa0ea993aa408d7e76a372dcbc09d55d6203e44fa448d854644705ee4a3c73ec.png)

If the contract is deployed successfully

### 5.4 Explore Transaction

To find your transaction on the network [explorer](https://fuellabs.github.io/block-explorer-v2/), you can use `0x` + `Transcation id` you saved at step 5.1 (Remember to add `0x` to it)

for example my `Transcation id` is: `0x276f1bcb12b343d4bdb934aae8f017aef86be7e48fdcd3efb34d1d57b9256d45`

Interact With Contract
----------------------

At this part we have to build a Dapp for our contract to interact with it.

1\. Install Nodejs
------------------

### 1.1 Check Nodejs

Check the version if you have already have it

    node --version
    

### 1.2 Install NodeJS

If it was needed to install Nodejs, Continue this part

**Delete old files**

    sudo apt-get remove nodejs
    

Press `Y`

    sudo apt-get purge nodejs
    

    sudo apt-get autoremove
    

Press `Y`

**Install Nodejs 18**

    sudo apt install -y curl
    

    curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
    

    sudo apt install -y nodejs
    

**Check Nodejs Version**

    node --version
    

2\. Create Dapp (Frontend)
--------------------------

### 2.1 Install Frontend

Make sure you are in the **fuel-project** directory

    cd $home && cd fuel-project
    

    npx create-react-app frontend --template typescript
    

Now you have fuel-project directory containing 2 sub-directories: `Counter-Contract` & `Frontend` , For checking it:

    ls
    

### 2.2 Install Frontend Packages

    cd frontend
    

    npm install fuels@0.24.2 --save
    

*   added 79 packages, and audited 1528 packages in 4s
    

    npm install fuelchain@0.24.2 typechain-target-fuels@0.24.2 --save-dev
    

*   added 33 packages, and audited 1526 packages in 2s
    

    npx fuelchain --target=fuels --out-dir=./src/contracts ../counter-contract/out/debug/*-abi.json
    

*   Successfully generated 4 typings!
    

2\. Create A Wallet (Again)
---------------------------

As the project is in early stages, wallet integrations aren’t developed yet so you have to generate a new wallet with commands to interact with your smart contract

### 2.1 Config New Wallet

Make sure you are in `Frontend` directory

    nano createWallet.js
    

The above command generates a file & opens a menu to edit it. Copy the below codes inside it

    const { Wallet } = require("fuels");
    
    const wallet = Wallet.generate();
    
    console.log("address", wallet.address.toString());
    console.log("private key", wallet.privateKey);
    

Then

Press `Ctrl + X`

Press `Y`

Press `Enter`

### 2.2 Generate New Wallet

    node createWallet.js
    

**Save** `Address` **&** `Private key`

### 2.3 Get Faucet

Get faucet [here](https://faucet-beta-2.fuel.network/) or send some from the main wallet

3\. Config Dapp
---------------

### 3.1 Edit App.tsx

Make sure you are in `Frontend` directory

    nano src/App.tsx
    

The above command opens a menu to edit App.tsx file, Delete everything inside it & copy paste the codes below & replace my addresses in front of `CONTRACT_ID` & `WALLET_SECRET` with yours.

For better experience you can use **notepad** to edit the codes

    import React, { useEffect, useState } from "react";
    import { Wallet } from "fuels";
    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 =
      "0x3edb96c23766b8504caaff042994efa18460e7ba27f60191394a6bcf5be8d7d8";
    
    //the private key from createWallet.js
    const WALLET_SECRET =
      "0xc4a69e0cc4ce1e0b45d25899b3cedced332d193c8a5c706187ffd50aa7591ce6";
    
    // Create a Wallet from given secretKey in this case
    // The one we configured at the chainConfig.json
    const wallet = Wallet.fromPrivateKey(
      WALLET_SECRET,
      "https://node-beta-2.fuel.network/graphql"
    );
    
    // Connects out Contract instance to the deployed contract
    // address using the given wallet.
    const contract = CounterContractAbi__factory.connect(CONTRACT_ID, wallet);
    
    function App() {
      const [counter, setCounter] = useState(0);
      const [loading, setLoading] = useState(false);
    
      useEffect(() => {
        async function main() {
          // Executes the counter function to query the current contract state
          // the `.get()` is read-only, because of this it don't expand coins.
          const { value } = await contract.functions.count().get();
          setCounter(Number(value));
        }
        main();
      }, []);
    
      async function increment() {
        // a loading state
        setLoading(true);
        // 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();
          const { value } = await contract.functions.count().get();
          setCounter(Number(value));
        } finally {
          setLoading(false);
        }
      }
      
      return (
        <div className="App">
          <header className="App-header">
            <p>Counter: {counter}</p>
            <button disabled={loading} onClick={increment}>
              {loading ? "Incrementing..." : "Increment"}
            </button>
          </header>
        </div>
      );
    }
    export default App;
    

4\. Run your Dapp
-----------------

Make sure you are inside the `fuel-project/frontend` directory

    npm run build
    

*   Compiled successfully!
    

    npm start
    

*   Compiled successfully!
    

!! Make sure you do **NOT** close the terminal as you need it **RUNNING** while interacting with contract !!

If the dapp port conflicts with your system port, it requests you to choose another port which you have to accept.

Open a new terminal & to enable the new port for example 3001, use the below command:

    ufw allow 3001/tcp
    

5\. Interact with Dapp
----------------------

Now it's time to have fun, run the project in your browser.

If running on a Local PC put this in your browser: [http://localhost:3001](http://localhost:3001)

If running on a VPS put this in your browser replacing with you VPS IP: [http://192.168.4.48:3001](http://192.168.4.48:3001)

![](https://storage.googleapis.com/papyrus_images/af8df41d62c5fb4c7bc2c323f17828836706080df04b799daad6eca302b03d9a.png)

You don’t need to make transactions on the wallet to interact. Just click `Increment`

**!!Congrats, Anon. You have completed your first Dapp on Fuel Network!!**

---

*Originally published on [Moei](https://paragraph.com/@0xmoei-2/how-to-deploy-contract-on-fuel-network-2)*