Quality of Frontend Developer's Life: here to stay

README.md

@@ -29,6 +29,15 @@ npm run build
 npm run unit
 ```
 
+# For Contributors:
+
+You can create file `/config/local.json` (see [example](https://git.pleroma.social/pleroma/pleroma-fe/blob/develop/config/local.example.json)) to enable some convenience dev options:
+
+* `target`: makes local dev server redirect to some existing instance's BE instead of local BE, useful for testing things in near-production environment and searching for real-life use-cases.
+* `staticConfigPreference`: makes FE's `/static/config.json` take preference of BE-served `/api/statusnet/config.json`. Only works in dev mode.
+
+FE Build process also leaves current commit hash in global variable `___pleromafe_commit_hash` so that you can easily see which pleroma-fe commit instance is running, also helps pinpointing which commit was used when FE was bundled into BE.
+
 # Configuration
 
 Edit config.json for configuration. scopeOptionsEnabled gives you input fields for CWs and the scope settings.

build/webpack.dev.conf.js

@@ -18,7 +18,9 @@ module.exports = merge(baseWebpackConfig, {
   devtool: '#eval-source-map',
   plugins: [
     new webpack.DefinePlugin({
-      'process.env': config.dev.env
+      'process.env': config.dev.env,
+      'COMMIT_HASH': JSON.stringify('DEV'),
+      'DEV_OVERRIDES': JSON.stringify(config.dev.settings)
     }),
     // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
     new webpack.optimize.OccurenceOrderPlugin(),

build/webpack.prod.conf.js

@@ -10,6 +10,11 @@ var env = process.env.NODE_ENV === 'testing'
     ? require('../config/test.env')
     : config.build.env
 
+let commitHash = require('child_process')
+    .execSync('git rev-parse --short HEAD')
+    .toString();
+console.log(commitHash)
+
 var webpackConfig = merge(baseWebpackConfig, {
   module: {
     loaders: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true })
@@ -29,7 +34,8 @@ var webpackConfig = merge(baseWebpackConfig, {
   plugins: [
     // http://vuejs.github.io/vue-loader/workflow/production.html
     new webpack.DefinePlugin({
-      'process.env': env
+      'process.env': env,
+      'COMMIT_HASH': JSON.stringify(commitHash)
     }),
     new webpack.optimize.UglifyJsPlugin({
       compress: {

config/index.js

@@ -1,5 +1,15 @@
 // see http://vuejs-templates.github.io/webpack for documentation.
-var path = require('path')
+const path = require('path')
+let settings = {}
+try {
+  settings = require('./local.json')
+  console.log('Using local dev server settings (/config/local.json):')
+  console.log(JSON.stringify(settings, null, 2))
+} catch (e) {
+  console.log('Local dev server settings not found (/config/local.json)')
+}
+
+const target = settings.target || 'http://localhost:4000/'
 
 module.exports = {
   build: {
@@ -19,21 +29,22 @@ module.exports = {
   dev: {
     env: require('./dev.env'),
     port: 8080,
+    settings,
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',
     proxyTable: {
       '/api': {
-        target: 'http://localhost:4000/',
+        target,
         changeOrigin: true,
         cookieDomainRewrite: 'localhost'
       },
       '/nodeinfo': {
-        target: 'http://localhost:4000/',
+        target,
         changeOrigin: true,
         cookieDomainRewrite: 'localhost'
       },
       '/socket': {
-        target: 'http://localhost:4000/',
+        target,
         changeOrigin: true,
         cookieDomainRewrite: 'localhost',
         ws: true

src/boot/after_store.js

@@ -38,8 +38,17 @@ const afterStoreSetup = ({store, i18n}) => {
           return {}
         })
         .then((staticConfig) => {
+          const overrides = window.___pleromafe_dev_overrides || {}
+          const env = window.___pleromafe_mode.NODE_ENV
+
           // This takes static config and overrides properties that are present in apiConfig
-          var config = Object.assign({}, staticConfig, apiConfig)
+          let config = {}
+          if (overrides.staticConfigPreference && env === 'DEV') {
+            console.warn('OVERRIDING API CONFIG WITH STATIC CONFIG')
+            config = Object.assign({}, apiConfig, staticConfig)
+          } else {
+            config = Object.assign({}, staticConfig, apiConfig)
+          }
 
           var theme = (config.theme)
           var background = (config.background)

src/main.js

@@ -69,3 +69,9 @@ createPersistedState(persistedStateOptions).then((persistedState) => {
 
   afterStoreSetup({store, i18n})
 })
+
+// These are inlined by webpack's DefinePlugin
+/* eslint-disable */
+window.___pleromafe_mode = process.env
+window.___pleromafe_commit_hash = COMMIT_HASH
+window.___pleromafe_dev_overrides = DEV_OVERRIDES