CLI arguments of create-nx-workspace - nrwl-nx

Is there some documentation regarding the arguments that create-nx-workspace takes? I'd like to build a copy and paste-able oneliner to set up a new workspace without any interactive questions asked. So far I have
npx create-nx-workspace#latest myworkspace --name myworkspace --preset web-components --appName myapp --cli angular
Next it's asking me which default stylesheet format I want to use. And I can't figure out how to specify that as a command line parameter.

Currently there is not option to define style within create-nx-workspace command. As you can see there is only prompt to inquire style after determination of appName promise:
determineWorkspaceName(parsedArgs).then(name => {
determinePreset(parsedArgs).then(preset => {
return determineAppName(preset, parsedArgs).then(appName => {
return determineStyle(preset).then(style => {
return determineCli(preset, parsedArgs).then(cli => {
const tmpDir = createSandbox(packageManager, cli);
createApp(tmpDir, cli, parsedArgs, name, preset, appName, style);
showCliWarning(preset, parsedArgs);
showNxWarning(name);
pointToTutorial(preset);
});
});
});
});
});
Code of the determineStyle is here.
I have already prepared PR to add this feature into create-nx-workspace command here.

You may select the tools used for styling the application
npx create-nx-workspace#latest myworkspace ... --style=css
You may use on of the following options
css, scss, less for Angular projects
styl for all non-Angular, and
styled-components, #emotion/styled, styled-jsx for React, Next.js and Gatsby.
Command line options for NX
You can check the command line options that you can use to create the NX workspace by running
npx create-nx-workspace#latest --help
The following are the command line options for the v13.4.5 version:
Option
Description
preset
Tools to be used in the workspace (options: "apps", "empty", "core", "npm", "ts", "web-components", "angular", "angular-nest", "react", "react-express", "react-native", "next", "gatsby", "nest", "express")
appName
Name of the application
cli
CLI to be used (options: "nx", "angular")
style
style option (options: "css", "scss", "less" for Angular, "styl" for all non-Angular and "styled-components", "#emotion/styled", "styled-jsx" for React, Next.js and Gatsby)
interactive
enable interactive mode when using presets (boolean)
packageManager
package manager to use (npm, yarn, pnpm)
nx-cloud
yse Nx Cloud (boolean)

Related

problem loading in ${localEnv:TOKEN} into devcontainer.json

In my devcontainer.json for vscode, I am trying to load in a build variable. This variable is on my local machine's environment, my code looks like the following:
//build arguments
"build": {
"args": {
"TOKEN": "${localEnv:TOKEN}"
}
}
It seems like it works when I put in a direct string, or something like "${localEnv:HOME}", but it is not picking up this custom one. which is strange because I can do 'printenv TOKEN' and it prints out correctly.
any ideas on what I may be doing wrong?
Add your export BLA=1 to .profile, this was the only way VScode was able to pass through env variables to the devcontainer.
.devcontainer:
{
"name": "devcontainer",
"build": {
"dockerfile": "${localWorkspaceFolder}/Dockerfile",
"context": "${localWorkspaceFolder}",
},
"remoteEnv": {
"FOO": "${localEnv:FOO}",
"BAR": "${localEnv:BAR}",
}
}
First, ensure that you have the VS Code Terminal -> Integrated: Inherit Env setting set to true. This is described on the Advanced Container Configuration page:
Workarounds
If that doesn't fix your problem (it didn't for me), here are some of the workarounds that I have found:
Set the variables in your ~/.bashrc file (or export them temporarily in the terminal) and start VS Code from a bash prompt (the executable is code).
$ export TOKEN=tokenvalue
$ code
Set the variables in your ~/.pam_environment file (these are available session wide and are inherited by applications started with the launcher). You will need to logout and login or reboot for these to apply.
TOKEN=tokenvalue
Set the environment variables in one of your VS Code settings files (user or workspace) using the Terminal -> Integrated Env: Linux setting:
// Object with environment variables that will be added to the VS Code process to be used by the terminal on Linux. Set to `null` to delete the environment variable.
"terminal.integrated.env.linux": {
"TOKEN": "tokenvalue"
},

How do I disable babel minification when not in production?

