IPFS Web UI
A web interface to IPFS, shipped with Kubo, and ipfs-desktop.
Check on your node stats, explore the IPLD powered merkle forest, see peers around the world and manage your files, without needing to touch the CLI.
| Files | Explore | Peers | Settings |
|---|---|---|---|
 |
 |
 |
 |
The latest release version is always at https://webui.ipfs.io, and the preview of main branch is at https://dev.webui.ipfs.io.
The IPFS WebUI is a work-in-progress. Help us make it better! We use the issues on this repo to track the work.
The app uses ipfs-http-client to communicate with your local IPFS node.
The app is built with create-react-app. Please read the docs.
Install
With a supported Node.js version:
> npm installA Note on NodeJS support
We aim to support ipfs-webui development and build with "Current" and "Active LTS" Nodejs versions.
See https://nodejs.org/en/about/releases/ for more information about which versions have which release statuses.
Usage
When working on the code, run an ipfs daemon, the local dev server, the unit tests, and the storybook component viewer and see the results of your changes as you save files.
In separate shells run the following:
# Run IPFS
> ipfs daemon# Run the dev server @ http://localhost:3000
> npm start# Run the unit tests in watch mode
> npm run test:unit:watch# Run the UI component viewer @ http://localhost:9009
> npm run storybookConfigure IPFS API CORS headers
You must configure your IPFS API at http://127.0.0.1:5001 to allow cross-origin (CORS) requests from your dev server at http://localhost:3000
Similarly if you want to try out pre-release versions at https://dev.webui.ipfs.io you need to add that as an allowed domain too.
Easy mode
Run the cors-config.sh script with:
> ./cors-config.shThe manual way
> ipfs config --json API.HTTPHeaders.Access-Control-Allow-Origin '["http://localhost:3000", "https://webui.ipfs.io", "http://127.0.0.1:5001"]'
> ipfs config --json API.HTTPHeaders.Access-Control-Allow-Methods '["POST"]'Reverting
To reset your config back to the default configuration, run the following command.
> ipfs config --json API.HTTPHeaders {}You might also like to copy the ~/.ipfs/config file somewhere with a useful name so you can use ipfs config replace <file> to switch your node between default and dev mode easily.
Running with Docker
If you need to run IPFS in a Docker container, you can still have Web UI available by exposing both the Gateway and Web UI ports.
Using the default ports:
docker pull ipfs/kubo
docker run -p 8080:8080 -p 5001:5001 -it ipfs/kuboSee the kubo page on Docker Hub to get started using IPFS with Docker.
Build
To create an optimized static build of the app, output to the build directory:
# Build out the html, css & jss to ./build
> npm run buildTest
The following command will run all tests: unit one for React and E2E against real HTTP API:
> npm testUnit tests
To watch source files and re-run the tests when changes are made:
> npm run test:unitThe WebUI uses Jest to run the isolated unit tests. Unit test files are located next to the component they test and have the same file name, but with the extension .test.js
E2E tests
The end-to-end tests (E2E) test the full app in a headless Chromium browser. They spawn real IPFS node for HTTP API and a static HTTP server to serve the app.
The purpose of those tests is not being comprehensible, but act as a quick regression and integration suite.
Test files are located in test/e2e/.
Make sure npm run build is run before starting E2E tests:
> npm run build
> npm run test:e2e # end-to-end smoke tests (fast, headless, use Kubo)Customizing E2E Tests
Default behavior can be tweaked via env variables below.
E2E_IPFSD_TYPE
Variable named E2E_IPFSD_TYPE defines which IPFS backend should be used for end-to-end tests.
CI setup of ipfs-webui repo runs tests against both JS and GO implementations:
> E2E_IPFSD_TYPE=go npm run test:e2e # 'go' is the default if missing
> E2E_IPFSD_TYPE=js npm run test:e2eOverriding versions
It is possible to test against arbitrary versions by tweaking ipfs (js-ipfs)
and go-ipfs in devDependencies section of package.json and applying the change via npm i
One can also override the binary used in e2e tests by providing a path to an alternative one via IPFS_GO_EXEC (or IPFS_JS_EXEC):
> IPFS_GO_EXEC=$GOPATH/bin/ipfs npm run test:e2e
> E2E_IPFSD_TYPE=js IPFS_JS_EXEC=/path/to/jsipfs npm run test:e2eE2E_API_URL
Instead of spawning a disposable node and repo for tests, one can point the E2E test suite at arbitrary HTTP API running on localhost:
> E2E_API_URL=http://127.0.0.1:5001 npm run test:e2eCaveat 1: HTTP API used in tests needs to run on the local machine for Peers screen to pass (they test manual swarm connect to ephemeral /ip4/120.0.0.1/.. multiaddr)
Caveat 2: CORS requests from http://localhost:3001 (static server hosting dev version of webui) need to be added to Access-Control-Allow-Origin whitelist array in node's config:
"API": {
"HTTPHeaders": {
"Access-Control-Allow-Methods": ["POST"],
"Access-Control-Allow-Origin": [
"http://localhost:5001",
"http://localhost:3001"
]
}
}Can be done ad-hoc via command line:
> ipfs config --json API.HTTPHeaders.Access-Control-Allow-Origin '["http://localhost:3001", "http://127.0.0.1:5001"]'
> ipfs config --json API.HTTPHeaders.Access-Control-Allow-Methods '["POST"]'Debugging E2E tests
Show the browser
By default, the test run headless, so you won't see the browser. To debug test errors, it can be helpful to see the robot clicking around the site.
To disable headless mode and see the browser, set the environment variable DEBUG=true:
> DEBUG=true npm run test:e2e # will show a browser windowTo build and run e2e only for a specific test script, pass its name:
> npm run build && npm run test:e2e -- --grep "Settings"Breakpoints
It is possible to set a "breakpoint" via await page.pause() to stop tests at a specific line.
Read more at https://playwright.dev/docs/debug#using-pagepause
Coverage
To do a single run of the tests and generate a coverage report, run the following:
> npm run test:coverageLint
Perform standard linting on the code:
> npm run lintAnalyze
To inspect the built bundle for bundled modules and their size, first build the app then:
# Run bundle
> npm run analyzeTranslations
One can permanently switch to a different locale via Settings or temporarily via ?lng=<lang-code> URL parameter.
The translations are stored on ./public/locales and the English version is the source of truth. We use Transifex to help us translate WebUI to another languages.
If you're interested in contributing a translation, go to our page on Transifex, create an account, pick a language and start translating. Be sure to change your notification settings to be notified when translation sources change.
You can read more on how we use Transifex and i18next in this app at docs/LOCALIZATION.md
Releasing
- Check that the Transifex sync action is successful or fails because there are no updates.
- If UI is materially different, update screenshots in
README.mdand on docs.ipfs.io here - Manually dispatch ci.yml workflow on
mainbranch. This will create a new release. - If release is good enough for LTS, update the CID at projects that use ipfs-webui by submitting PR against below lines:
Contribute
Feel free to dive in! Open an issue or submit PRs.
To contribute to IPFS in general, see the contributing guide.
Browser and device testing
We would like to thank BrowserStack for supporting Open Source and making it possible to test the IPFS Web UI on a wide array of operating systems and devices, improving compatibility for everyone.
License
MIT © Protocol Labs