# Host a GUI

## How do you Host a DEX GUI?

Want to help support the Serum ecosystem? Host a GUI and get a fraction of the fees!

* Open source GUI: <https://github.com/project-serum/serum-dex-ui>
* More about staking and voting: <https://projectserum.com/#/staking-and-voting>

Anyone can trade on any of the DEX markets, as they are not permissioned:

* <https://github.com/project-serum/serum-dex>
* <https://github.com/project-serum/serum-js>&#x20;
  * (Has some interfacing code to make it easier to trade)

In the spirit of DeFi, users are invited to compose with, it, and host their own GUIs.

### &#x20;<a href="#serum-gui" id="serum-gui"></a>

### Serum GUI <a href="#serum-gui" id="serum-gui"></a>

You will find the **official repository** of Serum DEX UI here:

{% embed url="<https://github.com/project-serum/serum-dex-ui>" %}

This repository provides everything you need to start your own Serum GUI.

Once you have forked the repository, you can run a local environment by running:

```
yarn start
```

### Customizing <a href="#customizing" id="customizing"></a>

The Serum DEX UI uses [React](https://reactjs.org/) and [Ant Design](https://ant.design/) UI library. To learn how to customize it, refer to their [official guide](https://ant.design/docs/react/customize-theme).

### Collecting Fees <a href="#collecting-fees" id="collecting-fees"></a>

Serum allows you to collect 20% of the fees for the orders made on your GUI. In order to collect the fees, you need to modify the `.env` file that looks like this:

```
REACT_APP_USDT_REFERRAL_FEES_ADDRESS=''
REACT_APP_USDC_REFERRAL_FEES_ADDRESS=''
```

To collect fees enter your USDT **SPL** and USD **SPL** addresses, for example:

```
REACT_APP_USDT_REFERRAL_FEES_ADDRESS=9EscMUvizE1ThHWuWQgs8siDz4r54yVxhZDub3ihWQAX
REACT_APP_USDC_REFERRAL_FEES_ADDRESS=9GiKG99ngtKzhQcNXtHokuhx5gk7ftKfrmKtrybHFNa1
```

#### Setting your own Domain Name

The `package.json` file contains a field called `homepage`, change it to your name domain.

###

### Hosting

There are different solutions to host your GUI. You can host it for free on Github Pages or host it on your own server.

#### Github Pages

This is the easiest way of hosting and deploying a GUI, you simply have to use the following command to deploy your GUI

```
yarn deploy
```

The GUI will then be hosted on the `gh-pages` branch of your Github repository.

#### Hosting on your own Server

Alternatively, you can host your GUI on your own server and use Nginx for instance to serve it. To create the production build run:

```
yarn build
```

The build will be created in the `build` folder of the working directory.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.projectserum.com/serum-ecosystem/build-on-serum/how-to-host-a-gui-serum-academy.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.