Comments (11)
@veeramarni I'm not sure where @larix/zen
will be used. We have tried @larix/zen
, some people like and use it. We have tried vanilla webpack configs, some people like them more then @larix/zen
, but some people want to stick with @larix/zen
. So the solution seems to be continue improving zen and add an option to zen to output vanilla webpack config to file system.
from larix.
@veeramarni yarn create @larix my-app
, then specify @server-graphql
configuration in the UI and customize generated webpack.config.js
to your needs
from larix.
Was there an option using the zen
config file? Although @larix my-app
is good for a new project, for our needs we need to work with zen
only.
I see @larix/zen
not used in @larix create-app
, so where it will be used then?
from larix.
@veeramarni As for this issue. Looks like zen
somehow ignores your stack, could you attach full output of zen -v
to this issue?
from larix.
here is the full verbose output.
zen debug Zen Config:
{ '[test]':
{ stack:
Stack {
technologies:
[ 'ts',
'webpack',
'server',
'apollo',
'es6',
'js',
'react',
'css',
'sass' ],
platform: 'server' },
roles: [ 'test', 'test' ],
defines:
{ __DEV__: true,
__GRAPHQL_URL__: '"http://localhost:8080/graphql"',
__SSR__: false,
__PERSIST_GQL__: false,
__FRONTEND_BUILD_DIR__: '"../frontend-server/dist/web"',
__DLL_BUILD_DIR__: '"../frontend-server/dist/build/dll"',
__TEST__: true },
name: 'test',
require:
{ [Function: require]
resolve: [Function],
probe: [Function],
cwd:
'/Users/projects/fullstack-pro/servers/backend-server' },
plugins:
[ WebpackPlugin {},
WebAssetsPlugin {},
CssProcessorPlugin {},
ApolloPlugin {},
TypeScriptPlugin {},
BabelPlugin {},
ReactPlugin {},
TCombPlugin {},
FlowRuntimePLugin {},
ReactNativePlugin {},
ReactNativeWebPlugin {},
StyledComponentsPlugin {},
AngularPlugin {},
VuePlugin {},
I18NextPlugin {},
VuePlugin {},
ReactHotLoaderPlugin {} ],
silent: true,
nodeDebugger: false,
cache: '../../.cache',
ssr: false,
backendBuildDir: 'dist',
frontendBuildDir: 'dist',
dllBuildDir: 'dist/.build/dll',
webpackDll: false,
persistGraphQL: false,
backendUrl: 'http://{ip}:8080',
frontendRefreshOnBackendChange: true,
devProxy: false,
id: '[test]',
configPath:
'/Users/projects/fullstack-pro/servers/backend-server/.zenrc.js',
buildDir: undefined,
sourceMap: true,
minify: true },
'[server]':
{ stack:
Stack {
technologies:
[ 'ts',
'webpack',
'server',
'apollo',
'es6',
'js',
'react',
'css',
'sass' ],
platform: 'server' },
infered: true,
entry: './src/index.ts',
tsLoaderOptions: { configFileName: './tsconfig.json' },
defines:
{ __DEV__: true,
__GRAPHQL_URL__: '"http://localhost:8080/graphql"',
__SSR__: false,
__PERSIST_GQL__: false,
__FRONTEND_BUILD_DIR__: '"../frontend-server/dist/web"',
__DLL_BUILD_DIR__: '"../frontend-server/dist/build/dll"',
__SERVER__: true },
enabled: true,
webpackConfig:
{ output: { filename: 'main.js' },
plugins:
[ CopyPlugin {
patterns: [ { from: '../../tools/esm-wrapper.js', to: 'index.js' } ],
options: {} } ],
externals: [ [Function], [Function] ] },
name: 'server',
require:
{ [Function: require]
resolve: [Function],
probe: [Function],
cwd:
'/Users/projects/fullstack-pro/servers/backend-server' },
plugins:
[ WebpackPlugin {},
WebAssetsPlugin {},
CssProcessorPlugin {},
ApolloPlugin {},
TypeScriptPlugin {},
BabelPlugin {},
ReactPlugin {},
TCombPlugin {},
FlowRuntimePLugin {},
ReactNativePlugin {},
ReactNativeWebPlugin {},
StyledComponentsPlugin {},
AngularPlugin {},
VuePlugin {},
I18NextPlugin {},
VuePlugin {},
ReactHotLoaderPlugin {} ],
roles: [ 'build', 'watch' ],
silent: true,
nodeDebugger: false,
cache: '../../.cache',
ssr: false,
backendBuildDir: 'dist',
frontendBuildDir: 'dist',
dllBuildDir: 'dist/.build/dll',
webpackDll: false,
persistGraphQL: false,
backendUrl: 'http://{ip}:8080',
frontendRefreshOnBackendChange: true,
devProxy: false,
id: '[server]',
configPath:
'/Users/projects/fullstack-pro/servers/backend-server/.zenrc.js',
buildDir: undefined,
sourceMap: true,
minify: true } }
zen info Version 0.1.30
zen debug [server] = { entry:
{ index:
[ 'raf/polyfill',
'@babel/polyfill',
'webpack/hot/signal.js',
'./src/index.ts' ] },
name: 'server',
module:
{ rules:
[ { test: /\.mjs$/,
include: /node_modules/,
type: 'javascript/auto' },
{ test: /\.(png|ico|jpg|xml)$/,
use: { loader: 'ignore-loader' } },
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: { loader: 'ignore-loader' } },
{ test: /\.(otf|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: { loader: 'ignore-loader' } },
{ test: /\.css$/,
exclude: [Function: exclude],
use:
[ { loader: 'isomorphic-style-loader', options: {} },
{ loader: 'css-loader', options: { sourceMap: true } },
{ loader: 'postcss-loader', options: { sourceMap: true } } ] },
{ test: /\.css$/,
exclude: [Function: exclude],
use:
[ { loader: 'isomorphic-style-loader', options: {} },
{ loader: 'css-loader', options: { sourceMap: true } } ] },
{ test: /\.scss$/,
exclude: [Function: exclude],
use:
[ { loader: 'isomorphic-style-loader', options: {} },
{ loader: 'css-loader', options: { sourceMap: true } },
{ loader: 'postcss-loader', options: { sourceMap: true } },
{ loader: 'sass-loader', options: { sourceMap: true } } ] },
{ test: /\.scss$/,
exclude: [Function: exclude],
use:
[ { loader: 'isomorphic-style-loader', options: {} },
{ loader: 'css-loader', options: { sourceMap: true } },
{ loader: 'sass-loader', options: { sourceMap: true } } ] },
{ 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 } } ] },
{ test: /\.jsx?$/,
exclude: [Function: exclude],
use:
{ loader: 'babel-loader',
options:
{ babelrc: true,
cacheDirectory: '../../.cache/babel-loader',
rootMode: 'upward-optional' } } } ],
unsafeCache: false },
resolve:
{ symlinks: false,
cacheWithContext: false,
unsafeCache: false,
extensions:
[ '.web.mjs',
'.web.js',
'.web.jsx',
'.web.ts',
'.web.tsx',
'.mjs',
'.js',
'.jsx',
'.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: 'main.js',
path:
'/Users/projects/fullstack-pro/servers/backend-server/dist',
publicPath: '/',
sourceMapFilename: '[name].[chunkhash].js.map' },
devtool: '#cheap-module-source-map',
mode: 'development',
performance: { hints: false },
plugins:
[ HotModuleReplacementPlugin {
options: {},
multiStep: undefined,
fullBuildTimeout: 200,
requestTimeout: 10000 },
BannerPlugin {
options:
{ banner: 'require("source-map-support").install();',
raw: true,
entryOnly: false },
banner: [Function] },
DefinePlugin {
definitions:
{ __CLIENT__: false,
__SERVER__: true,
__SSR__: false,
__DEV__: true,
__TEST__: false,
'process.env.NODE_ENV': '"development"',
__BACKEND_URL__: '\'http://10.114.58.126:8080\'',
__GRAPHQL_URL__: '"http://localhost:8080/graphql"',
__PERSIST_GQL__: false,
__FRONTEND_BUILD_DIR__: '"../frontend-server/dist/web"',
__DLL_BUILD_DIR__: '"../frontend-server/dist/build/dll"' } },
DefinePlugin { definitions: { __PERSIST_GQL__: false } },
VirtualModulesPlugin {
_staticModules:
{ '/Users/projects/fullstack-pro/servers/backend-server/node_modules/persisted_queries.json': '{}' } },
CheckerPlugin {},
CopyPlugin {
patterns: [ { from: '../../tools/esm-wrapper.js', to: 'index.js' } ],
options: {} } ],
target: 'node',
externals: [ [Function], [Function] ],
optimization:
{ removeAvailableModules: false,
removeEmptyChunks: false,
splitChunks: false },
node: { __dirname: true, __filename: true } }
from larix.
@veeramarni I've just published @larix/[email protected]
which should give priority to manual stack definitions. However you will likely have other errors with your config. Your stack should be something like: [ 'ts', 'webpack', 'server' ]
, not just [ 'server' ]
. Please try the latest version and let me know whether you have proper entry point files
from larix.
I have the rest defined under options
. Will that options.stack
ignored?
from larix.
Thanks, right now I see below. I have added apollo
to stack as well.
zen debug Zen Config:
{ '[test]':
{ stack:
Stack {
technologies:
[ 'ts', 'apollo', 'webpack', 'es6', 'js', 'css', 'sass', 'server' ],
platform: 'server' },
roles: [ 'test', 'test' ],
defines:
{ __DEV__: true,
__GRAPHQL_URL__: '"http://localhost:8080/graphql"',
__SSR__: false,
__PERSIST_GQL__: false,
__FRONTEND_BUILD_DIR__: '"../frontend-server/dist/web"',
__DLL_BUILD_DIR__: '"../frontend-server/dist/build/dll"',
__TEST__: true },
name: 'test',
require:
{ [Function: require]
resolve: [Function],
probe: [Function],
cwd:
'/Users/projects/fullstack-pro/servers/backend-server' },
plugins:
[ WebpackPlugin {},
WebAssetsPlugin {},
CssProcessorPlugin {},
ApolloPlugin {},
TypeScriptPlugin {},
BabelPlugin {},
ReactPlugin {},
TCombPlugin {},
FlowRuntimePLugin {},
ReactNativePlugin {},
ReactNativeWebPlugin {},
StyledComponentsPlugin {},
AngularPlugin {},
VuePlugin {},
I18NextPlugin {},
VuePlugin {},
ReactHotLoaderPlugin {} ],
silent: true,
nodeDebugger: false,
cache: '../../.cache',
ssr: false,
backendBuildDir: 'dist',
frontendBuildDir: 'dist',
dllBuildDir: 'dist/.build/dll',
webpackDll: false,
persistGraphQL: false,
backendUrl: 'http://{ip}:8080',
frontendRefreshOnBackendChange: true,
devProxy: false,
id: '[test]',
configPath:
'/Users/projects/fullstack-pro/servers/backend-server/.zenrc.js',
buildDir: undefined,
sourceMap: true,
minify: true },
'[server]':
{ entry: './src/index.ts',
stack:
Stack {
technologies: [ 'ts', 'apollo', 'webpack', 'server' ],
platform: 'server' },
tsLoaderOptions: { configFileName: './tsconfig.json' },
defines:
{ __DEV__: true,
__GRAPHQL_URL__: '"http://localhost:8080/graphql"',
__SSR__: false,
__PERSIST_GQL__: false,
__FRONTEND_BUILD_DIR__: '"../frontend-server/dist/web"',
__DLL_BUILD_DIR__: '"../frontend-server/dist/build/dll"',
__SERVER__: true },
enabled: true,
webpackConfig:
{ output: { filename: 'main.js' },
plugins:
[ CopyPlugin {
patterns: [ { from: '../../tools/esm-wrapper.js', to: 'index.js' } ],
options: {} } ],
externals: [ [Function], [Function] ] },
name: 'server',
require:
{ [Function: require]
resolve: [Function],
probe: [Function],
cwd:
'/Users/projects/fullstack-pro/servers/backend-server' },
plugins:
[ WebpackPlugin {},
WebAssetsPlugin {},
CssProcessorPlugin {},
ApolloPlugin {},
TypeScriptPlugin {},
BabelPlugin {},
ReactPlugin {},
TCombPlugin {},
FlowRuntimePLugin {},
ReactNativePlugin {},
ReactNativeWebPlugin {},
StyledComponentsPlugin {},
AngularPlugin {},
VuePlugin {},
I18NextPlugin {},
VuePlugin {},
ReactHotLoaderPlugin {} ],
roles: [ 'build', 'watch' ],
silent: true,
nodeDebugger: false,
cache: '../../.cache',
ssr: false,
backendBuildDir: 'dist',
frontendBuildDir: 'dist',
dllBuildDir: 'dist/.build/dll',
webpackDll: false,
persistGraphQL: false,
backendUrl: 'http://{ip}:8080',
frontendRefreshOnBackendChange: true,
devProxy: false,
id: '[server]',
configPath:
'/Users/projects/fullstack-pro/servers/backend-server/.zenrc.js',
buildDir: undefined,
sourceMap: true,
minify: true } }
zen info Version 0.1.32
zen debug [server] = { name: 'server',
module:
{ rules:
[ { test: /\.mjs$/,
include: /node_modules/,
type: 'javascript/auto' },
{ test: /\.(png|ico|jpg|xml)$/,
use: { loader: 'ignore-loader' } },
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: { loader: 'ignore-loader' } },
{ test: /\.(otf|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: { loader: 'ignore-loader' } },
{ test: /\.graphqls/,
use: { loader: 'raw-loader', options: {} } },
{ test: /\.(graphql|gql)$/,
use: [ { loader: 'graphql-tag/loader', options: {} } ] },
{ test: /\.ts$/,
exclude: [Function: exclude],
use:
[ { loader: 'awesome-typescript-loader',
options: { configFileName: './tsconfig.json', useCache: true } } ] } ],
unsafeCache: false },
resolve:
{ symlinks: false,
cacheWithContext: false,
unsafeCache: false,
extensions: [ '.mjs', '.js', '.ts', '.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: 'main.js',
path:
'/Users/projects/fullstack-pro/servers/backend-server/dist',
publicPath: '/',
sourceMapFilename: '[name].[chunkhash].js.map' },
devtool: '#cheap-module-source-map',
mode: 'development',
performance: { hints: false },
plugins:
[ HotModuleReplacementPlugin {
options: {},
multiStep: undefined,
fullBuildTimeout: 200,
requestTimeout: 10000 },
BannerPlugin {
options:
{ banner: 'require("source-map-support").install();',
raw: true,
entryOnly: false },
banner: [Function] },
DefinePlugin {
definitions:
{ __CLIENT__: false,
__SERVER__: true,
__SSR__: false,
__DEV__: true,
__TEST__: false,
'process.env.NODE_ENV': '"development"',
__BACKEND_URL__: '\'http://10.114.58.126:8080\'',
__GRAPHQL_URL__: '"http://localhost:8080/graphql"',
__PERSIST_GQL__: false,
__FRONTEND_BUILD_DIR__: '"../frontend-server/dist/web"',
__DLL_BUILD_DIR__: '"../frontend-server/dist/build/dll"' } },
DefinePlugin { definitions: { __PERSIST_GQL__: false } },
VirtualModulesPlugin {
_staticModules:
{ '/Users/projects/fullstack-pro/servers/backend-server/node_modules/persisted_queries.json': '{}' } },
CheckerPlugin {},
CopyPlugin {
patterns: [ { from: '../../tools/esm-wrapper.js', to: 'index.js' } ],
options: {} } ],
target: 'node',
externals: [ [Function], [Function] ],
optimization:
{ removeAvailableModules: false,
removeEmptyChunks: false,
splitChunks: false },
entry: { index: [ 'webpack/hot/signal.js', './src/index.ts' ] },
node: { __dirname: true, __filename: true } }
from larix.
@veeramarni Looks good to me now, right?
from larix.
I see 'css', 'sass',
as unwanted stack but harmless. Thanks for fixing the issue quickly.
from larix.
@larixer We are hitting with another bug, sometimes it generates and runs web
stack even when we don't define it in the .zenrc.js
. I cannot determine why it happens, but it happens when I update to 0.1.32
but works fine in 0.1.13
(older version). I will dig more if I can find any reason and will create new issue.
from larix.
Related Issues (17)
- [zen]Error: Cannot find module '../../../.pnp.js' HOT 2
- openBrowser option not working HOT 4
- [DEP0091] DeprecationWarning: crypto HOT 2
- latest webpack and webpack-dev-server causing to load the webpack-dev-server package twice HOT 1
- WARNING in Conflict: Multiple assets emit different content to the same filename index.f612673c059cbe9d86c9.js.map HOT 2
- when build fails, it throws error but process do not exit HOT 1
- I cannot figure out how to create aliases with Zen & Typescript HOT 21
- Functionality to ignore folders for BuilderDiscoverer / bug report HOT 1
- found issue with latest clean-webpack-plugin
- latest webpack issue with clean-webpack-plugin
- latest version fails HOT 1
- Cannot read property 'vendor' of undefined HOT 7
- Awesome-typescript-loader breaks HOT 4
- False positive? HOT 1
- Support different CleanWebpackPlugin versions HOT 2
- zen generated `web` stack as well even we don't list in the stack HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 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.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
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.
from larix.