sudo apt update curl -sL https://deb.nodesource.com/setup_20.x | sudo -E bash - sudo apt-get install -y nodejsFirst, install the ethfs-cli tool:
npm i -g ethfs-cliCreate a FlatDirectory contract to store the files:
ethfs-cli create -p <private-key> -c 11155111After the transaction is confirmed, you will get the FlatDirectory address:
FlatDirectory Address: 0x49EDFB27a463545337487D39a8349760B345F160
Create the dist directory and the necessary files (index.html and degen.jpeg). Then, upload the dist folder to the FlatDirectory.
-
Create
distDirectory:- In your terminal, navigate to your project directory and create the
distfolder:mkdir dist
- In your terminal, navigate to your project directory and create the
-
Create
app.htmlFile:- Create a new HTML file named
app.htmlin thedistdirectory with the following content:<!DOCTYPE html> <html> <head> <script> async function fetchData() { const url = 'web3://0xf14e64285Db115D3711cC5320B37264708A47f89:11155111/greeting'; const response = await fetch(url); const data = await response.text(); document.getElementById('content').textContent = data; } window.onload = fetchData; </script> </head> <body> <div id="content"> Loading greeting... </div> <br> <img src="./degen.jpeg" alt=""> </body> </html>
- Create a new HTML file named
-
Download
degen.jpegImage:- Download the
degen.jpegimage and place it in thedistdirectory. You can do this manually or use thewgetcommand:wget -O dist/degen.jpeg https://gist.github.com/assets/5291653/4526caf3-9218-4a23-8619-02f777e6e7fd
- Download the
-
Verify Directory Structure:
- Ensure your project directory structure looks like this:
YourProject/ ├── dist/ │ ├── index.html │ └── degen.jpeg
- Ensure your project directory structure looks like this:
Now, upload the application:
ethfs-cli upload -f dist -a <flat-directory-address> -c 11155111 -p <private-key> -t 1This should resolve the issue of the missing directory or files and allow you to upload your application successfully.
To reduce costs, use BLOBs introduced in Ethereum's Cancun upgrade. First, install the eth-blob-uploader tool:
npm i -g eth-blob-uploaderThen, upload the files using BLOBs:
eth-blob-uploader -r https://small-divine-liquid.ethereum-sepolia.quiknode.pro/0ed67157b8f803feee07b62dba90f4b6aff75e4e/ -p <private-key> -f dist/app.html -t <any-address>
eth-blob-uploader -r https://small-divine-liquid.ethereum-sepolia.quiknode.pro/0ed67157b8f803feee07b62dba90f4b6aff75e4e/ -p <private-key> -f dist/degen.jpeg -t <any-address>Use EthStorage to store BLOBs permanently by calling the putBlob method and paying the permanent storage fee. The ethfs-cli tool simplifies this process.
First, create another FlatDirectory contract:
ethfs-cli create -p <private-key> -c 11155111Then, upload the application using EthStorage:
ethfs-cli upload -f dist -a <last-created-flat-directory-address> -c 11155111 -p <private-key> -t 2This method requires only two transactions and significantly reduces the cost.
You can access your dApp via the web3 URL:
web3://<flat-directory-address>:3333/app.html
For example:
web3://0x49EDFB27a463545337487D39a8349760B345F160:sep/app.html
You can also use the w3link.io gateway to access the web3 protocol from browsers like Chrome.