Quality of Frontend Developer's Life: here to stay

shigusegubu
Henry Jameson 5 years ago
parent fb5261b926
commit b839ba7870
  1. 9
      README.md
  2. 4
      build/webpack.dev.conf.js
  3. 12
      build/webpack.prod.conf.js
  4. 19
      config/index.js
  5. 11
      src/boot/after_store.js
  6. 6
      src/main.js

@ -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.

@ -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(),

@ -7,8 +7,13 @@ var baseWebpackConfig = require('./webpack.base.conf')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var env = process.env.NODE_ENV === 'testing'
? require('../config/test.env')
: config.build.env
? 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: {
@ -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: {

@ -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

@ -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)

@ -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

Loading…
Cancel
Save