I am using babelify and babili for JS minification, via gulp:
// Now run the watchifys function for this bundle
watchifysForBundle[jsBundle]
// Note: we don't use any babel presets - instead we just write code in what evergreen browsers support
.transform(babelify, {
presets: ['babel-preset-babili'],
ignore: ['buffer']
})
However I can't seem to find how to pass the options to check NODE_ENV and disable babeli when not in production. The babelify docs don't seem to help, even with this common use case.
How can I disable babelify minification when not in production?
Babili is deprecated and has been renamed to babel-minify, so you should be using that instead.
npm install babel-preset-minify --save-dev
To disable the minification in development you simply don't use the babel-preset-minify (or babel-preset-babili for that matter). As you're using Gulp you can use everything Node.js has to offer to decide which presets you want to include, which means that you can check process.env.NODE_ENV and decide whether you want to include the minify preset.
watchifysForBundle[jsBundle]
.transform(babelify, {
presets: process.env.NODE_ENV === 'production' ? ['minify'] : [],
ignore: ['buffer']
})
An alternative would be to use Babel's env option (not to confuse with babel-preset-env), which uses the configuration that matches the value of BABEL_ENV or NODE_ENV if no BABEL_ENV was defined. This approach is shown in babel-preset-minify - Usage.
{
"env": {
"production": {
"presets": ["minify"]
}
}
}
The env option is not really recommended and mainly exists because .babelrc is JSON and there is no good way to define conditional configurations. This will change in Babel 7 which allows a .babelrc.js config where you have the full power of Node.js and that means you could do the same thing as with Gulp.
To avoid minification, don't use uglify
gulp.task('build:js', function(){
return browserify(
'test.js'
)
.transform('babelify',{
presets: ['#babel/preset-env']
})
.bundle()
.pipe(source('test.js'))
.pipe(buffer())
.pipe(uglify())
.pipe(gulp.dest('destpath'));
});
Instead try--- adding option- compact:false, global:true in babelify
gulp.task('build:js', function(){
return browserify(
'test.js'
)
.transform('babelify',{
presets: ['#babel/preset-env'],
compact: false,
global: true
})
.bundle()
.pipe(source('test.js'))
.pipe(buffer())
.pipe(gulp.dest('destpath'));
});

Override JSHint Options by using the Grunt Command-Line

By calling
grunt jshint:path_to_file
I want to override the default JSHint configuration
grunt.initConfig({
jshint: {
options: {
curly: true,
eqeqeq: true,
eqnull: true,
browser: true,
globals: {
jQuery: true
}
},
all: ['Gruntfile.js', 'Scripts/src/**/*.js']
}
});
and only include that specific file.
"grunt jshint path_to_file" would also be okay yet I do not want to use the
grunt jshint --file=filePath
grunt.option function unless it can do what I need.
Is this achievable somehow?
The spirit of grunt is more to code which files to use in the gruntfile itself than specifying it on the command line.
So we would need more details on why you want to do that. I imagined 2 possibilities:
you only want to work on a subcomponent: in that case, you would declare different targets for each and call the targets from the command line: grunt jshint component1 with in your Gruntfile:
jshint: {
component1: [filePath1],
component2: [filePath2]
}
it's a performance issue: you only want to jshint some files because only them changed. In that case, combine grunt-contrib-watch (to run jshint on file change) and grunt-newer (to only run on the modified files)

How to run particular protractor test case from command prompt

