expose new client at /new-app, can be enabled in prod setting a flag

.gitignore

@@ -33,6 +33,7 @@ coverage
 coverage.html
 common/dist/scripts/*
 dist
+dist-client
 test/client/unit/coverage
 test/client/e2e/reports
 test/client-old/spec/mocks/translations.js

webpack/config/index.js

@@ -5,10 +5,10 @@ var staticAssetsDirectory = './website/static/.'; // The folder where static fil
 module.exports = {
   build: {
     env: require('./prod.env'),
-    index: path.resolve(__dirname, '../../dist/index.html'),
-    assetsRoot: path.resolve(__dirname, '../../dist'),
+    index: path.resolve(__dirname, '../../dist-client/index.html'),
+    assetsRoot: path.resolve(__dirname, '../../dist-client'),
     assetsSubDirectory: 'static',
-    assetsPublicPath: '/',
+    assetsPublicPath: '/new-app',
     staticAssetsDirectory: staticAssetsDirectory,
     productionSourceMap: true,
     // Gzip off by default as many popular static hosts such as

website/README.md

@@ -1,3 +1,3 @@
-`/website/client` contains the source files for the new client side that is being developed as part of the Habitica.com redesign.
+`/website/client` contains the source files for the new client side that is being developed as part of the Habitica.com redesign. Static assets for the new client can be found in `website/static`.
 
 The old client side files can be found in `/website/client-old`, they are still used on Habitica.com while the redesign is in progress.

website/client/router.js

@@ -7,7 +7,7 @@ Vue.use(VueRouter);
 
 export default new VueRouter({
   mode: 'history',
-  base: __dirname,
+  base: process.env.NODE_ENV === 'production' ? '/new-app' : __dirname, // eslint-disable-line no-process-env
   routes: [
     { path: '/', component: Home },
     { path: '/page', component: Page },

website/server/controllers/top-level/pages.js

@@ -1,11 +1,14 @@
 import locals from '../../middlewares/locals';
 import _ from 'lodash';
 import md from 'habitica-markdown';
+import nconf from 'nconf';
 
 let api = {};
 
+const IS_PROD = nconf.get('IS_PROD');
 const TOTAL_USER_COUNT = '1,500,000';
 const LOADING_SCREEN_TIPS = 32;
+const IS_NEW_CLIENT_ENABLED = nconf.get('NEW_CLIENT_ENABLED') === 'true';
 
 api.getFrontPage = {
   method: 'GET',
@@ -82,5 +85,19 @@ api.redirectExtensionsPage = {
   },
 };
 
+// All requests to /new_app (expect /new_app/static) should serve the new client in development
+if (IS_PROD && IS_NEW_CLIENT_ENABLED) {
+  api.getNewClient = {
+    method: 'GET',
+    url: /^\/new-app($|\/(?!(static\/.?|static$)))/,
+    async handler (req, res) {
+      if (!(req.session && req.session.userId)) {
+        return res.redirect('/static/front');
+      }
+
+      return res.sendFile('./dist-client/index.html', {root: `${__dirname}/../../../../`});
+    },
+  };
+}
 
 module.exports = api;

website/server/middlewares/static.js

@@ -3,19 +3,22 @@ import nconf from 'nconf';
 import path from 'path';
 
 const IS_PROD = nconf.get('IS_PROD');
+const IS_NEW_CLIENT_ENABLED = nconf.get('NEW_CLIENT_ENABLED') === 'true';
 const MAX_AGE = IS_PROD ? 31536000000 : 0;
 const ASSETS_DIR = path.join(__dirname, '/../../assets');
 const PUBLIC_DIR = path.join(__dirname, '/../../client-old');
 const BUILD_DIR = path.join(__dirname, '/../../build');
 
 module.exports = function staticMiddleware (expressApp) {
+  // Expose static files for new client
+  if (IS_PROD && IS_NEW_CLIENT_ENABLED) {
+    expressApp.use('/new-app/static', express.static(`${PUBLIC_DIR}/../../dist-client/static`));
+  }
+
   // TODO move all static files to a single location (one for public and one for build)
   expressApp.use(express.static(BUILD_DIR, { maxAge: MAX_AGE }));
   expressApp.use('/assets/audio', express.static(`${ASSETS_DIR}/audio`, { maxAge: MAX_AGE }));
   expressApp.use('/assets/sprites', express.static(`${ASSETS_DIR}/sprites/dist`, { maxAge: MAX_AGE }));
   expressApp.use('/assets/img', express.static(`${PUBLIC_DIR}/../../website/assets/img`, { maxAge: MAX_AGE }));
   expressApp.use(express.static(PUBLIC_DIR));
-
-  // Expose new client when not in production
-  if (!IS_PROD) expressApp.use('/new-app', express.static(`${PUBLIC_DIR}/../client`));
 };

website/static/README.md

@@ -1,3 +0,0 @@
-This folder contains the source files for static assets used in the new client side that is being developed.
-
-These files are served without passing through any preprocessor.

website/static/test.txt

@@ -1 +0,0 @@
-Hello World!