Issue #98 - Switch from react-scripts to Neutrino (#109)

Add NPM_CONFIG_PRODUCTION=false in order for Neutrino to get installed before heroku-postbuild is run.
2018-02-09 08:37:49 -05:00 · 2018-02-09 08:37:49 -05:00 · 2ff3050eab
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -1,10 +1,5 @@
-module.exports = {
-    "extends": "airbnb",
-    "rules": {
-      "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
-      "react/prop-types": "off",
-      "no-undef": "off",
-      "no-console": "off",
-      "no-underscore-dangle": "off",
-    }
-};
+const { Neutrino } = require('neutrino');
+
+module.exports = Neutrino()
+  .use('.neutrinorc.js')
+  .call('eslintrc');
--- a/.neutrinorc.js
+++ b/.neutrinorc.js
@ -0,0 +1,31 @@
+module.exports = {
+  use: [
+    [
+      '@neutrinojs/airbnb',
+      {
+        eslint: {
+          rules: {
+            "comma-dangle": "off",
+            "indent": "off",
+            "no-console": "off",
+            "no-undef": "off",
+            "no-underscore-dangle": "off",
+            "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
+            "react/prop-types": "off",
+          }
+        }
+      }
+    ],
+    [
+      '@neutrinojs/react',
+      {
+        html: {
+          title: 'Firefox code coverage diff viewer',
+          links: [
+            "https://fonts.googleapis.com/css?family=Fira+Sans:300,400"
+          ]
+        }
+      }
+    ]
+  ]
+};
--- a/app.json
+++ b/app.json
@ -1,11 +1,12 @@
 {
  "name": "firefox-code-coverage-frontend",
  "description": "A frontend to show code coverage data",
-  "repository": "https://github.com/armenzg/firefox-code-coverage-frontend",
+  "repository": "https://github.com/mozilla/firefox-code-coverage-frontend",
  "website": "https://firefox-code-coverage.herokuapp.com",
  "scripts": {
  },
  "env": {
+    "NPM_CONFIG_PRODUCTION": "false"
  },
  "formation": {
    "web": {
@ -21,7 +22,7 @@
      "url": "heroku/nodejs"
    },
    {
-      "url": "https://github.com/hone/heroku-buildpack-static"
+      "url": "https://github.com/heroku/heroku-buildpack-static"
    }
  ]
 }
--- a/package.json
+++ b/package.json
@ -1,17 +1,19 @@
 {
  "homepage": "https://firefox-code-coverage.herokuapp.com",
+  "version": "1.0.0",
+  "main": "index.jsx",
+  "author": "Armen Zambrano G. <armenzg@mozilla.com>",
+  "repository": "git@github.com:mozilla/firefox-code-coverage-frontend.git",
  "engines": {
    "node": ">=6.0.0",
    "npm": ">=5.0.0",
    "yarn": ">=1.0.0"
  },
  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject",
-    "lint": "./node_modules/.bin/eslint src/",
-    "heroku-prebuild": "yarn install && yarn build"
+    "build": "neutrino build",
+    "start": "neutrino start",
+    "lint": "neutrino lint",
+    "heroku-postbuild": "neutrino build"
  },
  "dependencies": {
    "chroma-js": "^1.3.4",
@ -20,13 +22,15 @@
    "parse-diff": "^0.4.0",
    "prop-types": "^15.6.0",
    "query-string": "^5.0.1",
-    "react": "^15.6.1",
-    "react-dom": "^15.6.1",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-hot-loader": "^3.1.3",
    "react-interval": "^2.0.2",
-    "react-router-dom": "^4.1.2",
-    "react-scripts": "1.0.15"
+    "react-router-dom": "^4.1.2"
  },
  "devDependencies": {
+    "@neutrinojs/airbnb": "^8.1.1",
+    "@neutrinojs/react": "^8.1.1",
    "babel-cli": "^6.26.0",
    "babel-preset-flow": "^6.23.0",
    "eslint": "^4.7.2",
@ -34,6 +38,7 @@
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-jsx-a11y": "^5.1.1",
    "eslint-plugin-react": "^7.3.0",
-    "flow-bin": "^0.54.1"
+    "flow-bin": "^0.54.1",
+    "neutrino": "^8.1.1"
  }
 }
--- a/public/index.html
+++ b/public/index.html
@ -1,42 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="theme-color" content="#000000">
-    <!--
-      manifest.json provides metadata used when your web app is added to the
-      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <link href="https://fonts.googleapis.com/css?family=Fira+Sans:300,400"
-      rel="stylesheet">
-    <title>Firefox code coverage diff viewer</title>
-  </head>
-  <body>
-    <noscript>
-      You need to enable JavaScript to run this app.
-    </noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
-</html>
--- a/src/index.js
+++ b/src/index.js
@ -1,10 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { HashRouter } from 'react-router-dom';
-
-import App from './components/app';
-
-ReactDOM.render(
-  <HashRouter><App /></HashRouter>,
-  document.getElementById('root'),
-);
--- a/src/index.jsx
+++ b/src/index.jsx
@ -0,0 +1,20 @@
+import { render } from 'react-dom';
+import { AppContainer } from 'react-hot-loader';
+import { HashRouter } from 'react-router-dom';
+import App from './components/app';
+
+const root = document.getElementById('root');
+const load = () => render((
+  <AppContainer>
+    <HashRouter>
+      <App />
+    </HashRouter>
+  </AppContainer>
+), root);
+
+// This is needed for Hot Module Replacement
+if (module.hot) {
+  module.hot.accept('./components/app', load);
+}
+
+load();
--- a/yarn.lock
+++ b/yarn.lock