This guide is for MacOS users with zero tech knowledge and is based off of Lemiscate’s guide for windows users.

https://twitter.com/lemiscate/status/1559483675741507584?s=20&t=hVIlvg9S_nLDa-3QmVlWvg

<aside> ⚠️ READ FIRST:

• There’s heavy handholding in it, it’s on purpose, if you’re a fair bit more technical feel free to skim through.
• This guide is not an endorsement or legal advice, it’s only aiming at sharing publicly available information.
• Running your own front-end comes with a bunch of benefits and this guide will use Aave as an example, but most real DeFi has Open source front-ends, if your favorite protocol does not have an open-source front-end website, feel free to ask them to publish their front-end code.
• Every text that look like this in this guide is code. What is meant to be copied & pasted into your terminal is written in red + pink and in a light grey box such as this example:

➜  aave_interface git:(main) yarn dev

</aside>

But wait, what’s a “Front-end”?

The Front-end is the layer of a web application that is “in front of” the user: it’s the part seen by the user and which the user can interact with, like a website, mobile app.

In the case of a decentralised application, it’s the layer that’s on top of the blockchain and allows the user to interact with it.

If for any reason you cannot see the website when you send a request on your browser to go to https://app.aave.com, fear no more as it is possible to run your own front-end locally (= on your computer) to access the protocol.

Where do I go, what do I do?

First, requirements:

1. Install git ⇒ https://git-scm.com/download/mac

2. Open your terminal, you should see this:

   ➜  ~
   

   • Check if you have Homebrew, which is a free and open-source software package management system that simplifies the installation of software on Apple's operating system, macOS. [toggle]
   • Install Node.js and npm. [toggle]
   • Install yarn [toggle]

3. Now, create a new folder to add your future code, and navigate to it. I called mine “self_hosting_frontends”

   <aside> 🔥 A good practice is to separate any code from the $HOME folder (the ~ folder, or /Users/<your_name> on Mac). Always create a new folder (with mkdir) and go into it (with cd). That’s where you’ll want to run the git clone command later.

   </aside>

   ➜  ~ mkdir self_hosting_frontends
   ➜  ~ cd self_hosting_frontends
   

That was the hardest, now you’re ready to go:

Just making sure we have everything ready and in the right place on our computer. At this point we should be in our directory called “self_hosting_frontends”.

• Checking if we have the latest version of Node.js and npm installed. If yes, you’re ready to go!