Merge pull request #542 from ensdomains/dev

IPFS support and fix GA

Author: makoto

README.md

@@ -9,7 +9,15 @@ yarn install
 yarn start
 ```
 
-Open your browser at localhost:3000 and open metamask
+Open your browser at localhost:3000 and open metamask.
+
+To start the ipfs-enabled build:
+
+```bash
+yarn start:ipfs
+```
+
+The main difference of the ipfs-build is that it uses HashRouter instead of BrowserRouter and makes sure all links are relative.
 
 ## Unit Testing
 
@@ -112,7 +120,7 @@ ganache-cli
 yarn run preTest
 ```
 
-This runs the app in local ganache mode)
+This runs the app in local ganache mode:
 
 ```bash
 yarn start:test
@@ -122,6 +130,16 @@ yarn start:test
 yarn run cypress:open
 ```
 
+To test the ipfs-build use the respective ":ipfs"-variants of the scripts:
+
+```bash
+yarn start:test:ipfs
+```
+
+```bash
+yarn run cypress:open:ipfs
+```
+
 ## Setting up subgraph
 
 Subgraph is used to list subdomains and all the names you have registered.

cypress_ipfs.json

@@ -0,0 +1,8 @@
+{
+  "env": {
+    "ROOT": "http://localhost:3000/#",
+    "TEST": "http://localhost:3000/#/Test",
+    "NAME_ROOT": "http://localhost:3000/#/name"
+  },
+  "projectId": "rzedru"
+}

package.json

@@ -52,8 +52,11 @@
   },
   "scripts": {
     "start": "react-scripts start",
+    "start:ipfs": "REACT_APP_IPFS=True PUBLIC_URL='.' yarn start",
     "start:test": "REACT_APP_STAGE=local yarn start",
+    "start:test:ipfs": "REACT_APP_STAGE=local yarn start:ipfs",
     "build": "CI=false react-scripts --max_old_space_size=4096 build",
+    "build:ipfs": "REACT_APP_IPFS=True PUBLIC_URL='.' yarn build",
     "postbuild": "cp build/index.html build/200.html",
     "test": "react-scripts test --env=jsdom",
     "test:coverage": "npm test -- --coverage",
@@ -63,10 +66,15 @@
     "subgraph": "node scripts/subgraph.js",
     "advance": "node src/testing-utils/advance.js",
     "cypress:open": "yarn run cypress open",
-    "cypress:record": "yarn run cypress run --record --key $CYPRESS_TOKEN",
+    "cypress:open:ipfs": "yarn run cypress open --config-file cypress_ipfs.json",
+    "cypress:record": "/bin/sh -c 'if [ -z ${CYPRESS_TOKEN+x} ]; then yarn run cypress run; else yarn run cypress run --record --key $CYPRESS_TOKEN; fi'",
+    "cypress:record:ipfs": "/bin/sh -c 'if [ -z ${CYPRESS_TOKEN+x} ]; then yarn run cypress run --config-file cypress_ipfs.json; else yarn run cypress run --config-file cypress_ipfs.json --record --key $CYPRESS_TOKEN; fi'",
     "cypress:run-local": "yarn run cypress run",
+    "cypress:run-local:ipfs": "yarn run cypress run --config-file cypress_ipfs.json",
     "cypress:run": "yarn preTest && start-server-and-test start:test http://localhost:3000 cypress:record",
+    "cypress:run:ipfs": "yarn preTest && start-server-and-test start:test:ipfs http://localhost:3000 cypress:record:ipfs",
     "cypress:ci": "/bin/sh -c 'if [ \"$TRAVIS_PULL_REQUEST\" = \"true\" ]; then yarn cypress:run; else yarn cypress:run; fi'",
+    "cypress:ci:ipfs": "/bin/sh -c 'if [ \"$TRAVIS_PULL_REQUEST\" = \"true\" ]; then yarn cypress:run:ipfs; else yarn cypress:run:ipfs; fi'",
     "deploy:dev": "npm run build && npm run postbuild && surge build ensappdev.surge.sh",
     "deploy": "npm run build && npm run postbuild && surge build app.ens.domains"
   },

src/App.js

@@ -1,6 +1,7 @@
 import React, { Fragment } from 'react'
 import {
-  BrowserRouter as Router,
+  HashRouter,
+  BrowserRouter,
   Route as DefaultRoute,
   Switch
 } from 'react-router-dom'
@@ -24,6 +25,10 @@ import { CONFIRM } from './modals'
 import DefaultLayout from './components/Layout/DefaultLayout'
 import Analytics from './utils/analytics'
 
+// If we are targeting an IPFS build we need to use HashRouter
+const Router =
+  process.env.REACT_APP_IPFS === 'True' ? HashRouter : BrowserRouter
+
 const HomePageLayout = ({ children }) => <Fragment>{children}</Fragment>
 
 const Route = ({

src/utils/analytics.js

@@ -1,23 +1,24 @@
-import ReactGA from 'react-ga';
+import ReactGA from 'react-ga'
 const TrackingID = 'UA-138903307-1'
 
-function isProduction(){
-  return window.location.host === 'manager.ens.domains'  
+function isProduction() {
+  return window.location.host === 'app.ens.domains'
 }
 
 export const setup = () => {
-  if(isProduction()){
-    ReactGA.initialize(TrackingID);
+  if (isProduction()) {
+    ReactGA.initialize(TrackingID)
   }
 }
 
 export const pageview = () => {
   const page = window.location.pathname + window.location.search
-  if(isProduction()){
-    ReactGA.pageview(page);
+  if (isProduction()) {
+    ReactGA.pageview(page)
   }
 }
 
 export default {
-  setup, pageview
+  setup,
+  pageview
 }