好吧，我們需要將dapp連線到本地區塊鏈。在我們的案例中，Ganche CLI將完成這項工作。最重要的是，Ganache CLI偵聽埠8545，這就是為什麼我們在tuffle.js中將埠設定為8545的原因。
第2步：啟動Ganache CLI：下一部分是執行終端命令ganache-cli以啟用Ganache。
第3步：設定METAMASK：
說實話，這是事情可能變得醜陋的部分。因此，讓我們瞭解此步驟的基礎知識。
Metamask可以簡單地看作是一種工具，可以將您的常規瀏覽器（即Firefox或Chrome）基本上轉換為可以與區塊鏈通訊的工具。
在開發過程中，可以透過為此metamask擴充套件提供合適的埠並設定其與我們的開發帳戶的連線來完成。
為此，您有兩個可靠的埠用於開發目的。
· 埠7545：-使用Ganache GUI
· 埠8545：-使用Ganache CLI
因此，假設您已在自己喜歡的瀏覽器上成功建立了Metamask擴充套件程式，現在讓我們從主要部分開始。
如您所見，預設情況下，此副檔名連線到以太坊主網路，這不是您要用於開發目的的所有帳戶（除非您真的很富有並且擁有大量以太幣）。因此，單擊下拉選單，然後選擇Localhost8545。（因為Ganache CLI使用埠8545）。
設定埠後，現在單擊右上方的圓形按鈕，然後選擇“匯入帳戶”選項。
在此將要求您輸入要使用的帳戶的私鑰。記住，Ganche CLI已經為我們提供了10個帶有100個免費以太幣的帳戶。好了，從這10個帳戶中選擇任何私鑰並將其貼上到此處。
就這樣，既然您已經設定了帳戶，那麼您就可以開始開發過程了。
最後，用REACT啟動前端，因此現在可以簡單地啟動前端部分了。
請遵循以下步驟：
現在到 truffle react
1.輸入trufle compile命令。
2.然後輸入命令truffle migrate。
注意：一旦您遷移了智慧合約，就會因gas而扣除少量的eth。因此，單擊瀏覽器上的Metamask擴充套件，然後檢查是否扣除了一些金額。如果是的話，那麼您的設定就可以了。
4.轉到客戶端目錄，然後輸入命令npm start。
5.開啟瀏覽器，然後轉到localhost：3000。
您可能會看到這樣的Metamask彈出視窗。
這只是您需要批准的一個簡單事務，以便從智慧合約獲得價值到前端部分。只需單擊確認按鈕。
注意：您是否看到一行顯示，儲存的值是：5.此處的值5來自智慧合約，因此表示您的前端與合約同步。
而已。您已透過WEB3和Ganache CLI成功將React與Solidity智慧合約整合在一起。
