IPFS WebUI - Next

IPFS WebUI reboot. A new frontend for your IPFS node.

Background

This is pre-release software.

The current IPFS webui is here: https://github.com/ipfs-shipyard/ipfs-webui

This repo is part of the IPFS GUI redesign project, described here: https://github.com/ipfs-shipyard/pm-ipfs-gui

The app accesses a local IPFS daemon via window.ipfs-fallback. It will use the window.ipfs api provided by the IPFS Companion web-extension where available, and fallback to using js-ipfs-api

The app is built with create-react-app. Please read the docs.

Install

With node > 8.9 and npm @ 6+ installed, run

npm install

Usage

When developing you can run the 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 the unit tests
npm test

# Run the dev server @ http://localhost:3000
npm start

# Run the UI component viewer @ http://localhost:9009
npm run storybook

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 build

Analyze

To inspect the built bundle for bundled modules and their size, first build the app then:

# Run bundle
npm run analyze

Test

The following command will run the app tests, watch source files and re-run the tests when changes are made:

npm test

The 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

Linting

The following command will perform standard linting on the code:

npm run lint

End-to-end tests

The end-to-end tests (e2e) test the full app in a headless Chromium browser. They require an http server be running to serve the app.

In dev, run npm start in another shell before starting the tests

# Run the end-to-end tests
npm run test:e2e

By default the test run headless, so you won't see the 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

# See the end-to-end tests in a browser
DEBUG=true npm run test:e2e

CI

In a continuous integration environment we lint the code, run the unit tests, build the app, start an http server and run the unit e2e tests.

npm run lint
npm test
npm run build
npm run test:ci:e2e

Coverage

To do a single run of the tests and generate a coverage report, run the following:

npm run test:coverage

Contribute

Feel free to dive in! Open an issue or submit PRs.

To contribute to IPFS in general, see the contributing guide.

License

MIT © Protocol Labs