Añadir plantilla

Base para front

9 files changed, 214 insertions, 0 deletions

diff --git a/front/odiparpack/server/argv.js b/front/odiparpack/server/argv.js
new file mode 100644
index 0000000..be8c0b9
--- /dev/null
+++ b/front/odiparpack/server/argv.js
@@ -0,0 +1 @@
+module.exports = require('minimist')(process.argv.slice(2));
diff --git a/front/odiparpack/server/index.js b/front/odiparpack/server/index.js
new file mode 100644
index 0000000..9fb9ba6
--- /dev/null
+++ b/front/odiparpack/server/index.js
@@ -0,0 +1,78 @@
+/* eslint consistent-return:0 */
+
+const express = require('express');
+const favicon = require('serve-favicon');
+const path = require('path');
+const logger = require('./logger');
+const rawicons = require('./rawicons');
+const rawdocs = require('./rawdocs');
+const argv = require('./argv');
+const port = require('./port');
+const setup = require('./middlewares/frontendMiddleware');
+const isDev = process.env.NODE_ENV !== 'production';
+const ngrok = (isDev && process.env.ENABLE_TUNNEL) || argv.tunnel
+  ? require('ngrok')
+  : false;
+const { resolve } = require('path');
+const app = express();
+
+// If you need a backend, e.g. an API, add your custom backend-specific middleware here
+// app.use('/api', myApi);
+// Load material icons
+app.use('/api/icons', (req, res) => {
+  res.json({
+    records: [
+      { source: rawicons(req.query) }
+    ]
+  });
+});
+
+// Load code preview
+app.use('/api/docs', (req, res) => {
+  res.json({
+    records: [
+      { source: rawdocs(req.query) }
+    ]
+  });
+});
+
+app.use('/', express.static('public', { etag: false }));
+app.use(favicon(path.join('public', 'favicons', 'favicon.ico')));
+
+// In production we need to pass these values in instead of relying on webpack
+setup(app, {
+  outputPath: resolve(process.cwd(), 'build'),
+  publicPath: '/',
+});
+
+// get the intended host and port number, use localhost and port 3000 if not provided
+const customHost = argv.host || process.env.HOST;
+const host = customHost || null; // Let http.Server use its default IPv6/4 host
+const prettyHost = customHost || 'localhost';
+
+// use the gzipped bundle
+app.get('*.js', (req, res, next) => {
+  req.url = req.url + '.gz'; // eslint-disable-line
+  res.set('Content-Encoding', 'gzip');
+  next();
+});
+
+// Start your app.
+app.listen(port, host, async err => {
+  if (err) {
+    return logger.error(err.message);
+  }
+
+  // Connect to ngrok in dev mode
+  if (ngrok) {
+    let url;
+    try {
+      url = await ngrok.connect(port);
+    } catch (e) {
+      return logger.error(e);
+    }
+    logger.appStarted(port, prettyHost, url);
+  } else {
+    logger.appStarted(port, prettyHost);
+  }
+});
diff --git a/front/odiparpack/server/logger.js b/front/odiparpack/server/logger.js
new file mode 100644
index 0000000..ab80126
--- /dev/null
+++ b/front/odiparpack/server/logger.js
@@ -0,0 +1,39 @@
+/* eslint-disable no-console */
+
+const chalk = require('chalk');
+const ip = require('ip');
+
+const divider = chalk.gray('\n-----------------------------------');
+
+/**
+ * Logger middleware, you can customize it to make messages more personal
+ */
+const logger = {
+  // Called whenever there's an error on the server we want to print
+  error: err => {
+    console.error(chalk.red(err));
+  },
+
+  // Called when express.js app starts on given port w/o errors
+  appStarted: (port, host, tunnelStarted) => {
+    console.log(`Server started ! ${chalk.green('✓')}`);
+
+    // If the tunnel started, log that and the URL it's available at
+    if (tunnelStarted) {
+      console.log(`Tunnel initialised ${chalk.green('✓')}`);
+    }
+
+    console.log(`
+${chalk.bold('Access URLs:')}${divider}
+Localhost: ${chalk.magenta(`http://${host}:${port}`)}
+      LAN: ${chalk.magenta(`http://${ip.address()}:${port}`) +
+        (tunnelStarted
+          ? `\n    Proxy: ${chalk.magenta(tunnelStarted)}`
+          : '')}${divider}
+${chalk.blue(`Press ${chalk.italic('CTRL-C')} to stop`)}
+${chalk('Webpack is building script...')}
+    `);
+  },
+};
+
+module.exports = logger;
diff --git a/front/odiparpack/server/middlewares/addDevMiddlewares.js b/front/odiparpack/server/middlewares/addDevMiddlewares.js
new file mode 100644
index 0000000..495b4a2
--- /dev/null
+++ b/front/odiparpack/server/middlewares/addDevMiddlewares.js
@@ -0,0 +1,38 @@
+const path = require('path');
+const webpack = require('webpack');
+const webpackDevMiddleware = require('webpack-dev-middleware');
+const webpackHotMiddleware = require('webpack-hot-middleware');
+
+function createWebpackMiddleware(compiler, publicPath) {
+  return webpackDevMiddleware(compiler, {
+    logLevel: 'warn',
+    publicPath,
+    silent: true,
+    stats: 'errors-only',
+  });
+}
+
+module.exports = function addDevMiddlewares(app, webpackConfig) {
+  const compiler = webpack(webpackConfig);
+  const middleware = createWebpackMiddleware(
+    compiler,
+    webpackConfig.output.publicPath,
+  );
+
+  app.use(middleware);
+  app.use(webpackHotMiddleware(compiler));
+
+  // Since webpackDevMiddleware uses memory-fs internally to store build
+  // artifacts, we use it instead
+  const fs = middleware.fileSystem;
+
+  app.get('*', (req, res) => {
+    fs.readFile(path.join(compiler.outputPath, 'index.html'), (err, file) => {
+      if (err) {
+        res.sendStatus(404);
+      } else {
+        res.send(file.toString());
+      }
+    });
+  });
+};
diff --git a/front/odiparpack/server/middlewares/addProdMiddlewares.js b/front/odiparpack/server/middlewares/addProdMiddlewares.js
new file mode 100644
index 0000000..0a5bca5
--- /dev/null
+++ b/front/odiparpack/server/middlewares/addProdMiddlewares.js
@@ -0,0 +1,18 @@
+const path = require('path');
+const express = require('express');
+const compression = require('compression');
+
+module.exports = function addProdMiddlewares(app, options) {
+  const publicPath = options.publicPath || '/';
+  const outputPath = options.outputPath || path.resolve(process.cwd(), 'build');
+
+  // compression middleware compresses your server responses which makes them
+  // smaller (applies also to assets). You can read more about that technique
+  // and other good practices on official Express.js docs http://mxs.is/googmy
+  app.use(compression());
+  app.use(publicPath, express.static(outputPath));
+
+  app.get('*', (req, res) =>
+    res.sendFile(path.resolve(outputPath, 'index.html')),
+  );
+};
diff --git a/front/odiparpack/server/middlewares/frontendMiddleware.js b/front/odiparpack/server/middlewares/frontendMiddleware.js
new file mode 100644
index 0000000..4d01858
--- /dev/null
+++ b/front/odiparpack/server/middlewares/frontendMiddleware.js
@@ -0,0 +1,19 @@
+/* eslint-disable global-require */
+
+/**
+ * Front-end middleware
+ */
+module.exports = (app, options) => {
+  const isProd = process.env.NODE_ENV === 'production';
+
+  if (isProd) {
+    const addProdMiddlewares = require('./addProdMiddlewares');
+    addProdMiddlewares(app, options);
+  } else {
+    const webpackConfig = require('../../internals/webpack/webpack.dev.babel');
+    const addDevMiddlewares = require('./addDevMiddlewares');
+    addDevMiddlewares(app, webpackConfig);
+  }
+
+  return app;
+};
diff --git a/front/odiparpack/server/port.js b/front/odiparpack/server/port.js
new file mode 100644
index 0000000..b45d509
--- /dev/null
+++ b/front/odiparpack/server/port.js
@@ -0,0 +1,3 @@
+const argv = require('./argv');
+
+module.exports = parseInt(argv.port || process.env.PORT || '8080', 10);
diff --git a/front/odiparpack/server/rawdocs.js b/front/odiparpack/server/rawdocs.js
new file mode 100644
index 0000000..0ab47e6
--- /dev/null
+++ b/front/odiparpack/server/rawdocs.js
@@ -0,0 +1,9 @@
+const fs = require('fs');
+
+function rawdoc(componentName) {
+  const dir = 'app/';
+  const content = fs.readFileSync(dir + componentName.src, 'utf8');
+  return content.toString();
+}
+
+module.exports = rawdoc;
diff --git a/front/odiparpack/server/rawicons.js b/front/odiparpack/server/rawicons.js
new file mode 100644
index 0000000..4487f4f
--- /dev/null
+++ b/front/odiparpack/server/rawicons.js
@@ -0,0 +1,9 @@
+const fs = require('fs');
+
+function rawicons(fileName) {
+  const dir = 'app/api/';
+  const content = fs.readFileSync(dir + fileName.src, 'utf8');
+  return content.toString();
+}
+
+module.exports = rawicons;