Reverting to hashHistory for cross-platform URL stability; Setting baseURL in index.js

mopidy_iris/static/.htaccess

@@ -1,15 +1,15 @@
 RewriteEngine On
 
-RewriteBase /
+RewriteBase /iris/
 
 # Handle Mopidy-Images requests
 # TODO: Look to move this into the Thumbnail component 
 RewriteRule ^images/(.*)$ http://%{HTTP_HOST}:6680/images/$1 [NC,L]
 
-# Rewrite /iris subfolder
+# Rewrite iris subfolder
+# This is required so our HTML file can use /iris/ as baseURL for mopidy-styled domain (ie localhost:6680/iris/index.html)
 RewriteRule ^iris/(.*)$ /$1 [NC,L]
 
-# All nont-file requests go to React
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
 RewriteRule . /index.html [L]

package.json

@@ -35,8 +35,8 @@
 		"react-fontawesome": "*"
 	},
 	"scripts": {
-		"dev": "./build.sh & NODE_ENV=development webpack & sass src/scss/app.scss public_html/app.css",
-		"prod": "NODE_ENV=production webpack"
+		"dev": "./build.sh & NODE_ENV=development webpack",
+		"prod": "./build.sh & NODE_ENV=production webpack"
 	},
 	"author": "James Barnsley",
 	"license": "ISC"

src/.htaccess

@@ -6,6 +6,10 @@ RewriteBase /iris/
 # TODO: Look to move this into the Thumbnail component 
 RewriteRule ^images/(.*)$ http://%{HTTP_HOST}:6680/images/$1 [NC,L]
 
+# Rewrite iris subfolder
+# This is required so our HTML file can use /iris/ as baseURL for mopidy-styled domain (ie localhost:6680/iris/index.html)
+RewriteRule ^iris/(.*)$ /$1 [NC,L]
+
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
 RewriteRule . /index.html [L]

src/js/components/GridItem.js

@@ -1,6 +1,6 @@
 
 import React, { PropTypes } from 'react'
-import { Link, browserHistory } from 'react-router'
+import { Router, Link, hashHistory } from 'react-router'
 import FontAwesome from 'react-fontawesome'
 
 import Thumbnail from './Thumbnail'
@@ -14,7 +14,7 @@ export default class GridItem extends React.Component{
 
 	handleClick(e){
 		if( e.target.tagName.toLowerCase() !== 'a' ){
-			browserHistory.push( this.props.link );
+			hashHistory.push(this.props.link)
 		}
 	}
 

src/js/components/List.js

@@ -1,6 +1,6 @@
 
 import React, { PropTypes } from 'react'
-import { Link, browserHistory } from 'react-router'
+import { Link, hashHistory } from 'react-router'
 import FontAwesome from 'react-fontawesome'
 
 import ArtistSentence from './ArtistSentence'
@@ -17,7 +17,7 @@ export default class List extends React.Component{
 
 		// make sure we haven't clicked a nested link (ie Artist name)
 		if( e.target.tagName.toLowerCase() !== 'a' ){
-			browserHistory.push( this.props.link_prefix + encodeURIComponent(uri) );
+			hashHistory.push( this.props.link_prefix + encodeURIComponent(uri) );
 		}		
 	}
 

src/js/index.js

@@ -6,7 +6,7 @@ import React, { PropTypes } from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux'
 import { createStore } from 'redux'
-import { Router, Route, Link, IndexRoute, browserHistory } from 'react-router'
+import { Router, Route, Link, IndexRoute, hashHistory } from 'react-router'
 
 import store from './bootstrap.js'
 
@@ -37,11 +37,11 @@ import LibraryLocalArtists from './views/library/LibraryLocalArtists'
 import LibraryLocalAlbums from './views/library/LibraryLocalAlbums'
 import LibraryLocalDirectory from './views/library/LibraryLocalDirectory'
 
-global.baseURL = '/iris/'
+global.baseURL = '/'
 
 ReactDOM.render(
 	<Provider store={store}>
-		<Router history={browserHistory}>
+		<Router history={hashHistory}>
 			<Route path={global.baseURL} component={App}>
 
      			<IndexRoute component={Queue} />

src/js/views/library/LibraryLocal.js

@@ -19,17 +19,17 @@ export default class LibraryLocal extends React.Component{
 			{
 				name: 'Artists',
 				link: global.baseURL+'library/local/artists',
-				icons: ['/assets/backgrounds/category-artists.jpg']
+				icons: ['assets/backgrounds/category-artists.jpg']
 			},
 			{
 				name: 'Albums',
 				link: global.baseURL+'library/local/albums',
-				icons: ['/assets/backgrounds/category-albums.jpg']
+				icons: ['assets/backgrounds/category-albums.jpg']
 			},
 			{
 				name: 'Folders',
 				link: global.baseURL+'library/local/directory/local:directory',
-				icons: ['/assets/backgrounds/category-folders.jpg']
+				icons: ['assets/backgrounds/category-folders.jpg']
 			}
 		]