Fixed most issues with Windows, still error with posting to backend. Possible solution would be to put frontend and backend in same container

README.md

@@ -20,6 +20,4 @@ This will ensure that the services we've created start up correctly.
 
 Once this is done you should be able to access Musare in your local browser at [localhost](http://localhost:8080/).
 
-  > The backend is at [localhost:8081](http://localhost:8081/).
-
-### FAQ
+If you are using Docker ToolBox, you will access Musare at `192.168.99.100` instead of `localhost` or `127.0.0.1`.

backend/app.js

@@ -13,6 +13,7 @@ const express          = require('express'),
       mongoose         = require('mongoose'),
 	  MongoStore       = require('connect-mongo')(session),
       bodyParser       = require('body-parser'),
+	  cors			   = require('cors'),
       config           = require('config'),
       request          = require('request'),
       passport         = require('passport'),
@@ -26,7 +27,7 @@ const express          = require('express'),
 const global = require('./logic/global');
 
 // database
-const MongoDB = mongoose.connect('mongodb://172.16.0.1:27017/musare').connection;
+const MongoDB = mongoose.connect(`mongodb://${config.get('domain')}:27017/musare`).connection;
 
 MongoDB.on('error', (err) => {
 	console.log('Database error: ' + err.message);
@@ -43,7 +44,7 @@ function setupExpress() {
 	const server = app.listen(80);
 	global.io = require('socket.io')(server);
 
-// other custom modules
+	// other custom modules
 	const coreHandler = require('./logic/coreHandler'),
 		  socketHandler = require('./logic/socketHandler'),
 		  expressHandler = require('./logic/expressHandler');
@@ -72,22 +73,10 @@ function setupExpress() {
 			accept();
 		},
 		fail: (data, message, error, accept) => {
-			if (error) throw new Error(message);
 			accept();
 		}
 	}));
 
-	app.use(passport.initialize());
-	app.use(passport.session());
-
-	passport.serializeUser((user, done) => {
-		done(null, user);
-	});
-
-	passport.deserializeUser((user, done) => {
-		done(null, user);
-	});
-
 	passport.use(new LocalStrategy({usernameField: 'email'}, (email, password, done) => {
 		process.nextTick(() => {
 			global.db.user.findOne({"email.address": email}, (err, user) => {
@@ -110,10 +99,8 @@ function setupExpress() {
 	app.use(bodyParser.urlencoded({
 		extended: true
 	}));
-	
-	app.get('*', (req, res) => {
-		res.redirect('/');
-	});
+
+	app.use(cors());
 
 	socketHandler(coreHandler, global.io);
 	expressHandler(coreHandler, app);

backend/logic/expressHandler.js

@@ -6,6 +6,7 @@ const passport  = require('passport');
 module.exports = (core, app) => {
 
 	app.post('/users/login', passport.authenticate('local'), function(req, res) {
+		console.log('posted');
 		res.json(JSON.stringify(req.user));
 	});
 

backend/package.json

@@ -24,7 +24,7 @@
     "passport-discord": "^0.1.1",
     "passport-github": "^1.1.0",
     "passport-local": "^1.0.0",
-    "passport.socketio": "^3.6.2",
+    "passport.socketio": "^3.7.0",
     "request": "^2.74.0",
     "socket.io": "^1.5.0"
   }

frontend/App.vue

@@ -28,7 +28,7 @@
 			logout() {
 				$.ajax({
 					method: "POST",
-					url: "/users/logout",
+					url: `${window.location.protocol + '//' + window.location.hostname + ':8081'}/users/logout`,
 					dataType: "json",
 					complete: msg => {
 						alert("Logged out!");
@@ -52,7 +52,7 @@
 			'register': function() {
 				$.ajax({
 					method: "POST",
-					url: "/users/register",
+					url: `${window.location.protocol + '//' + window.location.hostname + ':8081'}/users/register`,
 					data: JSON.stringify({
 						email: this.register.email,
 						username: this.register.username,
@@ -73,13 +73,14 @@
 			'login': function() {
 				$.ajax({
 					method: "POST",
-					url: "/users/login",
+					url: `${window.location.protocol + '//' + window.location.hostname + ':8081'}/users/login`,
 					data: JSON.stringify({
 						email: this.login.email,
 						password: this.login.password
 					}),
 					contentType: "application/json; charset=utf-8",
 					dataType: "json",
+					crossDomain: true,
 					success: function (msg) {
 						if (msg) console.log(msg);
 						location.reload();
@@ -113,4 +114,4 @@
 			}
 		}
 	}
-</script>
+</script>

frontend/components/MainHeader.vue

@@ -42,12 +42,18 @@
 
 	.nav {
 		background-color: $primary-color;
+
 		.is-brand {
 			font-size: 26px !important;
 		}
+
 		.nav-item {
 			font-size: 15px;
 			color: $secondary-color;
+
+			&:hover {
+				color: $secondary-color;
+			}
 		}
 	}
 	.grouped {
@@ -55,4 +61,4 @@
 		display: flex;
 		text-decoration: none;
 	}
-</style>
+</style>

frontend/components/pages/Station.vue

@@ -237,7 +237,7 @@
 			local.interval = 0;
 
 			local.socket = this.$parent.socket;
-			local.stationSocket = io.connect(`localhost:8081/${local.$route.params.id}`);
+			local.stationSocket = io.connect(`http://192.168.99.100:8081/${local.$route.params.id}`);
 			local.stationSocket.on("connected", function(data) {
 				local.currentSong = data.currentSong;
 				local.paused = data.paused;

frontend/nginx.conf

@@ -8,7 +8,7 @@ http {
     include       /etc/nginx/mime.types;
     default_type  application/octet-stream;
 
-    sendfile        on;
+    sendfile        off;
 
     keepalive_timeout  65;
 
@@ -17,7 +17,6 @@ http {
         server_name  localhost;
 
         location / {
-            try_files $uri $uri/ /index.html;
             root   /opt/app/build;
             index  index.html;
         }

frontend/theme.scss

@@ -1,4 +1,4 @@
 $primary-color: #424242;
 $secondary-color: #ffffff;
 
-@import '~bulma';
+@import '~bulma';

frontend/webpack.config.js

@@ -1,4 +1,7 @@
 // webpack.config.js
+
+const webpack = require('webpack');
+
 module.exports = {
 	// entry point of our application
 	entry: './main.js',
@@ -36,5 +39,8 @@ module.exports = {
 		presets: ['es2015'],
 		plugins: ['transform-runtime'],
 		comments: false
-	}
+	},
+	plugins: [
+		new webpack.optimize.UglifyJsPlugin()
+	]
 };