Add build for deployment using jinja2 templating for url base

configuration/webpack/webpack.config.prod.js

@@ -64,7 +64,8 @@ module.exports = {
   plugins: [
     new HtmlWebpackPlugin({
       inject: 'body',
-      template: path.resolve('index.html'),
+      filename: 'index.html',
+      template: path.resolve('index_template.html'),
       favicon: path.resolve('favicon.png'),
       inlineSource: '.(js|css)$',
       minify: {

index_template.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Cellx</title>
+    <style>
+      html, body, p, h1, h2, h3, h4, h5, h6, span, button, input {
+        font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
+        font-size: 16px;
+      }
+    </style>
+  </head>
+  <body>
+<script type="text/javascript">
+  window.CELLXGENE = {}
+  window.CELLXGENE.API= {
+  	prefix: "{{ prefix | safe }}",
+    version: "v0.1/",
+  }
+</script>
+    <noscript>If you're seeing this message, that means <strong>JavaScript has been disabled on your browser</strong>, please <strong>enable JS</strong> to make this app work.</noscript>
+
+    <div id="root"></div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.js"></script>
+    <script src="//d3js.org/d3-scale-chromatic.v0.3.min.js"></script>
+  </body>
+</html>

package.json

@@ -5,6 +5,7 @@
   "repository": "https://github.com/chanzuckerberg/cellxgene",
   "scripts": {
     "build": "npm run clean && webpack --config configuration/webpack/webpack.config.prod.js",
+    "dev": "npm run clean && webpack --config configuration/webpack/webpack.config.dev.js",
     "clean": "rimraf build",
     "start": "node server/development.js",
     "lint": "eslint src",

src/globals.js

@@ -35,12 +35,14 @@ export const tiniestFontSize = 12;
 
 export const bolder = 700;
 
-export const API = {
+export let API = {
   // prefix: "http://api.clustering.czi.technology/api/",
   prefix: "http://api-staging.clustering.czi.technology/api/",
   version: "v0.1/",
 }
 
+if (window.CELLXGENE && window.CELLXGENE.API) API = window.CELLXGENE.API;
+
 export const accentFont = "Georgia,Times,Times New Roman,serif";
 export const maxParagraphWidth = 600;
 export const maxControlsWidth = 800;