Larix Meta Framework - a polyglot ecosystem for creating modular software with trivially addable and removable feature modules
License: MIT License
Copyright © 2019 SysGears (Cyprus) Limited. This source code is licensed under the MIT license.
Seeing some Deprecation warning from crypto library used here.
There are few fixes to get rid of this warnings as per this note. nodejs/node#23203 (comment)
With the latest clean-webpack-plugin v3, we get the following error. I will create a PR shortly.
zen error TypeError: CleanWebpackPlugin is not a constructor
at createPlugins (/Users/projects/IDE/fullstack-pro/node_modules/@larix/zen/src/plugins/WebpackPlugin.ts:75:30)
BuilderDiscoverer seems to scan all directories recursively. There should be a functionality to ignore certain folders, as there might be:
> zen start
zen error Error: EACCES: permission denied, scandir '/home/manu/stuff/our-board/backend/docker/local-nextcloud/db/mysql'
at Object.readdirSync (fs.js:955:3)
at BuilderDiscoverer._discoverRecursively (/home/manu/stuff/our-board/backend/node_modules/@larix/zen/src/BuilderDiscoverer.ts:40:22)
at BuilderDiscoverer._discoverRecursively (/home/manu/stuff/our-board/backend/node_modules/@larix/zen/src/BuilderDiscoverer.ts:44:43)
at BuilderDiscoverer._discoverRecursively (/home/manu/stuff/our-board/backend/node_modules/@larix/zen/src/BuilderDiscoverer.ts:44:43)
at BuilderDiscoverer._discoverRecursively (/home/manu/stuff/our-board/backend/node_modules/@larix/zen/src/BuilderDiscoverer.ts:44:43)
at BuilderDiscoverer._discoverRecursively (/home/manu/stuff/our-board/backend/node_modules/@larix/zen/src/BuilderDiscoverer.ts:44:43)
at /home/manu/stuff/our-board/backend/node_modules/@larix/zen/src/BuilderDiscoverer.ts:25:32
at Array.reduce (<anonymous>)
at BuilderDiscoverer.discover (/home/manu/stuff/our-board/backend/node_modules/@larix/zen/src/BuilderDiscoverer.ts:24:29)
at Object.createBuilders [as default] (/home/manu/stuff/our-board/backend/node_modules/@larix/zen/src/createBuilders.ts:82:44) {
errno: -13,
syscall: 'scandir',
code: 'EACCES',
path: '/home/manu/stuff/our-board/backend/docker/local-nextcloud/db/mysql'
}
After frontend code build, open browser not working anymore in the latest release.
zen.js config
const config = {
builders: {
web: {
entry: './src/index.tsx',
output: {
chunkFilename: '[name].bundle.js',
},
stack: ['web', 'react'],
tsLoaderOptions: {
configFileName: "./tsconfig.json"
},
webpackDevPort: 3000,
openBrowser: true,
defines: {
__CLIENT__: true,
},
test: {
role: ['build', 'watch']
},
htmlTemplate: "../../tools/html-plugin-template.ejs",
// Wait for backend to start prior to letting webpack load frontend page
waitOn: ['tcp:localhost:8080'],
enabled: true,
webpackConfig: {
plugins: [
new LodashModuleReplacementPlugin
],
// for additional webpack configuration.
resolve: process.env.NODE_ENV !== 'production'
? {
alias: {
'react-dom': '@hot-loader/react-dom'
}
}
: {},
}
},
server: {
entry: './src/backend/app.ts',
stack: ['server'],
tsLoaderOptions: {
configFileName: "./tsconfig.json"
},
defines: {
__SERVER__: true,
},
enabled: false,
webpackConfig: {
output: {
filename: 'main.js',
},
plugins: [
new CopyWebpackPlugin([{
from: '../../tools/esm-wrapper.js',
to: 'index.js',
}]),
new LodashModuleReplacementPlugin
],
externals: [
nodeExternals(),
nodeExternals({ whitelist: [/webpack\/hot/i, /babel-polyfill/], modulesDir: "../../node_modules" })
],
}
},
test: {
stack: ['server'],
roles: ['test'],
defines: {
__TEST__: true
}
}
},
options: {
stack: [
"apollo",
"ts",
"react",
"webpack",
"css"
],
cache: '../../.cache',
backendBuildDir: "dist",
frontendBuildDir: "dist",
dllBuildDir: "dist/.build/dll",
ssr: false,
backendUrl: "http://localhost:8080",
webpackDll: true,
reactHotLoader: true,
useDefaultPostCss: true,
persistGraphQL: false,
frontendRefreshOnBackendChange: true,
nodeDebugger: false,
overridesConfig: "./tools/webpackAppConfig.js",
plugins: [
new Dotenv({
path: process.env.ENV_FILE
})
],
defines: {
__DEV__: process.env.NODE_ENV === 'development',
__GRAPHQL_URL__: '"http://localhost:8080/graphql"',
}
}
};
webpack config
en debug Zen Config:
{ '[web]':
{ entry: './src/index.tsx',
output: { chunkFilename: '[name].bundle.js' },
stack:
Stack {
technologies: [ 'apollo', 'ts', 'react', 'webpack', 'css', 'web' ],
platform: 'web' },
tsLoaderOptions: { configFileName: './tsconfig.json' },
webpackDevPort: 3000,
openBrowser: true,
defines:
{ __DEV__: true,
__GRAPHQL_URL__: '"http://localhost:8080/graphql"',
__SSR__: false,
__PERSIST_GQL__: '\'false\'',
__FRONTEND_BUILD_DIR__: '\'dist\'',
__DLL_BUILD_DIR__: '\'dist/.build/dll\'',
__DEBUGGING__: '\'false\'',
__CLIENT__: true },
test: { role: [ 'build', 'watch' ] },
htmlTemplate: '../../tools/html-plugin-template.ejs',
waitOn: [ 'tcp:localhost:8080' ],
enabled: true,
webpackConfig:
{ plugins:
[ DefinePlugin {
definitions:
{ 'process.env.NATS_URL': '"nats://localhost:4222/"',
'process.env.NATS_USER': '"test"',
'process.env.NATS_PW': '"test"',
'process.env.GRAPHQL_URL': '"http://localhost:8080/graphql"',
'process.env.CLIENT_URL': '"http://localhost:3000"',
'process.env.ZIPKIN_URL': '"test"',
'process.env.ZIPKIN_PORT': '"test"',
'process.env.LOG_LEVEL': '"trace"' } },
DefinePlugin {
definitions:
{ __ENV__:
'{"NATS_URL":"nats://localhost:4222/","NATS_USER":"test","NATS_PW":"test","GRAPHQL_URL":"http://localhost:8080/graphql","CLIENT_URL":"http://localhost:3000","ZIPKIN_URL":"test","ZIPKIN_PORT":"test","LOG_LEVEL":"trace"}' } } ] },
name: 'web',
require:
{ [Function: require]
resolve: [Function],
probe: [Function],
cwd:
'/Users/projects/fullstack-pro/servers/frontend-server' },
plugins:
[ WebpackPlugin {},
WebAssetsPlugin {},
CssProcessorPlugin {},
ApolloPlugin {},
TypeScriptPlugin {},
BabelPlugin {},
ReactPlugin {},
TCombPlugin {},
FlowRuntimePLugin {},
ReactNativePlugin {},
ReactNativeWebPlugin {},
StyledComponentsPlugin {},
AngularPlugin {},
VuePlugin {},
I18NextPlugin {},
VuePlugin {},
ReactHotLoaderPlugin {} ],
roles: [ 'build', 'watch' ],
cache: '../../.cache',
backendBuildDir: 'dist',
frontendBuildDir: 'dist',
dllBuildDir: 'dist/.build/dll',
ssr: false,
backendUrl: 'http://localhost:8080',
webpackDll: true,
reactHotLoader: true,
useDefaultPostCss: true,
persistGraphQL: false,
frontendRefreshOnBackendChange: true,
nodeDebugger: false,
overridesConfig: './tools/webpackAppConfig.js',
devProxy: false,
id: '[web]',
configPath:
'/Users/projects/fullstack-pro/servers/frontend-server/.zenrc.js',
buildDir: undefined,
sourceMap: true,
minify: true },
'[server]':
{ entry: './src/backend/app.ts',
stack:
Stack {
technologies: [ 'apollo', 'ts', 'react', 'webpack', 'css', 'server' ],
platform: 'server' },
tsLoaderOptions: { configFileName: './tsconfig.json' },
defines:
{ __DEV__: true,
__GRAPHQL_URL__: '"http://localhost:8080/graphql"',
__SSR__: false,
__PERSIST_GQL__: '\'false\'',
__FRONTEND_BUILD_DIR__: '\'dist\'',
__DLL_BUILD_DIR__: '\'dist/.build/dll\'',
__DEBUGGING__: '\'false\'',
__SERVER__: true },
enabled: false,
webpackConfig:
{ output: { filename: 'main.js' },
plugins:
[ CopyPlugin {
patterns: [ { from: '../../tools/esm-wrapper.js', to: 'index.js' } ],
options: {} },
LodashModuleReplacementPlugin {
matches: [],
options: {},
patterns:
[ [ '_baseIndexOf', '_strictIndexOf' ],
[ '_cacheHas', '_arrayIncludes' ],
[ '_createSet', 'noop' ],
[ '_MapCache', '_ListCache' ],
[ '_SetCache', 'castArray' ],
[ '_Stack', '_ListCache' ],
[ '_getFuncName', 'stubString' ],
[ '_isLaziable', 'stubFalse' ],
[ '_LodashWrapper', 'noop' ],
[ '_baseClone', 'identity' ],
[ '_baseToNumber', 'identity' ],
[ '_baseToString', 'identity' ],
[ '_toKey', 'identity' ],
[ 'toFinite', 'identity' ],
[ 'toInteger', 'identity' ],
[ 'toLength', 'identity' ],
[ 'toNumber', 'identity' ],
[ 'toString', 'identity' ],
[ '_baseAggregator', '_arrayAggregator' ],
[ '_baseFilter', '_arrayFilter' ],
[ '_baseMap', '_arrayMap' ],
[ 'each', '_arrayEach' ],
[ 'eachRight', '_arrayEachRight' ],
[ 'every', '_arrayEvery' ],
[ 'filter', '_arrayFilter' ],
[ 'forEach', '_arrayEach' ],
[ 'forEachRight', '_arrayEachRight' ],
[ 'includes', '_arrayIncludes' ],
[ 'map', '_arrayMap' ],
[ 'reduce', '_arrayReduce' ],
[ 'reduceRight', '_arrayReduceRight' ],
[ 'sample', '_arraySample' ],
[ 'sampleSize', '_arraySampleSize' ],
[ 'shuffle', '_arrayShuffle' ],
[ 'some', '_arraySome' ],
[ '_createWrap', '_createPartial' ],
[ 'unary', '_baseUnary' ],
[ 'deburr', 'identity' ],
[ '_baseGetTag', '_objectToString' ],
[ '_equalByTag', 'eq' ],
[ '_getAllKeys', '_nativeKeys' ],
[ '_getAllKeysIn', '_nativeKeysIn' ],
[ '_getSymbols', 'stubArray' ],
[ '_getSymbolsIn', 'stubArray' ],
[ '_getTag', '_objectToString' ],
[ '_initCloneByTag', 'identity' ],
[ '_mapToArray', 'stubArray' ],
[ '_setToArray', 'stubArray' ],
[ '_setToPairs', 'stubArray' ],
[ 'isArguments', 'stubFalse' ],
[ 'isArrayBuffer', 'baseIsArrayBuffer' ],
[ 'isBuffer', 'stubFalse' ],
[ 'isDate', 'baseIsDate' ],
[ 'isMap', 'stubFalse' ],
[ 'isRegExp', 'baseIsRegExp' ],
[ 'isSet', 'stubFalse' ],
[ 'isSymbol', 'stubFalse' ],
[ 'isTypedArray', 'stubFalse' ],
[ '_baseFlatten', 'head' ],
[ '_flatRest', 'identity' ],
[ '_getNative', '_getValue' ],
[ '_getRawTag', '_objectToString' ],
[ '_isIterateeCall', 'stubFalse' ],
[ '_isPrototype', 'stubFalse' ],
[ '_baseKeys', '_nativeKeys' ],
[ '_baseKeysIn', '_nativeKeysIn' ],
[ '_castFunction', 'identity' ],
[ '_castRest', 'identity' ],
[ '_shortOut', 'identity' ],
[ 'isNaN', 'baseIsNaN' ],
[ 'isNative', 'stubTrue' ],
[ 'keys', '_nativeKeys' ],
[ 'keysIn', '_nativeKeysIn' ],
[ 'times', '_baseTimes' ],
[ '_memoizeCapped', 'identity' ],
[ 'memoize', 'identity' ],
[ '_baseSetData', 'identity' ],
[ '_getData', 'noop' ],
[ '_mergeData', 'identity' ],
[ '_setData', 'identity' ],
[ '_setToString', 'identity' ],
[ '_setWrapToString', 'identity' ],
[ '_baseGet', '_getValue' ],
[ '_castPath', 'castArray' ],
[ '_isKey', 'identity' ],
[ '_parent', 'identity' ],
[ 'has', '_baseHas' ],
[ 'hasIn', '_baseHasIn' ],
[ 'property', '_baseProperty' ],
[ 'propertyOf', '_basePropertyOf' ],
[ '_getHolder', 'noop' ],
[ '_replaceHolders', 'stubArray' ],
[ '_baseIteratee', 'identity' ],
[ '_hasUnicode', 'stubFalse' ],
[ '_hasUnicodeWord', 'stubFalse' ],
[ '_unicodeSize', '_asciiSize' ],
[ '_unicodeToArray', '_asciiToArray' ],
[ '_unicodeWords', '_asciiWords' ],
[ 'stringSize', '_asciiSize' ],
[ 'stringToArray', '_asciiToArray' ] ],
resolve: [Function: bound resolve] } ],
externals: [ [Function], [Function] ] },
name: 'server',
require:
{ [Function: require]
resolve: [Function],
probe: [Function],
cwd:
'/Users/projects/fullstack-pro/servers/frontend-server' },
plugins:
[ WebpackPlugin {},
WebAssetsPlugin {},
CssProcessorPlugin {},
ApolloPlugin {},
TypeScriptPlugin {},
BabelPlugin {},
ReactPlugin {},
TCombPlugin {},
FlowRuntimePLugin {},
ReactNativePlugin {},
ReactNativeWebPlugin {},
StyledComponentsPlugin {},
AngularPlugin {},
VuePlugin {},
I18NextPlugin {},
VuePlugin {},
ReactHotLoaderPlugin {} ],
roles: [ 'build', 'watch' ],
cache: '../../.cache',
backendBuildDir: 'dist',
frontendBuildDir: 'dist',
dllBuildDir: 'dist/.build/dll',
ssr: false,
backendUrl: 'http://localhost:8080',
webpackDll: true,
reactHotLoader: true,
useDefaultPostCss: true,
persistGraphQL: false,
frontendRefreshOnBackendChange: true,
nodeDebugger: false,
overridesConfig: './tools/webpackAppConfig.js',
devProxy: false,
id: '[server]',
configPath:
'/Users/projects/fullstack-pro/servers/frontend-server/.zenrc.js',
buildDir: undefined,
sourceMap: true,
minify: true },
'[test]':
{ stack:
Stack {
technologies: [ 'apollo', 'ts', 'react', 'webpack', 'css', 'server' ],
platform: 'server' },
roles: [ 'test' ],
defines:
{ __DEV__: true,
__GRAPHQL_URL__: '"http://localhost:8080/graphql"',
__SSR__: false,
__PERSIST_GQL__: '\'false\'',
__FRONTEND_BUILD_DIR__: '\'dist\'',
__DLL_BUILD_DIR__: '\'dist/.build/dll\'',
__DEBUGGING__: '\'false\'',
__TEST__: true },
name: 'test',
require:
{ [Function: require]
resolve: [Function],
probe: [Function],
cwd:
'/Users/projects/fullstack-pro/servers/frontend-server' },
plugins:
[ WebpackPlugin {},
WebAssetsPlugin {},
CssProcessorPlugin {},
ApolloPlugin {},
TypeScriptPlugin {},
BabelPlugin {},
ReactPlugin {},
TCombPlugin {},
FlowRuntimePLugin {},
ReactNativePlugin {},
ReactNativeWebPlugin {},
StyledComponentsPlugin {},
AngularPlugin {},
VuePlugin {},
I18NextPlugin {},
VuePlugin {},
ReactHotLoaderPlugin {} ],
cache: '../../.cache',
backendBuildDir: 'dist',
frontendBuildDir: 'dist',
dllBuildDir: 'dist/.build/dll',
ssr: false,
backendUrl: 'http://localhost:8080',
webpackDll: true,
reactHotLoader: true,
useDefaultPostCss: true,
persistGraphQL: false,
frontendRefreshOnBackendChange: true,
nodeDebugger: false,
overridesConfig: './tools/webpackAppConfig.js',
devProxy: false,
id: '[test]',
configPath:
'/Users/projects/fullstack-pro/servers/frontend-server/.zenrc.js',
buildDir: undefined,
sourceMap: true,
minify: true } }
zen info Version 0.1.34
zen debug [webDll] = { name: 'webDll',
module:
{ rules:
[ { test: /\.mjs$/,
include: /node_modules/,
type: 'javascript/auto' },
{ test: /\.css$/,
exclude: [Function: exclude],
use:
[ { loader: 'style-loader', options: {} },
{ loader: 'css-loader',
options: { sourceMap: true, importLoaders: 1 } },
{ loader: 'postcss-loader',
options: { plugins: [Function: plugins], sourceMap: true } } ] },
{ test: /\.css$/,
exclude: [Function: exclude],
use:
[ { loader: 'style-loader', options: {} },
{ loader: 'css-loader',
options: { sourceMap: true, importLoaders: 1 } } ] },
{ test: /\.ts$/,
exclude: [Function: exclude],
use:
[ { loader: 'awesome-typescript-loader',
options: { configFileName: './tsconfig.json', useCache: true } } ] } ] },
resolve:
{ symlinks: false,
cacheWithContext: false,
extensions: [ '.mjs', '.js', '.ts', '.json' ] },
watchOptions: { ignored: /(?:)/ },
bail: true,
stats:
{ hash: false,
version: false,
timings: true,
assets: false,
chunks: false,
modules: false,
reasons: false,
children: false,
source: true,
errors: true,
errorDetails: true,
warnings: true,
publicPath: false,
colors: true },
output:
{ devtoolModuleFilenameTemplate: [Function],
pathinfo: false,
filename: 'vendor_sampleStackFrontendServerWeb_[hash]_dll.js',
path:
'/Users/projects/fullstack-pro/servers/frontend-server/dist/.build/dll',
library: 'vendor_sampleStackFrontendServerWeb' },
devtool: '#cheap-module-source-map',
mode: 'development',
performance: { hints: false },
plugins:
[ DefinePlugin {
definitions:
{ 'process.env.NODE_ENV': '"development"',
__BACKEND_URL__: '\'http://localhost:8080\'',
__DEV__: true,
__GRAPHQL_URL__: '"http://localhost:8080/graphql"',
__SSR__: false,
__PERSIST_GQL__: '\'false\'',
__FRONTEND_BUILD_DIR__: '\'dist\'',
__DLL_BUILD_DIR__: '\'dist/.build/dll\'',
__DEBUGGING__: '\'false\'',
__CLIENT__: true } },
DllPlugin {
options:
{ name: 'vendor_sampleStackFrontendServerWeb',
path:
'dist/.build/dll/vendor_sampleStackFrontendServerWeb_dll.json' } },
CheckerPlugin {},
DefinePlugin {
definitions:
{ 'process.env.NATS_URL': '"nats://localhost:4222/"',
'process.env.NATS_USER': '"test"',
'process.env.NATS_PW': '"test"',
'process.env.GRAPHQL_URL': '"http://localhost:8080/graphql"',
'process.env.CLIENT_URL': '"http://localhost:3000"',
'process.env.ZIPKIN_URL': '"test"',
'process.env.ZIPKIN_PORT': '"test"',
'process.env.LOG_LEVEL': '"trace"' } },
DefinePlugin {
definitions:
{ __ENV__:
'{"NATS_URL":"nats://localhost:4222/","NATS_USER":"test","NATS_PW":"test","GRAPHQL_URL":"http://localhost:8080/graphql","CLIENT_URL":"http://localhost:3000","ZIPKIN_URL":"test","ZIPKIN_PORT":"test","LOG_LEVEL":"trace"}' } } ],
node:
{ __dirname: true,
__filename: true,
fs: 'empty',
net: 'empty',
tls: 'empty' },
optimization:
{ removeAvailableModules: false,
removeEmptyChunks: false,
splitChunks: false },
entry:
{ vendor:
[ '@cdm-logger/client',
'@common-stack/client-core',
'@common-stack/client-react',
'@common-stack/core',
'@common-stack/server-core',
'apollo-cache-inmemory',
'apollo-client',
'apollo-fetch',
'apollo-link',
'apollo-link-batch-http',
'apollo-link-context',
'apollo-link-debounce',
'apollo-link-error',
'apollo-link-http',
'apollo-link-logger',
'apollo-link-retry',
'apollo-link-schema',
'apollo-link-ws',
'apollo-logger',
'browser-bunyan',
'classnames',
'connected-react-router',
'cors',
'dotenv',
'envalid',
'error-stack-parser',
'esm',
'fela',
'fela-beautifier',
'fela-dom',
'fela-font-renderer',
'fela-perf',
'fela-plugin-fallback-value',
'fela-plugin-logger',
'fela-plugin-lvha',
'fela-plugin-prefixer',
'fela-plugin-unit',
'fela-plugin-validator',
'fela-preset-web',
'graphql',
'graphql-tag',
'history',
'immutability-helper',
'js-cookie',
'lodash',
'ramda',
'react',
'react-apollo',
'react-dom',
'react-fela',
'react-helmet',
'react-loadable',
'react-redux',
'react-resizable',
'react-router',
'react-router-config',
'react-router-dom',
'react-router-redux',
'react-transition-group',
'redux',
'redux-logger',
'redux-observable',
'redux-persist',
'redux-thunk',
'reselect',
'rxjs',
'rxjs-compat',
'sourcemapped-stacktrace',
'subscriptions-transport-ws',
'universal-cookie-express',
'webpack-dev-server/client' ] } }
zen debug [web] = { entry:
{ index:
[ 'raf/polyfill',
'webpack/hot/dev-server',
'webpack-dev-server/client?http://localhost:3000/',
'./src/index.tsx' ] },
name: 'web',
module:
{ rules:
[ { test: /\.mjs$/,
include: /node_modules/,
type: 'javascript/auto' },
{ test: /\.(png|ico|jpg|gif|xml)$/,
use:
{ loader: 'url-loader',
options: { name: '[hash].[ext]', limit: 100000 } } },
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use:
{ loader: 'url-loader',
options: { name: '[hash].[ext]', limit: 100000 } } },
{ test: /\.(otf|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: { loader: 'file-loader', options: { name: '[hash].[ext]' } } },
{ test: /\.css$/,
exclude: [Function: exclude],
use:
[ { loader: 'style-loader', options: {} },
{ loader: 'css-loader',
options: { sourceMap: true, importLoaders: 1 } },
{ loader: 'postcss-loader',
options: { plugins: [Function: plugins], sourceMap: true } } ] },
{ test: /\.css$/,
exclude: [Function: exclude],
use:
[ { loader: 'style-loader', options: {} },
{ loader: 'css-loader',
options: { sourceMap: true, importLoaders: 1 } } ] },
{ test: /\.graphqls/,
use: { loader: 'raw-loader', options: {} } },
{ test: /\.(graphql|gql)$/,
use: [ { loader: 'graphql-tag/loader', options: {} } ] },
{ test: /\.tsx?$/,
exclude: [Function: exclude],
use:
[ { loader: 'awesome-typescript-loader',
options: { configFileName: './tsconfig.json', useCache: true } } ] } ],
unsafeCache: false },
resolve:
{ symlinks: false,
cacheWithContext: false,
unsafeCache: false,
extensions:
[ '.web.mjs',
'.web.js',
'.web.ts',
'.web.tsx',
'.mjs',
'.js',
'.ts',
'.tsx',
'.json' ] },
watchOptions: { ignored: /(?:)/ },
bail: false,
stats:
{ hash: false,
version: false,
timings: true,
assets: false,
chunks: false,
modules: false,
reasons: false,
children: false,
source: true,
errors: true,
errorDetails: true,
warnings: true,
publicPath: false,
colors: true },
output:
{ devtoolModuleFilenameTemplate: [Function],
pathinfo: false,
filename: '[name].[hash].js',
chunkFilename: '[name].[chunkhash].js',
path:
'/Users/projects/fullstack-pro/servers/frontend-server/dist/web',
publicPath: '/' },
devtool: '#cheap-module-source-map',
mode: 'development',
performance: { hints: false },
plugins:
[ HotModuleReplacementPlugin {
options: {},
multiStep: undefined,
fullBuildTimeout: 200,
requestTimeout: 10000 },
DefinePlugin {
definitions:
{ __CLIENT__: true,
__SERVER__: false,
__SSR__: false,
__DEV__: true,
__TEST__: false,
'process.env.NODE_ENV': '"development"',
__BACKEND_URL__: '\'http://localhost:8080\'',
__GRAPHQL_URL__: '"http://localhost:8080/graphql"',
__PERSIST_GQL__: '\'false\'',
__FRONTEND_BUILD_DIR__: '\'dist\'',
__DLL_BUILD_DIR__: '\'dist/.build/dll\'',
__DEBUGGING__: '\'false\'' } },
ManifestPlugin {
opts:
{ publicPath: null,
basePath: '',
fileName: 'assets.json',
transformExtensions: /^(gz|map)$/i,
writeToFileEmit: false,
seed: null,
filter: null,
map: null,
generate: null,
sort: null,
serialize: [Function: serialize] } },
HtmlWebpackPlugin {
options:
{ template: '../../tools/html-plugin-template.ejs',
templateParameters: [Function: templateParametersGenerator],
filename: 'index.html',
hash: false,
inject: 'body',
compile: true,
favicon: false,
minify: false,
cache: true,
showErrors: true,
chunks: 'all',
excludeChunks: [],
chunksSortMode: 'auto',
meta: {},
title: 'Webpack App',
xhtml: false } },
DefinePlugin { definitions: { __PERSIST_GQL__: false } },
VirtualModulesPlugin {
_staticModules:
{ '/Users/projects/fullstack-pro/servers/frontend-server/node_modules/persisted_queries.json': '{}' } },
CheckerPlugin {},
DefinePlugin {
definitions:
{ 'process.env.NATS_URL': '"nats://localhost:4222/"',
'process.env.NATS_USER': '"test"',
'process.env.NATS_PW': '"test"',
'process.env.GRAPHQL_URL': '"http://localhost:8080/graphql"',
'process.env.CLIENT_URL': '"http://localhost:3000"',
'process.env.ZIPKIN_URL': '"test"',
'process.env.ZIPKIN_PORT': '"test"',
'process.env.LOG_LEVEL': '"trace"' } },
DefinePlugin {
definitions:
{ __ENV__:
'{"NATS_URL":"nats://localhost:4222/","NATS_USER":"test","NATS_PW":"test","GRAPHQL_URL":"http://localhost:8080/graphql","CLIENT_URL":"http://localhost:3000","ZIPKIN_URL":"test","ZIPKIN_PORT":"test","LOG_LEVEL":"trace"}' } } ],
node:
{ __dirname: true,
__filename: true,
fs: 'empty',
net: 'empty',
tls: 'empty' },
optimization:
{ removeAvailableModules: false,
removeEmptyChunks: false,
splitChunks: false },
devServer:
{ hot: true,
publicPath: '/',
headers: { 'Access-Control-Allow-Origin': '*' },
open: true,
quiet: false,
noInfo: true,
historyApiFallback: true,
port: 3000 } }
For serverside, we getting the below following unwanted packages. How can we skip it?
zen debug [server] = { entry:
{ index:
[ 'raf/polyfill',
'@babel/polyfill',
'webpack/hot/signal.js',
'./src/index.ts' ] },
name: 'server',
And this is our configuraiton for server
const config = {
builders: {
server: {
entry: './src/index.ts',
stack: ['server'],
tsLoaderOptions: {
"configFileName": "./tsconfig.json"
},
defines: {
__SERVER__: true
},
enabled: true,
webpackConfig: {
output: {
filename: 'main.js',
},
plugins: [
new CopyWebpackPlugin([{
from: '../../tools/esm-wrapper.js',
to: 'index.js',
}]),
],
externals: [
nodeExternals({}),
nodeExternals({ whitelist: [/webpack\/hot/i], modulesDir: "../../node_modules" })
],
}
},
test: {
stack: ['server'],
roles: ['test'],
defines: {
__TEST__: true
}
}
},
options: {
stack: [
'ts',
'webpack'
],
cache: '../../.cache',
ssr: false,
backendBuildDir: "dist",
frontendBuildDir: "dist",
dllBuildDir: "dist/.build/dll",
webpackDll: false,
reactHotLoader: false,
persistGraphQL: false,
backendUrl: "http://{ip}:8080",
frontendRefreshOnBackendChange: true,
nodeDebugger: false,
defines: {
__DEV__: process.env.NODE_ENV !== 'production',
__GRAPHQL_URL__: '"http://localhost:8080/graphql"',
},
}
};
API changed with CleanWebpackPlugin v2 and v3.
Zen afaik doesn't detect versions and uses only v1 API.
Using Zen 0.1.30 with CleanWebpackPlugin 2.0.2 throws:
zen error Error: clean-webpack-plugin only accepts an options object. See: https://github.com/johnagan/clean-webpack-plugin#options-and-defaults-optional
at new CleanWebpackPlugin (.\my-project\node_modules\clean-webpack-plugin\src\clean-webpack-plugin.ts:79:19)
at createPlugins (.\my-project\node_modules\@larix\zen\src\plugins\WebpackPlugin.ts:74:30)
at createConfig (.\my-project\node_modules\@larix\zen\src\plugins\WebpackPlugin.ts:294:19)
at WebpackPlugin.configure (.\my-project\node_modules\@larix\zen\src\plugins\WebpackPlugin.ts:552:50)
at .\my-project\node_modules\@larix\zen\src\createBuilders.ts:146:62
at Array.forEach (<anonymous>)
at _loop_2 (.\my-project\node_modules\@larix\zen\src\createBuilders.ts:146:21)
at Object.createBuilders [as default] (.\my-project\node_modules\@larix\zen\lib\createBuilders.js:154:9)
at Object.<anonymous> (.\my-project\node_modules\@larix\zen\src\cli.ts:50:30)
at Module._compile (internal/modules/cjs/loader.js:777:30)
Using Zen 0.1.30 with CleanWebpackPlugin 3.0.0 throws:
zen error TypeError: CleanWebpackPlugin is not a constructor
at createPlugins (.\my-project\node_modules\@larix\zen\src\plugins\WebpackPlugin.ts:74:30)
at createConfig (.\my-project\node_modules\@larix\zen\src\plugins\WebpackPlugin.ts:294:19)
at WebpackPlugin.configure (.\my-project\node_modules\@larix\zen\src\plugins\WebpackPlugin.ts:552:50)
at .\my-project\node_modules\@larix\zen\src\createBuilders.ts:146:62
at Array.forEach (<anonymous>)
at _loop_2 (.\my-project\node_modules\@larix\zen\src\createBuilders.ts:146:21)
at Object.createBuilders [as default] (.\my-project\node_modules\@larix\zen\lib\createBuilders.js:154:9)
at Object.<anonymous> (.\my-project\node_modules\@larix\zen\src\cli.ts:50:30)
at Module._compile (internal/modules/cjs/loader.js:777:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:788:10)
When a build fails especially on frontend, we see it throws an error but process don't exit. Due to it the build just hangs instead of exiting.
server-webpack error ModuleNotFoundError: Module not found: Error: Can't resolve 'apollo-link-scalar' in '/Users/fullstack-pro/servers/frontend-server/src/modules'
at factory.create (/Users/fullstack-pro/node_modules/webpack/lib/Compilation.js:925:10)
The fix I have found that work is by replacing this line https://github.com/sysgears/larix/blob/master/packages/zen/src/executor.ts#L121 with process.exit(1). Let me know if you want me to send PR.
I cannot seem to get .zenrc.js to work. It works great without it, but I need to do some customization, I can't get past this. It's probably something simple, but I figured I'd ask at the risk of looking like a dummy. Thanks a lot for any help. Zen is awesome.
Basic config within web package.
const config = {
builders: {
web: {
stack: ['web'],
openBrowser: true
}
},
options: {
ssr: true,
webpackDll: true,
reactHotLoader: true,
webpackConfig: {
devServer: {
disableHostCheck: true
}
}
}
}
module.exports = config
After the recent PR we getting following errors
Error: Cannot find module '../../../.pnp.js'
Require stack:
- /Users/common/fullstack-pro/node_modules/@larix/zen/src/boot-dev.js
- /Users/common/fullstack-pro/node_modules/@larix/zen/src/boot-cli-dev.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:815:15)
at Function.Module._load (internal/modules/cjs/loader.js:667:27)
at Module.require (internal/modules/cjs/loader.js:887:19)
at require (internal/modules/cjs/helpers.js:74:18)
at Object.<anonymous> (/Users/veeramarni/common/fullstack-pro/node_modules/@larix/zen/src/boot-dev.js:1:1)
Is it possible to build a config for a TS project that uses path aliases? I'd like to alias package paths in a monorepo. I can't seem to get this to work after spending days trying everything I can think of. All I could think of was to open an issue, maybe someone can recommend something? Thank you.
My stack has 'webpack' in it, but errors out saying it doesn't.
zen error Error: builder 'web' stack does not include 'webpack'. Consider let zen guess your stack by removing 'stack' propery.
const config = {
builders: {
server: {
stack: ['server', 'webpack', 'es5', 'js', 'ts', 'apollo', 'react'],
openBrowser: true,
entry: './src/index.ts'
}
},
options: {
ssr: true,
webpackDll: true,
reactHotLoader: true,
webpackConfig: {
devServer: {
disableHostCheck: true
}
}
}
}
module.exports = config
Webpack-dev-server is getting loaded twice when using the latest webpack and webpack-dev-server.
"webpack version": "4.41.2"
"webpack-dev-server": "3.9.0"
From the browser console .log
index.2f5ee125b2932ecc10fc.js:145885 [WDS] Hot Module Replacement enabled.
index.2f5ee125b2932ecc10fc.js:145889 [WDS] Live Reloading enabled.
index.2f5ee125b2932ecc10fc.js:146069 [WDS] Hot Module Replacement enabled.
index.2f5ee125b2932ecc10fc.js:146073 [WDS] Live Reloading enabled.
From the browser console, we see
__webpack_require__("../../node_modules/webpack-dev-server/client/index.js?http://localhost:3000");
__webpack_require__("../../node_modules/webpack/hot/dev-server.js");
__webpack_require__("../../node_modules/raf/polyfill.js");
__webpack_require__("../../node_modules/webpack/hot/dev-server.js");
__webpack_require__("../../node_modules/webpack-dev-server/client/index.js?http://localhost:3000/");
module.exports = __webpack_require__("./src/index.tsx")
After investigating the issue, I found out that zen adds the following in dev environment which is also been added from webpack-dev-server from the latest version.
debug [web] = { entry:
{ index:
[ 'raf/polyfill',
'webpack/hot/dev-server',
'webpack-dev-server/client?http://localhost:3000/',
'./src/index.tsx' ] },
name: 'web',
....
...
}
https://github.com/sysgears/larix/blob/master/packages/zen/src/plugins/WebpackPlugin.ts#L470
Can this be corrected for version greater than >3.1?
instead
index: (zen.dev ? ['webpack/hot/dev-server', "webpack-dev-server/client?" + webpackDevURL + "/"] : []).concat([
builder.entry || './src/client/index.js'
])
to
if(webpackDevServerVersion > 3.1) {
index: ([
builder.entry || './src/client/index.js'
])
} else {
index: (zen.dev ? ['webpack/hot/dev-server', "webpack-dev-server/client?" + webpackDevURL + "/"] : []).concat([
builder.entry || './src/client/index.js'
])
}
When hot module renders the changes it shows the following warning with latest webpack.
WARNING in Conflict: Multiple assets emit different content to the same filename index.f612673c059cbe9d86c9.js.map
The fix would be as shown in webpack/webpack#9732 (comment)
'[file].map[query]' for SourceMapDevToolPlugin
Getting the following error with the latest version. Seems to be a build or npm packaging issue.
> zen watch
internal/modules/cjs/loader.js:584
throw err;
^
Error: Cannot find module '../../../.pnp.js'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:582:15)
at Function.Module._load (internal/modules/cjs/loader.js:508:25)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:22:18)
at Object.<anonymous> (/Users//fullstack-pro/node_modules/@larix/zen/src/boot-dev.js:1:63)
at Module._compile (internal/modules/cjs/loader.js:701:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
at Module.load (internal/modules/cjs/loader.js:600:32)
at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
at Function.Module._load (internal/modules/cjs/loader.js:531:3)
With webpack version 4.46.0, we hitting into a bug with clean-webpack-plugin when setting output.path to / location here.
Reference react-cosmos/react-cosmos#1280
Will send a PR on it.
ts-loader works fine, but I wanted to move to awesome-typescript-loader as from what I've read it does paths better??? Anyways, I get this now. Lots of stuff in Google on this, but so far no luck. I removed ts-loader from manifest to possibly stop conflicts, but no luck there either. :)
$ zen watch -v
TypeError: Cannot read property 'parentCompilation' of undefined
at Object.getRootCompiler (Q:\PROJECTS\NOWSECURE\distillery\node_modules\awesome-typescript-loader\src\instance.ts:71:15)
We seeing this issue with latest version 0.1.32. I have uploaded the log.
Script used
const url = require('url');
const path = require('path');
var nodeExternals = require('webpack-node-externals');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const config = {
builders: {
server: {
entry: './src/index.ts',
stack: ['server'],
tsLoaderOptions: {
"configFileName": "./tsconfig.json"
},
defines: {
__SERVER__: true
},
enabled: true,
webpackConfig: {
output: {
filename: 'main.js',
},
plugins: [
new CopyWebpackPlugin([{
from: '../../tools/esm-wrapper.js',
to: 'index.js',
}]),
],
externals: [
nodeExternals({}),
nodeExternals({ whitelist: [/webpack\/hot/i], modulesDir: "../../node_modules" })
],
}
},
test: {
stack: ['server'],
roles: ['test'],
defines: {
__TEST__: true
}
}
},
options: {
stack: [
'ts',
"apollo",
'webpack'
],
cache: '../../.cache',
ssr: false,
backendBuildDir: "dist",
frontendBuildDir: "dist",
dllBuildDir: "dist/.build/dll",
webpackDll: false,
persistGraphQL: false,
backendUrl: "http://{ip}:8080",
frontendRefreshOnBackendChange: true,
nodeDebugger: false,
defines: {
__DEV__: process.env.NODE_ENV !== 'production',
__GRAPHQL_URL__: '"http://localhost:8080/graphql"',
},
}
};
config.options.devProxy = config.options.ssr;
if (process.env.NODE_ENV === 'test') {
}
if (process.env.NODE_ENV === 'production') {
// Generating source maps for production will slowdown compilation for roughly 25%
config.options.sourceMap = false;
}
const extraDefines = {
__SSR__: config.options.ssr,
__PERSIST_GQL__: config.options.persistGraphQL,
__FRONTEND_BUILD_DIR__: `"../frontend-server/dist/web"`,
__DLL_BUILD_DIR__: `"../frontend-server/dist/build/dll"`
};
config.options.defines = Object.assign(config.options.defines, extraDefines);
module.exports = config;
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.