Building to sub /assets/ folder

.htaccess

@@ -0,0 +1,14 @@
+RewriteBase /
+
+# Rewrite our application folders
+RewriteRule ^iris/app/(.*) app/$1 [L]
+RewriteRule ^iris/assets/(.*) assets/$1 [L]
+
+# stuff to let through (ignore)
+RewriteCond %{REQUEST_URI} "/app/" [OR]
+RewriteCond %{REQUEST_URI} "/assets/"
+RewriteRule (.*) $1 [L]
+
+# Rewrite everything else to our ReactJS app
+# This allows nice URLS and React-Router will do the rest
+RewriteRule ^ index.html [L]

build_tools/build.js

@@ -17,6 +17,10 @@ version = version.replace(/\r?\n?/g, '').trim();
 var build = Math.floor(Date.now() / 1000);
 console.log('Building version '+version+' ('+build+')');
 
+if (!fs.existsSync('mopidy_iris/static/app/')){
+	fs.mkdirSync('mopidy_iris/static/app/');
+}
+
 copyfile('src/service-worker.js', 'mopidy_iris/static/service-worker.js', function(error){
 	if (error){
 		console.log('Build failed, could not copy service-worker.js', error);
@@ -25,7 +29,7 @@ copyfile('src/service-worker.js', 'mopidy_iris/static/service-worker.js', functi
 	console.log('Copied service-worker.js');
 });
 
-copyfile('src/manifest.json', 'mopidy_iris/static/manifest.json', function(error){
+copyfile('src/manifest.json', 'mopidy_iris/static/app/manifest.json', function(error){
 	if (error){
 		console.log('Build failed, could not copy manifest.json', error);
 		return false;

mopidy_iris/__init__.py

@@ -79,21 +79,47 @@ def iris_factory(config, core):
     path = os.path.join( os.path.dirname(__file__), 'static')
     
     return [
-        (r"/images/(.*)", tornado.web.StaticFileHandler, {
-            'path': config['local-images']['image_dir']
-        }),
-        (r'/http/([^/]*)', handlers.HttpHandler, {
-            'core': core,
-            'config': config
-        }),
-        (r'/ws/?', handlers.WebsocketHandler, { 
-            'core': core,
-            'config': config
-        }),
-        (r'/([^.]*)', ReactRouterHandler, {
-            'path': path+'/index.html'
-        }),
-        (r'/(.*)', tornado.web.StaticFileHandler, {
-            'path': path
-        }),
+        (
+            r"/images/(.*)", 
+            tornado.web.StaticFileHandler,
+            {
+                'path': config['local-images']['image_dir']
+            }
+        ),
+        (
+            r'/http/([^/]*)',
+            handlers.HttpHandler, 
+            {
+                'core': core,
+                'config': config
+            }
+        ),
+        (
+            r'/ws/?',
+            handlers.WebsocketHandler,
+            { 
+                'core': core,
+                'config': config
+            }
+        ),
+        (
+            r'/assets/(.*)',
+            tornado.web.StaticFileHandler,
+            {
+                'path': path+'/assets'
+            }
+        ),
+        (
+            r'/app/(.*)',
+            tornado.web.StaticFileHandler,
+            {
+                'path': path+'/app'
+            }
+        ),
+        (
+            r'/(.*)',
+            ReactRouterHandler, {
+                'path': path+'/index.html'
+            }
+        ),
     ]

mopidy_iris/static/.htaccess

@@ -1,15 +1,16 @@
-<IfModule mod_rewrite.c>
-	
-	RewriteEngine On
+RewriteBase /
 
-	# Remove /iris/ from all requests (except /ws) to accommodate the
-	# ./mopidy/{extension} webserver format
-	RewriteCond %{REQUEST_URI} !^/ws/
-	RewriteRule ^iris/(.*)$ /$1 [NC,L]
+# Rewrite our application folders
+RewriteRule ^iris/service-worker.js app/service-worker.js [L]
+RewriteRule ^iris/assets/(.*) assets/$1 [L]
+RewriteRule ^iris/app/(.*) app/$1 [L]
 
-	# Rewrite all non-file URLs to our React index.html
-	# This is essential for React Router to handle page refreshers
-	RewriteCond %{REQUEST_URI} ^(.*)$
-	RewriteCond %{REQUEST_FILENAME} !-f
-	RewriteRule .* index.html [L]
-</IfModule>
+# Setup non-react folders and assets. These need to be accessible
+# outside of the ReactJS app.
+RewriteCond %{REQUEST_URI} app [OR]
+RewriteCond %{REQUEST_URI} assets
+RewriteRule (.*) $1 [L]
+
+# Rewrite everything else to our ReactJS app
+# This allows nice URLS and React-Router will do the rest
+RewriteRule ^ index.html [L]

mopidy_iris/static/app.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"app.css","sourceRoot":""}

mopidy_iris/static/app.min.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"app.min.css","sourceRoot":""}

mopidy_iris/static/app/app.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"app/app.css","sourceRoot":""}

mopidy_iris/static/app/app.js

@@ -1527,16 +1527,15 @@ var uriType = exports.uriType = function uriType(uri) {
 var buildLink = exports.buildLink = function buildLink(uri) {
 
 	// Start the link with the URI type
-	var link = "/" + uriType(uri) + "/";
+	var type = uriType(uri);
+	var link = "/" + type + "/";
 
-	// Remove any forward slashes. These interfere with encoding as they're
-	// technically a valid URL component.
-	//uri = uri.replace('/','%2F');
+	// Encode the whole URI as though it's a component. This makes it URL friendly for 
+	// all Mopidy backends (some use URIs like local:track:http://rss.com/stuff.mp3) which
+	// is never going to work nicely.
 	uri = encodeURIComponent(uri);
 	link += uri;
 
-	console.log(link);
-
 	return link;
 };
 
@@ -7511,7 +7510,7 @@ var sendRequest = function sendRequest(dispatch, getState, params) {
 
             // Snatch a more meaningful error
             var description = null;
-            if (xhr.responseJSON.message) {
+            if (xhr && xhr.responseJSON && xhr.responseJSON.message) {
                 description = xhr.responseJSON.message;
             }
 
@@ -76175,8 +76174,9 @@ var Track = function (_React$Component) {
  * Rebuild a track URI with some ugly-ass handling of encoding.
  *
  * Basically the ID part of a Mopidy URI needs to be encoded, but the rest of the URI can't be.
- * This means we need to break down the URI (decoded) and then reconstruct with an encoded ID
- * because the URI is passed to us from a URL.
+ * This means we need to break down the URI (decoded) and then reconstruct with an encoded ID.
+ * This is all required because he URI is passed to us *from* a URL which has been encoded for
+ * obvious reasons.
  *
  * @param uri String
  * @return String
@@ -76201,6 +76201,8 @@ var mapStateToProps = function mapStateToProps(state, ownProps) {
 	var uri = decodeURIComponent(ownProps.match.params.uri);
 	uri = rebuildUri(uri);
 
+	console.log(uri);
+
 	return {
 		uri: uri,
 		slim_mode: state.ui.slim_mode,

mopidy_iris/static/app/app.min.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"app/app.min.css","sourceRoot":""}

mopidy_iris/static/app/manifest.json

@@ -24,7 +24,7 @@
       "sizes": "512x512"
     }
   ],
-  "start_url": "/iris/#/",
+  "start_url": "/iris/",
   "background_color": "#08d58f",
   "theme_color": "#181818",
   "display": "standalone",

mopidy_iris/static/app/service-worker.js

@@ -0,0 +1,3 @@
+self.addEventListener('fetch', (event) => {
+	// Nothing doing!
+});

mopidy_iris/static/index.html

@@ -7,7 +7,7 @@
 	<meta content="width=device-width, initial-scale=1" name="viewport" />
 	<meta name="viewport" content="width=device-width" />
 
-	<link rel="manifest" href="/iris/manifest.json" />
+	<link rel="manifest" href="/iris/app/manifest.json" />
 
 	<!-- App setup -->
 	<meta name="apple-mobile-web-app-capable" content="yes" />
@@ -85,7 +85,7 @@
 
 <script type="text/javascript">
 	if ('serviceWorker' in navigator){
-		navigator.serviceWorker.register('/iris/service-worker.js')
+		navigator.serviceWorker.register('/iris/app/service-worker.js')
 			.then(function(registration){
 				console.log('Service worker registered');
 			}).catch(function(error){
@@ -98,7 +98,7 @@
 
 	// Release details
 	// These are automatically injected to built HTML
-	var build = "1551075397";
+	var build = "1551219592";
 	var version = "3.33.0";
 
 	// Construct the script tag
@@ -120,13 +120,13 @@
 
 	// Test mode, use un-minified code
     if (test_mode){
-	    css.href = '/iris/app.css?v='+build;
-	    js.src = '/iris/app.js?v='+build;
+	    css.href = '/iris/app/app.css?v='+build;
+	    js.src = '/iris/app/app.js?v='+build;
 
     // Production-grade, minified app
     } else {
-	    css.href = '/iris/app.min.css?v='+build;
-	    js.src = '/iris/app.min.js?v='+build;
+	    css.href = '/iris/app/app.min.css?v='+build;
+	    js.src = '/iris/app/app.min.js?v='+build;
     }
 
 	// And finally inject our CSS/JS tags

src/index.html

@@ -7,7 +7,7 @@
 	<meta content="width=device-width, initial-scale=1" name="viewport" />
 	<meta name="viewport" content="width=device-width" />
 
-	<link rel="manifest" href="/iris/manifest.json" />
+	<link rel="manifest" href="/iris/app/manifest.json" />
 
 	<!-- App setup -->
 	<meta name="apple-mobile-web-app-capable" content="yes" />
@@ -85,7 +85,7 @@
 
 <script type="text/javascript">
 	if ('serviceWorker' in navigator){
-		navigator.serviceWorker.register('/iris/service-worker.js')
+		navigator.serviceWorker.register('/iris/app/service-worker.js')
 			.then(function(registration){
 				console.log('Service worker registered');
 			}).catch(function(error){
@@ -120,13 +120,13 @@
 
 	// Test mode, use un-minified code
     if (test_mode){
-	    css.href = '/iris/app.css?v='+build;
-	    js.src = '/iris/app.js?v='+build;
+	    css.href = '/iris/app/app.css?v='+build;
+	    js.src = '/iris/app/app.js?v='+build;
 
     // Production-grade, minified app
     } else {
-	    css.href = '/iris/app.min.css?v='+build;
-	    js.src = '/iris/app.min.js?v='+build;
+	    css.href = '/iris/app/app.min.css?v='+build;
+	    js.src = '/iris/app/app.min.js?v='+build;
     }
 
 	// And finally inject our CSS/JS tags

src/js/helpers.js

@@ -1116,16 +1116,15 @@ export let uriType = function(uri){
 export let buildLink = function (uri){
 
 	// Start the link with the URI type
-	var link = "/"+uriType(uri)+"/";
+	var type = uriType(uri);
+	var link = "/"+type+"/";
 
-	// Remove any forward slashes. These interfere with encoding as they're
-	// technically a valid URL component.
-	//uri = uri.replace('/','%2F');
+	// Encode the whole URI as though it's a component. This makes it URL friendly for 
+	// all Mopidy backends (some use URIs like local:track:http://rss.com/stuff.mp3) which
+	// is never going to work nicely.
 	uri = encodeURIComponent(uri);
 	link += uri;
 
-	console.log(link);
-
 	return link;
 }
 

src/js/services/lastfm/actions.js

@@ -59,7 +59,7 @@ var sendRequest = (dispatch, getState, params, signed = false) => {
 
                     // Snatch a more meaningful error
                     var description = null;
-                    if (xhr.responseJSON.message){
+                    if (xhr && xhr.responseJSON && xhr.responseJSON.message){
                         description = xhr.responseJSON.message;
                     }
 

src/js/views/Track.js

@@ -270,8 +270,9 @@ class Track extends React.Component{
  * Rebuild a track URI with some ugly-ass handling of encoding.
  *
  * Basically the ID part of a Mopidy URI needs to be encoded, but the rest of the URI can't be.
- * This means we need to break down the URI (decoded) and then reconstruct with an encoded ID
- * because the URI is passed to us from a URL.
+ * This means we need to break down the URI (decoded) and then reconstruct with an encoded ID.
+ * This is all required because he URI is passed to us *from* a URL which has been encoded for
+ * obvious reasons.
  *
  * @param uri String
  * @return String
@@ -294,6 +295,8 @@ const mapStateToProps = (state, ownProps) => {
 	var uri = decodeURIComponent(ownProps.match.params.uri);
 	uri = rebuildUri(uri);
 
+	console.log(uri);
+
 	return {
 		uri: uri,
 		slim_mode: state.ui.slim_mode,

src/manifest.json

@@ -24,7 +24,7 @@
       "sizes": "512x512"
     }
   ],
-  "start_url": "/iris/#/",
+  "start_url": "/iris/",
   "background_color": "#08d58f",
   "theme_color": "#181818",
   "display": "standalone",

src/scss/components/_icon.scss

@@ -3,12 +3,12 @@
     font-family: 'Material Icons';
     font-style: normal;
     font-weight: 400;;
-    src: url(../assets/fonts/MaterialIcons-Regular.eot); /* For IE6-8 */
+    src: url(/iris/assets/fonts/MaterialIcons-Regular.eot); /* For IE6-8 */
     src: local('Material Icons'),
       local('MaterialIcons-Regular'),
-      url(../assets/fonts/MaterialIcons-Regular.woff2) format('woff2'),
-      url(../assets/fonts/MaterialIcons-Regular.woff) format('woff'),
-      url(../assets/fonts/MaterialIcons-Regular.ttf) format('truetype');
+      url(/iris/assets/fonts/MaterialIcons-Regular.woff2) format('woff2'),
+      url(/iris/assets/fonts/MaterialIcons-Regular.woff) format('woff'),
+      url(/iris/assets/fonts/MaterialIcons-Regular.ttf) format('truetype');
 }
 
 .icon {

webpack.config.js

@@ -17,7 +17,7 @@ const config = {
 	
 	output: {
 		path: path.resolve(__dirname, 'mopidy_iris/static'),
-		filename: 'app.js'
+		filename: 'app/app.js'
 	},
 	
 	module: {
@@ -30,7 +30,6 @@ const config = {
 				use: 'expose-loader?jQuery!expose?$'
 			},
 			{
-				// JSX
 				test: /\.js$/,
 				exclude: [
         			/node_modules/,
@@ -51,8 +50,10 @@ const config = {
 				test: /\.scss$/,
 				use: ExtractTextPlugin.extract({
 					fallback: 'style-loader',
-					//resolve-url-loader may be chained before sass-loader if necessary
-					use: ['css-loader', 'sass-loader']
+					use: [
+						'css-loader', 
+						'sass-loader'
+					]
 				})
 			},
 			{
@@ -84,7 +85,7 @@ const config = {
 if (isDev){
 	
 	// set compiled css location
-	config.plugins.push( new ExtractTextPlugin("app.css") );
+	config.plugins.push( new ExtractTextPlugin("app/app.css") );
 	
 	// we want source maps
 	config.devtool = 'source-map';
@@ -96,7 +97,7 @@ if (isDev){
 } else {
 	
 	// set our final output filename
-	config.output.filename = 'app.min.js';
+	config.output.filename = 'app/app.min.js';
 	
 	// re-iterate our production value as a string (for ReactJS building)
 	config.plugins.push(
@@ -114,14 +115,18 @@ if (isDev){
 			use: {
 				loader: 'webpack-strip',
 				options: {
-					strip: ['console.log', 'console.info', 'debug']
+					strip: [
+						'console.log',
+						'console.info',
+						'debug'
+					]
 				}
 			}
 		}
 	);
 	
 	// set compiled css location
-	config.plugins.push( new ExtractTextPlugin("app.min.css") );
+	config.plugins.push( new ExtractTextPlugin("app/app.min.css") );
 	
 	// uglify our js
 	config.devtool = 'sourcemap';