hash urls and work at subdirectories

Author: samuelcolvin

config-overrides.js

@@ -1,6 +1,10 @@
-const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin
+const path = require('path')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 
 module.exports = function override (config, env) {
+  // compile sass
+  // https://github.com/facebookincubator/create-react-app/issues/2498
   config.module.rules[1].oneOf.splice(config.module.rules[1].oneOf.length - 1, 0,
     {
         test: /\.scss$/,
@@ -17,8 +21,11 @@ module.exports = function override (config, env) {
     },
   )
   if (env === 'production') {
+    // set the output filename to just socket.js
     config.output.filename =  'static/socket.js'
     config.output.chunkFilename =  'static/socket.[chunkhash:8].chunk.js'
+
+    // if run with `ANALYSE=1 yarn build` create report.js size report
     if (process.env.ANALYSE) {
       config.plugins.push(
         new BundleAnalyzerPlugin({
@@ -27,6 +34,15 @@ module.exports = function override (config, env) {
         })
       )
     }
+  } else {
+    // add another output file at localhost:3000/foobar/
+    config.plugins.splice(2, 0,
+      new HtmlWebpackPlugin({
+        inject: true,
+        template: path.resolve(__dirname, 'public', 'index.html'),
+        filename: 'foobar/index.html'
+      })
+    )
   }
   // console.dir(config, { depth: 10, colors: true })
   return config

package.json

@@ -28,6 +28,7 @@
     "yarn": "1.3.x"
   },
   "dependencies": {
+    "html-webpack-plugin": "^2.30.1",
     "marked": "^0.3.7",
     "node-sass": "^4.7.2",
     "raven-js": "^3.20.1",

public/index.html

@@ -30,6 +30,7 @@
     var api_root = null  // 'http://localhost:8000'
     var socket1 = socket(public_key, {
       element: '#socket1',
+      router_mode: 'history',
       api_root: api_root,
       mode: 'grid',
       event_callback: function (name, v) {

src/components/App.js

@@ -14,6 +14,8 @@ class App extends Component {
       error: props.error,
       enquiry_form_info: null,
     }
+    this.url_base = props.config.router_mode === 'history' ? props.config.url_root : '/'
+    this.url = this.url.bind(this)
     this.get_text = this.get_text.bind(this)
 
     this.get_enquiry = this.get_enquiry.bind(this)
@@ -26,6 +28,10 @@ class App extends Component {
     }
   }
 
+  url (url_) {
+    return this.url_base + url_
+  }
+
   get_text (name, replacements) {
     let s = this.props.config.messages[name]
     for (let [k, v] of Object.entries(replacements || {})) {

src/components/contractors/Contractors.js

@@ -30,9 +30,9 @@ class Contractors extends Component {
 
   subject_change (selected_subject) {
     if (selected_subject) {
-      this.props.history.push(`/subject/${slugify(selected_subject.name)}`)
+      this.props.history.push(this.props.root.url(`subject/${slugify(selected_subject.name)}`))
     } else {
-      this.props.history.push(`/`)
+      this.props.history.push(this.props.root.url(''))
     }
     this.update_contractors(selected_subject)
   }
@@ -77,9 +77,9 @@ class Contractors extends Component {
               subjects={this.state.subjects}
               selected_subject={this.state.selected_subject}
               subject_change={this.subject_change}
-              get_text={this.props.root.get_text}/>
+              root={this.props.root}/>
 
-        <Route path="/:id([0-9]+):_extra" render={props => (
+        <Route path={this.props.root.url(':id([0-9]+):_extra')} render={props => (
           <ConModal id={props.match.params.id}
                     contractors={this.state.contractors}
                     got_contractors={this.state.got_contractors}

src/components/contractors/Grid.js

@@ -8,7 +8,7 @@ const Grid = props => {
   let description = ''
   if (props.selected_subject) {
     const msg_id_suffix = props.contractors.length === 1 ? 'single' : 'plural'
-    description = props.get_text('subject_filter_summary_' + msg_id_suffix, {
+    description = props.root.get_text('subject_filter_summary_' + msg_id_suffix, {
       count: props.contractors.length,
       subject: props.selected_subject.name,
     })
@@ -32,7 +32,7 @@ const Grid = props => {
       <div className="tcs-flex">
         {props.contractors.map((contractor, i) => (
           <div key={i} className="tcs-col">
-            <Link to={`/${contractor.link}`} className="tcs-box">
+            <Link to={props.root.url(contractor.link)} className="tcs-box">
               <img src={contractor.photo} alt={contractor.name} className="tcs-thumb"/>
               <h3 className="tcs-name">{contractor.name}</h3>
             </Link>

src/components/enquiry/EnquiryButton.js

@@ -4,11 +4,11 @@ import EnquiryModal from './EnquiryModal'
 
 const EnquiryButton = ({root, config}) => (
   <div className="tcs-app">
-    <Link to="/enquiry" className="tcs-enquiry-button">
+    <Link to={root.url('enquiry')} className="tcs-enquiry-button">
       {root.get_text('enquiry_button')}
     </Link>
 
-    <Route path="/enquiry" render={props => (
+    <Route path={root.url('enquiry')} render={props => (
       <EnquiryModal root={root} config={config} history={props.history}/>
     )}/>
   </div>

src/index.js

@@ -3,7 +3,7 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import './main.scss'
 import App from './components/App'
-import {BrowserRouter as Router} from 'react-router-dom'
+import {BrowserRouter, HashRouter} from 'react-router-dom'
 import {auto_url_root} from './utils'
 
 const raven_config = {
@@ -122,6 +122,8 @@ window.socket = function (public_key, config) {
 
   console.debug('using config:', config)
 
+  const Router = config.router_mode === 'history' ? BrowserRouter : HashRouter
+
   const v = ReactDOM.render(<Router><App error={error} public_key={public_key} config={config}/></Router>, el)
   // TODO provide a better object here?
 

yarn.lock

@@ -3113,6 +3113,17 @@ [email protected]:
     pretty-error "^2.0.2"
     toposort "^1.0.0"
 
+html-webpack-plugin@^2.30.1:
+  version "2.30.1"
+  resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-2.30.1.tgz#7f9c421b7ea91ec460f56527d78df484ee7537d5"
+  dependencies:
+    bluebird "^3.4.7"
+    html-minifier "^3.2.3"
+    loader-utils "^0.2.16"
+    lodash "^4.17.3"
+    pretty-error "^2.0.2"
+    toposort "^1.0.0"
+
 htmlparser2@~3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.3.0.tgz#cc70d05a59f6542e43f0e685c982e14c924a9efe"