Updated May, 19th
This article will detail the steps to install a specific build of the Web UI and, in a second part, how to set up the development environment to make a contribution or just to take a look. I’m talking about this process since I’ve worked on this specifically. My last contributions to improve the maintenability of the existing UI has led the current process broken. This post also talks about the way UI packages are handled behind the scene with
Install a web UI
It’s very simple to install the Web-UI. You need to pick one of them:
- enyo with
- material with
www-m(I’ll work on this one during my summer)
- panels with
- tiled with
You will soon be able to chose the way you want it:
Why two methods to reach those 4 UI? As a user, you have the choice to be safe with the version selected by the community or to be adventurous and opt for the most up to date version of the UI. This last option brings us more flexibility to test the UI in it’s final environment and to obtain a community feedback easily. Currently, this option is in development so, the safe version is already packed inside r2 release. It should be updated soon with a dedicated option.
There is one more option on the installation of the UI. You can chose to install them from your home directory or globally, depending on your needs. As
npm or other package manager, you just have to add the
To uninstall a package, just use
-u instead of
So, more technically, when this option will be avaible, this command will download a tarball on the radare2-webui release page with the good matching between your version of radare2 and the UI you are looking for. This tarball will be extracted into the right directory to be used later.
If you want to use the latest available UI, the process is still the same. Be careful about the installation of the same UI twice by the same process, only the last will be kept. The process is the same:
Behind the scene, this method will clone the radare2-webui repository and build the dependencies of the UI you are looking for. The result will be plugged to your current installation of radare2. This method require an updated version of
And now, everything is installed, you want to try them, it’s very easy:
How to set development environment for the Web UI
The method presented before is the easy part, to take a look at the UI. If you want to work with them, you will need to set a proper environment. Hopefully, you can made so with few quick steps! I will assume that radare2 is installed also with node and npm.
First, I would recommand you to fork the official repository and clone it on your computer. Then, we can start to look at it more seriously.
Second, you should build the structure to see if everything goes well. This project use a global
Makefile to handle this, just run the following command in your shell:
By doing this, we will retrieve all the required dependencies using
bower and placing the right files into the
dist directory that will be used when we will run our UI.
There is more specific rules to build only one UI if it’s suit you, for example:
make material for the Material Design UI.
Third, you want to be able to run a specific UI, so you can use the
Makefile once again:
This command will open your browser with the current default UI. If you want to run a specific UI, you can use those targets:
Fourth, you are ready to make your modifications inside the
www directory, commit your changes and send a pull request!
I would like to implement a watcher inside the gulp rules to be more efficient with fewer steps between code and render.