Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/unstoppabledomains/unstoppable-demo-browser
Demo Browser For Developer
https://github.com/unstoppabledomains/unstoppable-demo-browser
Last synced: about 2 months ago
JSON representation
Demo Browser For Developer
- Host: GitHub
- URL: https://github.com/unstoppabledomains/unstoppable-demo-browser
- Owner: unstoppabledomains
- License: mit
- Archived: true
- Created: 2019-10-15T21:14:51.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2022-03-02T00:55:13.000Z (over 2 years ago)
- Last Synced: 2024-07-03T09:25:21.030Z (3 months ago)
- Language: TypeScript
- Size: 2.1 MB
- Stars: 54
- Watchers: 12
- Forks: 26
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Unstoppable Blockchain Browser
The Unstoppable Blockchain Browser is a web browser that can browse the decentralized web. Use it
to visit blockchain TLD websites. The Unstoppable Blockchain Browser is the first web browser to natively support an IPFS node, allowing users to easily seed their favorite websites with a click of a button.
This is a community project, open sourced under MIT license. The goal is to help users and developers play around with new emerging tools and visualize what's possible on the emerging decentralized internet. The browser is a bare bones implementation, does not support cookies or local storage, and should not be seen as a replacement for your regular browser when viewing website applications with significant backend interaction. We intend for this browser to explore radical decentralized web ideas and act as a good resource for both the community and mainstream browsers to look to for ideas and solutions for implementing decentralized websites browsing more broadly. If you have a commercial project that would like to use this code feel free to reach out with any questions - it's MIT licensed and we are committed to supporting projects that want to work in tihs ecosystem however we can to make the decentralized internet a reality - it's going to take a village :-)
Please take as much of this code as your want, contribute to the project, or fork it and make your own, the more diversity in the decentralized web ecosystem the better. If you have a particular feature or functionality you'd like added, please submit a github issue request. Our team will work to support this browser going forward, and the issues with the most community support will also receive bounties to encourage other developers to participate and contribute.
Happy surfing on the truly free internet!
# Motivation
[Unstoppable Domains](https://unstoppabledomains.com) is building a new DNS system. Unlike traditional DNS systems (which store domain data on centrally managed servers) Unstoppable DNS data is stored on the blockchain. This architecture has two big benefits.
* **Domain lookups are impossible to block**
* **Domain names are impossible to seize**By combining blockchain domains with websites and content hosted on peer-to-peer filesystems you can build and deploy your own uncensorable website, content, and service.
Use the Unstoppable Demo Browser to experience and explore the uncensorable web today.
# Screenshots
![](screenshots/unstoppablebrowserscreenshot-oct-31.png)
# How we resolve domain names
## API
Unstoppable provides an API for blockchain domain name lookups. By default the Unstoppable Demo Browser queries an API to figure out what an address maps to because direct blockchain lookup is a bit slow. This makes browsing easier. For a more trustless approach you can resolve domain names using direct blockchain lookups by configuring the settings in the browser.
## Using 3rd party blockchain APIs
You can also use a 3rd party API like Infura or other well known trusted API's to resolve blockchain domains. This method puts trust in the validity of the API of your choosing. If you want a more trustless approach you can resolve domain names directly from the blockchain itself.
## Directly off the blockchain
If you are running a local copy of the blockchain(s) you wish to resolve, or you have a particular node you trust this method will read domain data directly from your own node. This method is fairly trustless.
# How we load IPFS websites
The [IPFS](https://ipfs.io/) stores files by hash on a distributed peer-to-peer network. IPFS files can be referenced by a unique hash --> QmUD69diRF8jwju2k4b9mD7PaXMjtMAKafqascL18VKvoD --> try remembering that.
You can use this unique hash to retrieve files off the IPFS network. These files can be images, web pages, pdfs, anything. The Unstoppable Demo Browser supports loading static html websites off of the IPFS network.
We support 2 main methods of loading IPFS sites. CDN-based loads and direct loads.
## Via CDNs
CDNs are networks of servers managed by companies like [Cloudflare](https://www.cloudflare.com) and [Infura](https://infura.io/) that cache and mirror content to help improve load times and distribute request load.
Both of these companies provide services that cache content from the IPFS network and serve it over standard HTTP connections.
The advantage of this approach is that pages load fast.
By default the Unstoppable Demo Browser retrieves content from CDNs. If you are concerned with censorship or are interested in IPFS web browsing experience you can load load data directly off of IPFS.
## Directly off the IPFS filesystem
We can also load data directly off of IPFS. If you use this approach you should expect slower performance since files on IPFS are fetched differently from files stored on standard servers.
# Running the code for this project
## Project overview
The Unstoppable Demo Browser is based on [Electron](https://electronjs.org/). Websites are rendered using Chromium (the same engine that powers Google Chrome) while the browser UI and control logic is implemented in JavaScript.
The project also uses [Typescript](https://www.typescriptlang.org/), [React](https://reactjs.org/), [Styled Components](https://www.styled-components.com/) and [Mobx](https://mobx.js.org/README.html). Project files are compiled with [Webpack](https://webpack.js.org/).
Electron applications are usually built in two pieces. There is a main application (src/electron/index.ts) --> this code opens a blank chrome window and loads html into that window. Then there is the html content that defines the UI and application flow (src/browserui/views/browser/index.tsx).
When you want to develop for this project you will need to run a process to generate the HTML alongside a process for the browser window.
## Setup
If you haven't already...
* [Install git (for downloading code from this repo)](https://gist.github.com/derhuerst/1b15ff4652a867391f03#file-mac-md)
* [Install npm (required to build this project)](https://www.npmjs.com/get-npm)
* [Install VSCode (an ide for working with typescript - recommended)](https://code.visualstudio.com/)Clone this repo to your local computer -->
```
git clone https://github.com/unstoppabledomains/unstoppable-demo-browser
cd unstoppable-demo-browser# Use npm to install project dependencies
npm install
# Dependencies will be installed into the node_modules folder
# Globally install the following dependenciesnpm install --global webpack
npm install --global webpack-dev-server
npm install --global cross-env```
Open the unstoppable-demo-browser folder in VSCode. You're good to go.
## Running the project
Running this project involves starting 2 separate processes.
* The renderer process (npm run dev) generates html that describes the browser UI and handles user clicks and actions.
* The main process (npm run start) launches a blank browser window and loads content from the renderer into it.To launch the browser -->
```
# Open two terminals. Make sure you're in the unstoppable-demo-browser folder in both terminals
# If you're not in the unstoppable-demo-browser folder you can use the 'cd' command to get there# Start the renderer process in the first terminal
npm run dev# Wait for the renderer process to boot up -->
# this needs process needs to boot first so that there is HTML content to load into the main process browser window# Start the main process in the second terminal
npm run start# A browser window should show up
# If all you see is a blank window check to make sure that the renderer process booted up successfully
```## Building a release
The source for the Unstoppable Demo Browser is written in Typescript and React. These languages get compiled into vanilla JavaScript by Webpack.
The output for the compile process are js and html files that are located in the build sub-folder.```
# You can trigger a build operation by running -->npm run build
# Check the build sub-folder and notice app.html and app.bundle.js files.
# These files are the html content that gets loaded into the main process browser window.
```To build a release -->
```
# For mac
npm run compile-darwin# For win
npm run compile-win# Mac OS can compile both windows and mac builds... but windows can only comiple windows builds :p
# You will find the output of this operation in the dist folder
```To publish a release to github --> [instructions for electron builder](https://www.electron.build/configuration/publish)
[To setup a github token](https://help.github.com/en/github/authenticating-to-github/creating-a-personal-access-token-for-the-command-line)Create a new github token with write:packages and read:packages permissions
Add the github auth token to your environment variables
```
# Mac
vim ~/.bash_profile# Add aline for GH_TOKEN
# Win
# Use the environment variable config screen... tutorial
# https://superuser.com/questions/949560/how-do-i-set-system-environment-variables-in-windows-1
```Update the version number in package.json
Run the compile command
A release should get generated on your local machine in the dist folder and should get uploaded to github
You should be able to see the release on github under the releases tab
To test the auto-update feature locally you will need to create a local dev-app-update.yml file in the root directory with the following contents.
```
provider: github
publishAutoUpdate: true
repo:
owner:
```### App signing and notorizing Applicaitonon on Mac
#### App Signing
If you want to build a mac executable where auto-update works, you'll need to do the following.
1. Download XCode
2. Sign up for an Apple Developer Account
3. Open your local Keychain and generate a key for Apple to notorize
1. Keychain Access --> Certificate Assistant --> Request a certificate from a certificate authority
2. Save the generated file to your desktop
4. Notorize your generated file on developer.apple.com
1. Certificates --> + --> Apple Distribution
2. Upload the generated file for notorization
3. Download the resulting production.cer file
5. Double click production.cer to put it into your keychain
* Note... at first we didn't have XCode installed and were getting errors about certificate not being trusted... so you'll need to install XCode for this to workAfter this running `npm run compile-darwin` will generate and upload a signed version of the browser to github.
If you just want to test building a browser locally you can run `npm run compile-darwin-local`.
It can be hard to know if the app signing process is working. I found an application called [RBAppChecker Lite](https://brockerhoff.net/RB/AppCheckerLite/) that allowed me to see the signature information and make sure it was correct.
#### Notorizing
Starting with MacOS 10.14.5, all signed applications by ‘new’ developers will need to be notarized or they will trigger Apple’s Gatekeeper software and prevent users from installing your app.
https://kilianvalkhof.com/2019/electron/notarizing-your-electron-application/
# Contributing
If you have found any bugs or questions feel free to open an issue. If you are interested in working with [Unstoppable Domains](https://unstoppabledomains.com/) please get in touch via the Unstoppable Domains website.
# Useful resources
If you're new to the JavaScript ecosystem and want to understand typescript [I found this guide to be helpful](https://medium.com/free-code-camp/how-to-set-up-a-typescript-project-67b427114884#51cb).