Cameron Eldridge
97dac7e28f
Seemed to me there was no way to browse all the repositories being seeded on a node. On the massive public nodes this is not that useful a feature since there are too many and too jumbled an assortment, but for a smaller personal node, this feature might be valuable to make the explorer's contents a bit easier to explore. Went with the most unintrusive implementation of this idea for now; just enough that it "does the job" (you can access this view, and paginate the results) but does not have any of the bells and whistles it should have (search/filtering, sorting, page query parameters support). As part of this work, since the repos section gets much more complex, I extracted the repos part of the page into its own component. Otherwise, it is just very simply allowing the parameters to the `fetchRepoInfos` call to be manipulated from the page.
Radicle Explorer
This user interface lets you interact with Radicle, a peer-to-peer code collaboration and publishing stack, directly from your web browser.
Deployment Options:
- Public Server: The Radicle team maintains a public instance at app.radicle.xyz
- Local-first: Run the UI locally
- Self-hosting: Deploy the UI on your own server
Local-first
Prerequisites:
Run the following commands to access the web UI locally:
git clone https://seed.radicle.xyz/z4V1sjrXqjvFdnCUbxPFqd5p4DtH5.git radicle-explorer
cd radicle-explorer
npm install
npm start
Then open http://localhost:3000 in your favourite browser.
Self-Hosting the UI
There are several ways to deploy the UI publicly. Here are two common options:
Using your own web server:
- Run
npm install && npm buildto create a build for deployment - Configure your web server to serve the contents of the
/builddirectory
Using Vercel (or similar static file hosting):
- Fork this repository to create your own version
- Configure your Vercel account to deploy the forked repository
Add Rewrite Rules for Client-Side Routing
The explorer is a single-page application (SPA). To ensure that all routes are handled correctly, add a rewrite rule to your web server configuration. For example:
Caddy:
example.com {
rewrite * /index.html
}
Configuration
There are two ways to configure the UI: at build time and at run time.
Build-Time Configuration
This method is recommended when deploying to static hosting platforms such as Vercel.
Option 1: Create a local.json file
- Copy
default.jsonto a new file in the same directory calledlocal.json. - Modify the properties in
local.jsonto suit your setup.
Option 2: Use environment variables
- Refer to
custom-environment-variables.jsonfor a list of supported environment variables. - Set the desired variables in your environment before building the UI.
For advanced configuration options, refer to the
node-configdocumentation.
Run-Time Configuration
This method is useful when the app is distributed as a precompiled static JS/HTML bundle, such as when installed via a package manager.
You can build the app in a mode that loads configuration dynamically from the server it's deployed to, instead of bundling it at build time.
To enable this behavior, set the environment variable VITE_RUNTIME_CONFIG=true
during the build:
VITE_RUNTIME_CONFIG=true npm run build
This will inject a blocking script into the index.html that attempts to load
the configuration from a pre-defined location (/config.json) on the server.
The config file must be served as static content and must be publicly accessible.
The structure of the runtime config.json must match the shape of the
application's base configuration defined in config/default.json.
Contributing
- For detailed contribution guidelines, refer to the CONTRIBUTING.md file
- To propose changes, open an issue or submit a patch using Radicle
Getting in touch
To get in touch with the maintainers, sign up to our official chat on Zulip.
License
The UI is distributed under the terms of GPLv3. See LICENSE for details.