I am successfully able to run the protractor scripts. Below is the protractor.config.js file which I am using to run the protractor scripts.
var Jasmine2Reporter = require('protractor-jasmine2-screenshot-reporter');
var HtmlReporter = require('protractor-html-screenshot-reporter');
var jReporter=new Jasmine2Reporter({
dest: './protractor-result',
fileName: 'protractor-demo-tests-report.html'
});
var reporter=new HtmlReporter({
baseDirectory: './protractor-result', // a location to store screen shots.
docTitle: 'Protractor Demo Reporter',
docName: 'protractor-demo-tests-report.html'
});
exports.config = {
allScriptsTimeout: 11000,
specs: [
'testCaseOne.spec.js' // Hardcoded to run single script.
'*.spec.js' // to run all scripts.
],
capabilities: {
'browserName': 'chrome'
},
baseUrl: 'http://localhost:8000/app/',
framework: 'jasmine2',
};
I am successfully able to run the protractor scripts. Below is the protractor.config.js file which I am using to run the protractor scripts
To run above file, I used below command.
$ npm run protractor
My Expectation:
Now, I would like to run the single protractor script from command prompt. How this can be achieved? This will be useful when I will try to run the protractor test cases from any test management tool.
Can anyone please help me on this.
Try this:
protractor protractor.conf.js --specs='specs/run-just-this-spec.js'
If you want to run a specific test you need use jasmine2 and pass the grep option. https://github.com/angular/protractor/blob/19139272d190dd9c1888d9c3fc2f480f7c6c8edb/docs/jasmine-upgrade.md
Additionally to the given answers, you can use suites, which are sets of specs:
You can have suites which consist only of one spec.
You can run particular spec like this:
protractor --suite=my-suite-name
Also you can temporarily exclude suite or spec in Jasmine using xdescribe and xit (just type x before describe or it).
Also you can focus on particular suite or spec in Jasmin using fdescribe and fit (just type f before describe or it).
Use the node.js process.env object.
var w00t = process.env.TESTED || '*';
exports.config = {
allScriptsTimeout: 11000,
specs: [
w00t + '.spec.js'
],
Prepend TESTED=testCaseOn when you start protractor to execute the desired spec. To execute all scripts add nothing so that *.spec.js will be called.

How do I run only certain tests in karma?

I have karma config set up correctly, config file, running in the background, just great. As soon as I change and save a file, it reruns the tests.... all 750 of the unit tests. I want to be able to run just a few. Short of manually hacking the config file or commenting out hundreds of tests across many files, is there any easy way to do it?
E.g. when running command line server tests using say mocha, I just use regexp: mocha -g 'only tests that I want'. Makes it much easier to debug and quickly check.
So now I feel foolish. mocha supports a very narrow version of regexp matching.
This runs all tests
describe('all tests',function(){
describe('first tests',function(){
});
describe('second tests',function(){
});
});
This runs just 'first tests'
describe('all tests',function(){
describe.only('first tests',function(){
});
describe('second tests',function(){
});
});
You can also do it.only()
I should have noticed that. Sigh.
You can do that at karma startup time unfortunately, not at runtime.
If you want to change it dynamically you have to put some more effort.
Say you want to focus on a specific set/suite of tests from the beginning, on the karma-mocha plugin page there's this snippet of code to do what you want:
module.exports = function(config) {
config.set({
// karma configuration here
...
// this is a mocha configuration object
client: {
// The pattern string will be passed to mocha
args: ['--grep', '<pattern>'],
...
}
});
};
In order to make the <pattern> parametric you have to wrap the configuration file in a Configurator that will listen CLI and customize the karma configuration for you.
Have a look to this SO answer to know how to setup a very simple Configurator.
I have same question and this is my workround by a little change on karma.conf.js.
In fact, take an argument from command line and modify the pattern in "files".
I use minimist to parse the argument list.
In config file:
/* Begin */
var minimist = require('minimist');
var argv = minimist(process.argv);
var testBase="test/unit";
var testExt=".spec.js";
var unitTestPattern = testBase+'/**/*'+testExt;
if ("test" in argv){
unitTestPattern = testBase+"/"+argv["test"]+testExt;
}
/* End */
module.exports = function(config){
config.set({
//....
files : [
//....
unitTestPattern, //place here
// 'test/unit/**/*.spec.js', //replace this
//....
],
//....
});
};
run in command prompt:
karma start test/karma.conf.js --single-run --test #TEST_CASE_FILE#
a nice extension that can help here is karma-jasmine-html-reporter-livereload
https://www.npmjs.com/package/karma-jasmine-html-reporter-livereload
or karma-jasmine-html-reporter https://www.npmjs.com/package/karma-jasmine-html-reporter?__hstc=72727564.86845f057bb4d741f59d578059e30644.1443860954685.1453095135802.1453138187458.37&__hssc=72727564.1.1453138187458&__hsfp=2285154675
It creates a debug page in which you can run each test individually. very useful for large projects!
1) In your karma.conf.js get the params from the terminal:
var files = (process.env.npm_config_single_file) ? process.env.npm_config_single_file : 'test/test_index.js';
2) In order to run a single test you will need to set an option object with all your configuration (Without files and preprocessors):
var option = {
webpack: {
// webpack configuration
},
// more configuration......
};
3) Set your files path and preprocessors:
option.files = [
{pattern: files, watch: false}
];
option.preprocessors = {};
option.preprocessors[files] = [ 'webpack', 'sourcemap' ];
// call config.set function
config.set(option);
4) Run in the terminal:
npm test --single_file=**/my-specific-file-spec.js
For more information check this PR:
https://github.com/webpack/karma-webpack/pull/178
There are different ways to do it.
Use --grep option. The disadvantage of this is that all the tests are preprocessed before running the specific test suite.
Use .only method. Disadvantage same as no. 1. Using both 1 and 2 method my node process used to crash often saying out of memory.
Limit the files options for processing. This is super fast.
Limit preprocessing to certain folder like Unit or Integration folder.
For this I have used custom cli option --only and in the karma config
const modules = config.only;
and in the the files pattern
files: typeof modules === 'string ? '[`tests/**/${module}/**/*.(test|spec).js`]: 'tests/**/*.(test|spec).js'
Advantage: Developers can run only certain tests when they make a small change way faster by limiting in the preprocessing phase.
You can also use combination of no.3 and no.1 or 2.