Use packaging on the editor frontend to reduce distribution size.

Merge pull request #104 from haroldo-ok/bundle
This fixes #103

editor/editor-dev.js

@@ -0,0 +1,38 @@
+'use strict';
+
+const PARCEL_PORT = 1234;
+const API_PORT = 1235;
+
+const showEditor = async (commandLine, executeCommands) => {
+	throw new Error('Not supported.');
+	/*
+	const { Parcel } = require('@parcel/core');
+	const { openInBrowser } = require('@parcel/utils');
+	const { normalize } = require('path');
+
+	const { startBackend } = require('./back/backend');
+
+	startBackend(commandLine, API_PORT);
+	
+	let bundler = new Parcel({
+		entries: normalize(__dirname + '/front/index.html'),
+		defaultConfig: '@parcel/config-default',
+		shouldAutoInstall: true,
+		serveOptions: {
+			port: PARCEL_PORT
+		},
+		hmrOptions: {
+			port: PARCEL_PORT
+		}
+	});
+
+	await bundler.watch();	
+	console.log(`Frontend running on port ${PARCEL_PORT}`);
+
+	if (commandLine.openBrowser) {
+		openInBrowser(`http://localhost:${PARCEL_PORT}/`);
+	}
+	*/
+};
+
+module.exports = { showEditor };

editor/editor.js

@@ -4,31 +4,53 @@ const PARCEL_PORT = 1234;
 const API_PORT = 1235;
 
 const showEditor = async (commandLine, executeCommands) => {
-	const { Parcel } = require('@parcel/core');
-	const { openInBrowser } = require('@parcel/utils');
 	const { normalize } = require('path');
-
+	const open = require('open');
+
+	const express = require('express');
+	const url = require('url');
+	const { createProxyMiddleware  } = require('http-proxy-middleware');
+
 	const { startBackend } = require('./back/backend');
-
-	startBackend(commandLine, API_PORT);
 
-	let bundler = new Parcel({
-		entries: normalize(__dirname + '/front/index.html'),
-		defaultConfig: '@parcel/config-default',
-		shouldAutoInstall: true,
-		serveOptions: {
-			port: PARCEL_PORT
-		},
-		hmrOptions: {
-			port: PARCEL_PORT
-		}
-	});
+	startBackend(commandLine, API_PORT);	
+
+	console.log('Hot reload', commandLine.hotReloadFrontend);
+
+	if (commandLine.hotReloadFrontend) {
+		const { Parcel } = require('@parcel/core');
+		const bundler = new Parcel({
+			entries: normalize(__dirname + '/front/index.html'),
+			defaultConfig: '@parcel/config-default',
+			shouldAutoInstall: true,
+			serveOptions: {
+				port: PARCEL_PORT
+			},
+			hmrOptions: {
+				port: PARCEL_PORT
+			}
+		});
 
-	await bundler.watch();	
-	console.log(`Frontend running on port ${PARCEL_PORT}`);
+		await bundler.watch();	
+	} else {
+		const app = express();
+
+		app.use('/api', createProxyMiddleware({
+			target: 'http://localhost:' + API_PORT,
+			changeOrigin: true,
+			pathRewrite: {
+				'^/api' : '/'
+			}
+		}));
 
+		app.use(express.static(normalize(__dirname + '/front/dist')));
+
+		app.listen(PARCEL_PORT);	
+	}
+
+	console.log(`Frontend running on port ${PARCEL_PORT}`);	
 	if (commandLine.openBrowser) {
-		openInBrowser(`http://localhost:${PARCEL_PORT}/`);
+		open(`http://localhost:${PARCEL_PORT}/`);
 	}
 };
 

generator/commandline.js

@@ -59,6 +59,12 @@ const readCommandLine = () => yargs
 			boolean: true,
 			describe: 'Watch project for changes, and recompile if changed.'
 		},
+		'hot-reload-frontend': {
+			alias: 'hf',
+			default: false,
+			boolean: true,
+			describe: 'Says if the frontend for the editor should use be generated dinamically by parcel, instead of serving a static build.'
+		},
 		'open-browser': {
 			alias: 'ob',
 			default: true,