With all the commotion lately about DeFi websites blocking users of Tornado Cash, it seemed a perfect time to learn about running these “front-end” interfaces for dapps locally. Unfortunately, I have very little experience with developing websites. Nevertheless, thanks to another guide, I was able to figure it out and I want to share that knowledge in a format even an absolute novice could utilize.
As with many other non-developers, I run Windows on my main PC at home and that’s what I’ll use for this guide. Fortunately, Microsoft has recently given us some really great tools to work with and this won’t be too difficult at all.
So let’s begin!
Step One:
The first step is to install Visual Studio Code on your PC. Open your preferred web browser and go to this website:
I recommend you download the “System Installer” 64 bit version, here:
Next, go to your download folder and find the downloaded file. It should be named something like “VSCodeSetup-x64-1.70.1.exe”. Right click the file and choose “Run as Administrator”, entering your password if required:
VS Code setup will start with a license agreement. Click “I accept” and then “Next”. Accept the default destination location and hit “next”. Accept the default start menu folder and hit “next”. Accept the default options on the additional tasks page and hit “Next”. Hit “Install”. When installation is finished, make sure “Launch Visual Studio Code” is checked and hit “Finish”.
Next, we need to install an extension for VS Code that will let it interface with our front-end environment. In VS Code, click “Extensions”:
Next, search for “remote wsl” and install the option that appears. At time of writing, it has an icon of a penguin on it (his name is Tux!):
That’s it for VS Code for now! Go ahead and close the VS Code window. We’ll come back to it after the next step.
Step Two:
Now we need to initialize the “Windows Subsystem for Linux” so that VS Code has an environment in which to work! This sounds complicated but it’s really just a few commands. Don’t let Powershell scare you- it’s quite easy!
First, hit the start button and search for “Powershell”. When you find it, run it as an administrator:
In the Powershell window, run the following command:
wsl --install --distribution Ubuntu
This should open a new window with a black background. Once Ubuntu (one of many Linux versions) is installed, it will prompt you to enter a username followed by a password:
Now you have a whole Linux operating system running inside your Windows PC, and your Windows programs can access and utilize it just like they do your regular PC! Pretty cool.
Step Three:
In the Ubuntu window above, type the following command and hit enter:
code
This will open Visual Studio Code. Next, click “Terminal” at the top followed by “New Terminal”:
This will open a command-line interface at the bottom of the page. I’ve redacted part of the prompt because it contains part of my IRL name:
In the terminal interface, enter the following command:
wsl -d Ubuntu
Now enter this command, substituting your username after the “~” character:
cd ~YourUsernameHere
Now you are in your “home” directory in the terminal. From here we will build our project, but first we need to install some extra programs to help us build the website.
Step Four:
Run these commands one at a time. “Sudo” is a bit like “Run as administrator” in Windows. It will ask you for the password you set up earlier when you run the first command:
sudo apt update
sudo apt upgrade
“sudo apt upgrade” will prompt you to enter “Y” if you approve. This command may take a while to finish. And yes, it’s different from the previous command!
sudo apt install nodejs npm
This command will also prompt you to enter “Y”, and it may take a while to complete.
sudo npm install --global yarn
curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt-get install -y nodejs
sudo git clone https://github.com/Uniswap/interface
This command retrieves the front-end files from Uniswap’s github page. There may be alternate sources for these files, such as IPFS. Github is probably the most convenient, however.
mv interface ./uniswap-interface
This command just renames the downloaded directory so that it won’t conflict with other dapp websites you may decide to download.
cd uniswap-interface
Now you have all the files you need to run Uniswap in a convenient folder on your computer. If you were so inclined, you could edit these files in order to remove certain distasteful parts of the front-end interface. IYKYK.
sudo yarn
This command may take a while as well. Yarn will essentially get the Uniswap files into a format which can be used as a web page.
sudo yarn start
This will start up the web page and it should also open a browser window. After it loads for a short time, it should display Uniswap! You can use this exactly as you would the normal Uniswap site at app.uniswap.org. You can even switch to other chains like Arbitrum or Optimism exactly like the “real” website!
Now, maybe you want to run a different dapp. That’s easy now that we’ve set all this up!
Back in the VS Code terminal, hit control + C to stop the server. Enter the following command to go back to your home directory:
cd ~
Using the same rough format as before, let’s download GMX and give that a try!
sudo git clone https://github.com/gmx-io/gmx-interface
cd gmx-interface
sudo yarn
sudo yarn start
As before, this will start up the web page and open it in your browser at the GMX homepage. Neat!
Now you’re a shadowy super-coder who can easily adapt this set of steps to download pretty much any open-source front-end and run it locally!