# How To Deploy A Fuel Network Dapp - (Beta-3 Testnet)

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

---

آموزش دیپلوی اسمارت کانترکت و اپلیکیشن روی تست نت بتا 3 شبکه فیول
-----------------------------------------------------------------

دیپلوی اسمارت کانترکت نیاز به سیستم خاصی نداره و فقط محیط کدنویسی لینوکس میخواد

**آموزش و نکات راه‌اندازی محیط کدنویسی رو از این** [**توییت**](https://twitter.com/0xMoei/status/1601976573170622464) **ببینید**

اگر هرکجای این آموزش به مشکل برخوردید باید دوباره از ابتدا شروع و تکرار کنید تا ملکه ذهنتون شه و هرسوالی از خطاهاتون داشتید با اسکرین شات خطا برام بفرستید که زودتر به جواب برسید

مراحل دیپلوی اسمارت کانترکت
---------------------------

1\. Install dependecies
-----------------------

### 1.1 Upgrade & Install git

    sudo apt update && sudo apt upgrade -y
    

    sudo apt-get install git-all
    

### 1.2 Install Rust

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

    source "$HOME/.cargo/env"
    

    rustup update stable
    

    rustup default stable
    

2\. Install Fuelup toolchain
----------------------------

### 2.1 Delete Old Files

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

### 2.2 Install Fuelup

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

Press `Y`

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

    source /root/.bashrc
    

مهم: هر زمان دستوراتی که با **عبارات زیر** شروع میشن کار نکردند از **2** **دستور بالا** استفاده کنید مشکل حل میشه

`Fuelup` / `forc`

### 2.3 Install beta-3 testnet

### 2.4 Check Fuelup version

    fuelup --version
    

### 2.5 Set Beta-3 Testnet

    fuelup default beta-3
    

**مهم:** هر زمان از ترمینال خارج شدید و بعدا دستوراتی که با **2** **عبارات زیر** شروع میشن کار نکردند، **دستور بالا** رو دوباره بزنید

`fuelup` / `forc`

3\. Write Contract
------------------

### 3.1 Create project

**پوشه پروژه رو بسازید و واردش شید**

    mkdir fuel-project
    

    cd fuel-project
    

### 3.2 Config contract

    forc new counter-contract
    

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

    nano counter-contract/src/main.sw
    

**با دستور بالا منوی ادیت فایل کانفیگ کانترکت رو باز می‌کنید. هرچی توش هست رو پاک کنید و کدهای زیر رو توش کپی کنید**

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

**بعد از کپی**

Press `Ctrl + X`

Press `Y`

Press `Enter`

### 3.3 Build Contract

مطمئن باشید داخل دیرکتوری پروژه‌ای که ساختید باشید یعنی

`fuel-project`

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

    cd counter-contract
    

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

4\. Create wallet
-----------------

### 4.1 Import Wallet

آسونترین راه ساخت ولت، نصب اکستنشن ولت فیول روی بروزر ویندوز و ایمپورت کلمات بازیابی اون توی ترمینال هست

    forc-wallet import
    

با زدن دستور بالا ازتون کلمات بازیابی ولتتون رو میخواد

`Enter 12 Words Recovery Phrase`

`Set Password`

### 4.2 Get Faucet Tokens

از این [لینک](https://faucet-beta-3.fuel.network/) توکن تستی دریافت کنید

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

### 5.1 Create Deploy Transaction

    forc deploy --node-url beta-3.fuel.network/graphql --gas-price 1 --random-salt
    

دستور بالا ازتون آدرس ولت میخواد از اکستنشن ولت کپی و تو ترمینال پیست کنید

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

بعد از ورود آدرس ولت، هش تراکنش بهتون میده که کپی کنید

\*بالای هش تراکنش، آدرس کانترکتی که ساختید هم میده اونم ذخیره کنید برای مرحله دیپلوی اپلیکیشن اگر زدید نیازه\*

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

### 5.2 Open new Terminal

طبق عکس یه ترمینال جدید باز کنید تا با دستور بعدی، تراکنش دیپلوی کانترکت رو امضا یا ساین کنیم

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

**در ترمینال جدید، دستورات بعدی ممکنه کار نکنن یا خطا بدن، که طبق نکته مرحله 2.1 عمل کنید یعنی دستور زیر رو قبلش در ترمینال جدید بزنید**

    source /root/.bashrc
    

### 5.3 Sign the Transaction

    forc wallet sign --account 0 tx-id XXXXXXXXXXXXXXXXXX
    

هش تراکنش مرحله 5.1 رو با **عبارت زیر** در **دستور بالا** جاگذاری کنید

`xxxxxxxxxxxxxxxxx`

`Enter you password`

یه **کد امضا** بهتون میده که باید کپی کنید و برگردید به **ترمینال اصلی** و وارد کنید

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

بعد از اینکه **کد امضا** رو وارد کردید کانترکت شما روی شبکه دیپلوی میشه

![در صورتی که کانترکت با موفقیت دیپلوی بشه](https://storage.googleapis.com/papyrus_images/aa0ea993aa408d7e76a372dcbc09d55d6203e44fa448d854644705ee4a3c73ec.png)

در صورتی که کانترکت با موفقیت دیپلوی بشه

### 5.4 Explore Transaction

برای سرچ تراکنشتون میتونید همون هش تراکنش مرحله 5.1 رو کپی و عبارت زیر (صفر-ایکس) رو به اولش اضافه کنید و در [اکسپلورر](https://fuellabs.github.io/block-explorer-v2/beta-3/#/) سرچش کنید

`0x`

برای مثال هش تراکنش من مطابق عبارت زیر هست

`0x276f1bcb12b343d4bdb934aae8f017aef86be7e48fdcd3efb34d1d57b9256d45`

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

**تبریک میگم شما کانترکت خودتون رو روی تست نت فیول دیپلوی کردید**

تا اینجای کار شما حق مطلب رو ادا کردید و به نظرم نیازی به ادامه آموزش ندارید اما اگر دوست داشتید عمیق تر وارد بشید و یک اپلیکیشن غیرمتمرکز روی کانترکتتون سوار کنید و با ولتتون رو کانترکت خودتون ترکنش بزنید میتونید ادامه بدید

\*\*\*Interact with Contract
----------------------------

در این قسمت یک **سایت** یا **دپ** برای کانترکتمون میسازیم که بتونیم روی کانترکت تراکنش ثبت کنیم

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

### 1.1 Check Nodejs

ورژن جاوا اسکریپت رو چک کنید که ببینید روی سیستم دارید

    node --version
    

### 1.2 Install NodeJS

در صورت نیاز به نصب این پارت رو پیش برید

**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

اطمینان حاصل کنید داخل **پوشه فیول-پراژکت** هستید

    cd $home && cd fuel-project
    

    npx create-react-app frontend --template typescript
    

پس از نصب، شما یک پوشه کلی پروژه به نام **فیول-پراجکت** دارید که داخلش پوشه **کانترکت** و **فرانتند** وجود داره برای چک کردنش دستور زیر:

    ls
    

### 2.2 Install Frontend Packages

    cd frontend
    

    npm install fuels@0.38.0 @fuel-wallet/sdk --save
    

    nano tsconfig.json
    

**با دستور بالا منوی ادیت فایل کانفیگ باز میشه و هرچی توش هست رو پاک کنید و کدهای زیر رو توش کپی کنید**

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

**بعد از کپی**

Press `Ctrl + X`

Press `Y`

Press `Enter`

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

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

### 2.1 Edit App.tsx

اطمینان حاصل کنید داخل پوشه فرانتند باشید

    nano src/App.tsx
    

با دستور بالا منوی ادیت فایل باز میشه که کدهای توش رو کامل دیلیت کنید و کدهای زیر رو با جاگذاری آدرس کانترکتی که در مرحله 5.1 دیپلوی کانترکت ذخیره کردید پر کنید

`CONTRACT_ID = “آدرس کانترکت”` Add `0x` behind the contract address قبل آدرس کانترکت صفر-ایکس بذارید (لعنت به فونت میرور)

\*برای جاگذاری میتونید کدهارو داخل **نوت پد** کپی و اصلاح کنید\*

    import React, { useEffect, useState } from "react";
    import "@fuel-wallet/sdk";
    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 =
      "0x9751545a0f45aa4b88904b2567822555953fb02fe5438d346d4beab5cb9820";
    
    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().get();
          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?.toFixed(0)}</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"
    }
    

4\. Run your project (Dapp)
---------------------------

اطمینان حاصل کنید داخل پوشه فرانتند باشید

    npm run build
    

    npm start
    

اگر پورتتون تداخل داشت ازتون میخواد که روی یه پورت دیگه بالا بیارید که تایید کنید و بعد با دستور زیر پورت جدید که خودش میگه مثلا 3001 رو باز کنید

\*ترمینال فعلی رو نباید ببندید دیگه و برای اجرای دستور باز کردن پورت، ترمینال جدید باز کنید\*

    ufw allow 3001/tcp
    

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

خب اپلیکیشن شما راه اندازی شد و تا زمانی که ترمینالتون بازه اپلیکیشن هم فعاله پس برای اینکه مرحله بعد رو انجام بدید ترمینال رو نباید ببندید

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

5\. Interact With Dapp
----------------------

برای دیدن سایت اپلیکیشنتون، یکی از عبارات زیر رو توی بروزر ویندوزتون سرچ کنید

*   اگر روی لپتاپ یا کامپیوتر خانگی کانفیگ کردید
    

`http://localhost:3001`

*   اگر روی سرور مجازی کانفیگ کردید، آی پی سرورتون رو با آی پی عبارت زیر عوض کنید
    

`http://ip:3001`

پورت رو هم دقت کنید که چی انتخاب کرده بودید و باز کرده باشید

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

حالا ولت رو بهش کانکت کنید و رو اپلیکیشن خودتون تراکنش اسپم کنید

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

تبریک میگم دولوپرای عزیز شما اپلیکیشن غیرمتمرکز خودتون رو روی شبکه فیول بالا آوردید :))

**با آرزوی سلامتی و موفقیت برای همه شما عزیزان**

---

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