浏览代码

Adding subfolder support (#186)

Adding EJS Templating engine + a baseUrl variable injected in front-end.
Julien Ramel 9 年之前
父节点
当前提交
cee48c1f45

+ 8 - 0
bin/server.js

@@ -20,6 +20,11 @@ app.use(apiLimitsMiddleware);
 app.use(bodyParser.urlencoded({ extended: true })); // for parsing application/x-www-form-urlencoded
 
 
+// EJS HTML engine
+app.engine('.html', require('ejs').__express);
+app.set('view engine', 'ejs');
+
+
 // Initialize the controllers
 var apiController           = require('../lib/server/controllers/apiController')(app);
 var frontController         = require('../lib/server/controllers/frontController')(app);
@@ -28,6 +33,9 @@ var frontController         = require('../lib/server/controllers/frontController
 // Let's start the server!
 if (!process.env.GRUNTED) {
     var settings = require('../server_config/settings.json');
+
+    app.locals.baseUrl = settings.baseUrl;
+
     server.listen(settings.serverPort, function() {
         console.log('Listening on port %d', server.address().port);
 

+ 1 - 1
front/src/js/models/resultsFactory.js

@@ -1,7 +1,7 @@
 var resultsFactory = angular.module('resultsFactory', ['ngResource']);
 
 resultsFactory.factory('Results', ['$resource', function($resource) {
-    return $resource('/api/results/:runId', {
+    return $resource('api/results/:runId', {
         
     });
 }]);

+ 1 - 1
front/src/js/models/runsFactory.js

@@ -1,7 +1,7 @@
 var runsFactory = angular.module('runsFactory', ['ngResource']);
 
 runsFactory.factory('Runs', ['$resource', function($resource) {
-    return $resource('/api/runs/:runId', {
+    return $resource('api/runs/:runId', {
     
     });
 }]);

+ 37 - 37
front/src/main.html

@@ -2,21 +2,21 @@
 <head>
 	<meta charset="utf-8">
     <title>Yellow Lab Tools</title>
-    <base href="/">
-    <link rel="icon" type="image/png" href="/img/favicon.png">
-    <meta property="og:image" content="/img/logo-large.png" />
+    <base href="<%= baseUrl %>">
+    <link rel="icon" type="image/png" href="img/favicon.png">
+    <meta property="og:image" content="img/logo-large.png" />
     <meta name="description" content="Free online web performance tool. Audit your webpage for performance and front-end quality issues. And it's open-source!" />
 
-    <!-- build:css /css/styles.css-->
-    <link rel="stylesheet" type="text/css" href="/css/main.css">
-    <link rel="stylesheet" type="text/css" href="/css/index.css">
-    <link rel="stylesheet" type="text/css" href="/css/dashboard.css">
-    <link rel="stylesheet" type="text/css" href="/css/queue.css">
-    <link rel="stylesheet" type="text/css" href="/css/rule.css">
-    <link rel="stylesheet" type="text/css" href="/css/screenshot.css">
-    <link rel="stylesheet" type="text/css" href="/css/timeline.css">
-    <link rel="stylesheet" type="text/css" href="/css/about.css">
-    <link rel="stylesheet" type="text/css" href="/node_modules/angular-chart.js/dist/angular-chart.css">
+    <!-- build:css css/styles.css-->
+    <link rel="stylesheet" type="text/css" href="css/main.css">
+    <link rel="stylesheet" type="text/css" href="css/index.css">
+    <link rel="stylesheet" type="text/css" href="css/dashboard.css">
+    <link rel="stylesheet" type="text/css" href="css/queue.css">
+    <link rel="stylesheet" type="text/css" href="css/rule.css">
+    <link rel="stylesheet" type="text/css" href="css/screenshot.css">
+    <link rel="stylesheet" type="text/css" href="css/timeline.css">
+    <link rel="stylesheet" type="text/css" href="css/about.css">
+    <link rel="stylesheet" type="text/css" href="node_modules/angular-chart.js/dist/angular-chart.css">
     <!-- endbuild -->
 
     <link rel="preconnect" href="//www.google-analytics.com">
@@ -33,34 +33,34 @@
     <div id="body" ng-view autoscroll="true"></div>
     <div class="footer">
         <span class="version">@@version</span>
-        <br><a href="/about">More about Yellow Lab Tools</a><br>
+        <br><a href="<%= baseUrl %>about">More about Yellow Lab Tools</a><br>
         <div class="github"><iframe id="ghbtn" frameborder="0" scrolling="0" width="145px" height="30px"></iframe></div>
     </div>
 
-    <!-- build:js /js/all.js -->
-    <script src="/node_modules/angular/angular.min.js"></script>
-    <script src="/node_modules/chart.js/Chart.min.js"></script>
-    <script src="/node_modules/angular-route/angular-route.min.js"></script>
-    <script src="/node_modules/angular-resource/angular-resource.min.js"></script>
-    <script src="/node_modules/angular-sanitize/angular-sanitize.min.js"></script>
-    <script src="/node_modules/angular-animate/angular-animate.min.js"></script>
-    <script src="/node_modules/angular-local-storage/dist/angular-local-storage.min.js"></script>
-    <script src="/node_modules/angular-chart.js/dist/angular-chart.min.js"></script>
-    <script src="/js/app.js"></script>
-    <script src="/js/controllers/indexCtrl.js"></script>
-    <script src="/js/controllers/dashboardCtrl.js"></script>
-    <script src="/js/controllers/queueCtrl.js"></script>
-    <script src="/js/controllers/ruleCtrl.js"></script>
-    <script src="/js/controllers/screenshotCtrl.js"></script>
-    <script src="/js/controllers/timelineCtrl.js"></script>
-    <script src="/js/models/resultsFactory.js"></script>
-    <script src="/js/models/runsFactory.js"></script>
-    <script src="/js/services/apiService.js"></script>
-    <script src="/js/services/menuService.js"></script>
-    <script src="/js/services/settingsService.js"></script>
+    <!-- build:js js/all.js -->
+    <script src="node_modules/angular/angular.min.js"></script>
+    <script src="node_modules/chart.js/Chart.min.js"></script>
+    <script src="node_modules/angular-route/angular-route.min.js"></script>
+    <script src="node_modules/angular-resource/angular-resource.min.js"></script>
+    <script src="node_modules/angular-sanitize/angular-sanitize.min.js"></script>
+    <script src="node_modules/angular-animate/angular-animate.min.js"></script>
+    <script src="node_modules/angular-local-storage/dist/angular-local-storage.min.js"></script>
+    <script src="node_modules/angular-chart.js/dist/angular-chart.min.js"></script>
+    <script src="js/app.js"></script>
+    <script src="js/controllers/indexCtrl.js"></script>
+    <script src="js/controllers/dashboardCtrl.js"></script>
+    <script src="js/controllers/queueCtrl.js"></script>
+    <script src="js/controllers/ruleCtrl.js"></script>
+    <script src="js/controllers/screenshotCtrl.js"></script>
+    <script src="js/controllers/timelineCtrl.js"></script>
+    <script src="js/models/resultsFactory.js"></script>
+    <script src="js/models/runsFactory.js"></script>
+    <script src="js/services/apiService.js"></script>
+    <script src="js/services/menuService.js"></script>
+    <script src="js/services/settingsService.js"></script>
 
-    <script src="/js/directives/gradeDirective.js"></script>
-    <script src="/js/directives/offendersDirectives.js"></script>
+    <script src="js/directives/gradeDirective.js"></script>
+    <script src="js/directives/offendersDirectives.js"></script>
     <!-- endbuild -->
 
     <script>

+ 1 - 1
front/src/views/about.html

@@ -5,5 +5,5 @@
 
     <p>By the way, <b>it's free</b> because we are geeks, not businessmen. All we want is <a href="https://github.com/gmetais/YellowLabTools" target="_blank" class="star">a <span>&#9733;</span> on GitHub</a>. It will boost our motivation to add more awesome features!!!</p>
 
-    <p><br><a href="/">Back to index</a></p>
+    <p><br><a href="<%= baseUrl %>">Back to index</a></p>
 </div>

+ 1 - 1
front/src/views/dashboard.html

@@ -70,7 +70,7 @@
     <div class="fromShare" ng-if="!error && fromSocialShare">
         <p>Yellow Lab Tools is a free online tool that analyzes performance and front-end quality.</p>
         <a class="linkButton" href="" ng-click="seeFullReport()">See the full report for this page</a>
-        <a class="linkButton" href="/">Test another webpage</a>
+        <a class="linkButton" href="<%= baseUrl %>">Test another webpage</a>
     </div>
 
     <div ng-if="error">

+ 2 - 2
front/src/views/queue.html

@@ -6,7 +6,7 @@
         <p class="statusSubMessage">{{status.error}}</p>
         
         <a class="linkButton" href="https://github.com/gmetais/YellowLabTools/issues" target="_blank">Report the issue on GitHub</a>
-        <a class="linkButton" href="/">New test</a>
+        <a class="linkButton" href="<%= baseUrl %>">New test</a>
     </div>
     <div ng-if="status.statusCode == 'awaiting'">
         <div class="status">
@@ -28,7 +28,7 @@
     <div class="status">Error 404 (test not found)</div>
     <p class="statusSubMessage">The server probably just rebooted. We are very sorry about that, please try to launch the test again.</p>
     
-    <a class="linkButton" href="/">New test</a>
+    <a class="linkButton" href="<%= baseUrl %>">New test</a>
 </div>
 <div ng-if="connectionLost == true">
     <div class="status">Connection lost with server</div>

+ 1 - 1
front/src/views/resultSubHeader.html

@@ -1,7 +1,7 @@
 <div>Tested url: &nbsp; <a href="{{result.params.url}}" target="_blank" class="testedUrl">{{result.params.url}}</a></div>
 
 <div class="resultsMenu">
-    <a class="menuItem back" href="/"><div class="icon-arrow-left3"></div><span>New test<span></a>
+    <a class="menuItem back" href="<%= baseUrl %>"><div class="icon-arrow-left3"></div><span>New test<span></a>
     <a class="menuItem restart" href="" ng-click="testAgain()"><div class="icon-loop"></div><span>Test again<span></a>
     <div class="menuItem" ng-class="{active: Menu.getCurrentPage() == 'dashboard'}" ng-click="Menu.changePage('dashboard')"><div class="icon-list"></div><span>Dashboard</span></div>
     <div class="menuItem" ng-class="{active: Menu.getCurrentPage() == 'timeline'}" ng-click="Menu.changePage('timeline')"><div class="icon-bars"></div><span>JS Timeline</span></div>

+ 15 - 3
lib/server/controllers/frontController.js

@@ -6,20 +6,32 @@ var FrontController = function(app) {
 
     var cacheDuration = 365 * 24 * 60 * 60 * 1000; // One year
     var assetsPath = (app.get('env') === 'development') ? '../../../front/src' : '../../../front/build';
-    
+
+    // Routes templating    
     var routes = ['/', '/about', '/result/:runId', '/result/:runId/timeline', '/result/:runId/screenshot', '/result/:runId/rule/:policy', '/queue/:runId'];
+
     routes.forEach(function(route) {
         app.get(route, function(req, res) {
             res.setHeader('Cache-Control', 'public, max-age=20');
-            res.sendFile(path.join(__dirname, assetsPath, 'main.html'));
+            res.render(path.join(__dirname, assetsPath, 'main.html'), {
+                baseUrl: app.locals.baseUrl
+            });
+        });
+    });
+
+    // Views templating
+    app.get('/views/:viewName', function(req, res) {
+        res.setHeader('Cache-Control', 'public, max-age=' + cacheDuration);
+        res.render(path.join(__dirname, assetsPath, 'views/' + req.params.viewName), {
+            baseUrl: app.locals.baseUrl
         });
     });
     
+    // Static assets
     app.use('/css', express.static(path.join(__dirname, assetsPath, 'css'), { maxAge: cacheDuration }));
     app.use('/fonts', express.static(path.join(__dirname, assetsPath, 'fonts'), { maxAge: cacheDuration }));
     app.use('/img', express.static(path.join(__dirname, assetsPath, 'img'), { maxAge: cacheDuration }));
     app.use('/js', express.static(path.join(__dirname, assetsPath, 'js'), { maxAge: cacheDuration }));
-    app.use('/views', express.static(path.join(__dirname, assetsPath, 'views'), { maxAge: cacheDuration }));
     app.use('/node_modules', express.static(path.join(__dirname, '../../../node_modules'), { maxAge: cacheDuration }));
 };
 

+ 1 - 0
package.json

@@ -37,6 +37,7 @@
     "css-mq-parser": "0.0.3",
     "debug": "2.2.0",
     "easyxml": "2.0.1",
+    "ejs": "^2.5.1",
     "express": "4.14.0",
     "imagemin": "5.2.2",
     "imagemin-jpegoptim": "5.0.0",

+ 1 - 1
server_config/settings-prod.json

@@ -3,7 +3,7 @@
     "phantomasEngine": "webkit",
     "googleAnalyticsId": "",
     "screenshotWidth": 400,
-
+    "baseUrl": "/",
     "authorizedKeys": {
         
     },

+ 1 - 1
server_config/settings.json

@@ -3,7 +3,7 @@
     "phantomasEngine": "webkit",
     "googleAnalyticsId": "",
     "screenshotWidth": 400,
-
+    "baseUrl": "/",
     "authorizedKeys": {
         
     },

+ 1 - 1
test/fixtures/settings.json

@@ -3,7 +3,7 @@
     "phantomasEngine": "webkit",
     "googleAnalyticsId": "",
     "screenshotWidth": 400,
-    
+    "baseUrl": "/",    
     "authorizedKeys": {
         "1234567890": "contact@gaelmetais.com"
     },