Skip to content

Commit

Permalink
feat(nx): add create-nx-workspace package to simplify workspace creation
Browse files Browse the repository at this point in the history
  • Loading branch information
vsavkin committed Mar 2, 2019
1 parent 8d382a8 commit 24f31d1
Show file tree
Hide file tree
Showing 15 changed files with 180 additions and 110 deletions.
26 changes: 7 additions & 19 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -58,38 +58,26 @@ Nx **is not** a replacement for Angular CLI. **An Nx workspace is an Angular CLI

# Getting Started

## Creating an Nx Workspace Using Npx
## Creating an Nx Workspace

Using [Npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) you can create a new Nx workspace without installing any packages.

Simply run:
**Using `npx`**

```bash
npx -p @nrwl/schematics create-nx-workspace myworkspace
npx create-nx-workspace myworkspace
```

## Creating an Nx Workspace Without Npx

Install `@nrwl/schematics`.
**Using `npm init`**

```bash
npm install -g @nrwl/schematics
npm init nx-workspace myworkspace
```

Then run:
**Using `yarn create`**

```bash
ng new myworkspace --collection=@nrwl/schematics
yarn create nx-workspace myworkspace
```

The `ng new` command uses globally-installed packages. Anything installed globally can be in a messy state. If you have any problems running the command above, you can also run:

```bash
create-nx-workspace myworkspacename
```

This command still runs `ng new` under the hood, but it does it in a sandboxed environment, and, as a result, never fails.

## Adding Nx to an Existing Angular CLI workspace

If you already have a regular Angular CLI project, you can add Nx power-ups by running:
Expand Down
26 changes: 6 additions & 20 deletions docs/getting-started/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,38 +10,24 @@ npm install -g @angular/cli

## Creating an Nx Workspace

### Creating an Nx Workspace Using Npx

Using [Npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) you can create a new workspace without installing any packages.

Simply run:

```bash
npx -p @nrwl/schematics create-nx-workspace myworkspace
```

### Creating an Nx Workspace Without Npx

Install `@nrwl/schematics`.
**Using `npx`**

```bash
npm install -g @nrwl/schematics
npx create-nx-workspace myworkspace
```

Then run:
**Using `npm init`**

```bash
ng new myworkspace --collection=@nrw/schematics
npm init nx-workspace myworkspace
```

The `ng new` command uses globally-installed packages. Anything installed globally can be in a messy state. If you have any problems running the command above, you can also run:
**Using `yarn create`**

```bash
create-nx-workspace myworkspacename
yarn create nx-workspace myworkspace
```

This command still runs `ng new` under the hood, but it does it in a sandboxed environment, and, as a result, never fails.

### Adding to an Existing Angular CLI workspace

If you already have a regular Angular CLI project, you can add Nx power-ups by running:
Expand Down
2 changes: 1 addition & 1 deletion docs/tutorial/01-create-application.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ In this tutorial you will use Nx to build a full-stack application out of common
**Start by creating a new workspace.**

```bash
npx -p @nrwl/schematics create-nx-workspace myorg
npx create-nx-workspace myorg
```

When asked about 'preset', select `empty`.
Expand Down
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@nrwl/nx-source",
"version": "7.6.0",
"description": "Nrwl Extensions for Angular",
"version": "7.6.2",
"description": "Angular CLI power-ups for modern Web development",
"main": "index.js",
"private": true,
"scripts": {
Expand Down
4 changes: 2 additions & 2 deletions packages/builders/package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@nrwl/builders",
"version": "0.0.1",
"description": "Nrwl Extensions for Angular: Builders",
"description": "Angular CLI power-ups for modern Web development: Builders",
"repository": {
"type": "git",
"url": "git+https://github.com/nrwl/nx.git"
Expand All @@ -22,7 +22,7 @@
"bugs": {
"url": "https://github.com/nrwl/nx/issues"
},
"homepage": "https://github.com/nrwl/nx#readme",
"homepage": "https://nx.dev",
"builders": "./src/builders.json",
"dependencies": {
"@angular-devkit/architect": "~0.13.1",
Expand Down
92 changes: 92 additions & 0 deletions packages/create-nx-workspace/bin/create-nx-workspace.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
#!/usr/bin/env node

import { execSync } from 'child_process';
import { dirSync } from 'tmp';
import { writeFileSync } from 'fs';
import * as path from 'path';
import * as yargsParser from 'yargs-parser';

const parsedArgs = yargsParser(process.argv, {
string: ['directory'],
boolean: ['help']
});

if (parsedArgs.help) {
console.log(`
Usage: create-nx-workspace <directory> [options] [ng new options]
Create a new Nx workspace
Options:
directory path to the workspace root directory
[ng new options] any 'ng new' options
run 'ng new --help' for more information
`);
process.exit(0);
}

const nxTool = {
name: 'Schematics',
packageName: '@nrwl/schematics'
};
let useYarn = true;

try {
execSync('yarn --version', { stdio: ['ignore', 'ignore', 'ignore'] });
} catch (e) {
useYarn = false;
}

const projectName = parsedArgs._[2];

// check that the workspace name is passed in
if (!projectName) {
console.error(
'Please provide a project name (e.g., create-nx-workspace nrwl-proj)'
);
process.exit(1);
}

// creating the sandbox
console.log(`Creating a sandbox with Nx...`);
const tmpDir = dirSync().name;

const nxVersion = 'NX_VERSION';
const cliVersion = 'ANGULAR_CLI_VERSION';

writeFileSync(
path.join(tmpDir, 'package.json'),
JSON.stringify({
dependencies: {
[nxTool.packageName]: nxVersion,
'@angular/cli': cliVersion
},
license: 'MIT'
})
);

if (useYarn) {
execSync('yarn install --silent', { cwd: tmpDir, stdio: [0, 1, 2] });
} else {
execSync('npm install --silent', { cwd: tmpDir, stdio: [0, 1, 2] });
}

// creating the app itself
const args = process.argv
.slice(2)
.map(a => `"${a}"`)
.join(' ');
console.log(`ng new ${args} --collection=${nxTool.packageName}`);
execSync(
`${path.join(
tmpDir,
'node_modules',
'.bin',
'ng'
)} new ${args} --collection=${nxTool.packageName}`,
{
stdio: [0, 1, 2]
}
);
31 changes: 31 additions & 0 deletions packages/create-nx-workspace/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
{
"name": "create-nx-workspace",
"version": "0.0.2",
"description": "Angular CLI power-ups for modern Web development",
"repository": {
"type": "git",
"url": "git+https://github.com/nrwl/nx.git"
},
"keywords": [
"RxJS",
"Angular",
"Workspace",
"NgRx",
"Schematics",
"Angular CLI"
],
"bin": {
"create-nx-workspace": "./bin/create-nx-workspace.js"
},
"author": "Victor Savkin",
"license": "MIT",
"bugs": {
"url": "https://github.com/nrwl/nx/issues"
},
"homepage": "https://nx.dev",
"dependencies": {
"tmp": "0.0.33",
"yargs-parser": "10.0.0",
"yargs": "^11.0.0"
}
}
2 changes: 1 addition & 1 deletion packages/nx/package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@nrwl/nx",
"version": "0.0.1",
"description": "Nrwl Extensions for Angular",
"description": "Angular CLI power-ups for modern Web development",
"main": "bundles/nrwl-nx.umd.js",
"types": "nrwl-nx.d.ts",
"module": "esm5/nrwl-nx.js",
Expand Down
55 changes: 6 additions & 49 deletions packages/schematics/bin/create-nx-workspace.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,10 @@

import { execSync } from 'child_process';
import { dirSync } from 'tmp';
import { lt } from 'semver';
import { writeFileSync } from 'fs';
import * as path from 'path';
import * as yargsParser from 'yargs-parser';

import { readJsonFile } from '../src/utils/fileutils';
import { angularCliVersion } from '../src/lib-versions';

const parsedArgs = yargsParser(process.argv, {
string: ['directory'],
boolean: ['help']
Expand All @@ -19,29 +15,22 @@ if (parsedArgs.help) {
console.log(`
Usage: create-nx-workspace <directory> [options] [ng new options]
Create a new Nx workspace (that is to say a new angular-cli project using @nrwl/schematics)
Create a new Nx workspace
Options:
directory path to the workspace root directory
--yarn use yarn (default to false)
--bazel use bazel instead of webpack (default to false)
[ng new options] any 'ng new' options
run 'ng new --help' for more information
`);
process.exit(0);
}
const schematicsTool = {

const nxTool = {
name: 'Schematics',
packageName: '@nrwl/schematics'
};
const bazelTool = {
name: 'Bazel',
packageName: '@nrwl/bazel'
};

const nxTool = parsedArgs.bazel ? bazelTool : schematicsTool;
let useYarn = true;

try {
Expand All @@ -50,36 +39,8 @@ try {
useYarn = false;
}

if (!useYarn) {
try {
// check the correct version of the NPM is installed
const output = execSync('npm --version').toString();
if (lt(output, '5.0.0')) {
console.error(
'To create a workspace you must have NPM >= 5.0.0 installed.'
);
process.exit(1);
}
} catch (e) {
console.error(
'Cannot find npm. If you want to use yarn to create a project, pass the --yarn flag.'
);
process.exit(1);
}
}

const projectName = parsedArgs._[2];

if (parsedArgs.bazel) {
if (!/^\w+$/.test(projectName)) {
console.error(
`${projectName} is invalid for a bazel workspace.\n` +
'Your workspace name must contain only alphanumeric characters and underscores.'
);
process.exit(1);
}
}

// check that the workspace name is passed in
if (!projectName) {
console.error(
Expand All @@ -89,15 +50,12 @@ if (!projectName) {
}

// creating the sandbox
console.log(`Creating a sandbox with the CLI and Nx ${nxTool.name}...`);
console.log(`Creating a sandbox with Nx...`);
const tmpDir = dirSync().name;

// we haven't updated bazel to CLI6 yet
const nxVersion = parsedArgs.bazel
? '1.0.3'
: readJsonFile(path.join(path.dirname(__dirname), 'package.json')).version;
const nxVersion = 'NX_VERSION';
const cliVersion = 'ANGULAR_CLI_VERSION';

const cliVersion = parsedArgs.bazel ? '1.7.2' : angularCliVersion;
writeFileSync(
path.join(tmpDir, 'package.json'),
JSON.stringify({
Expand All @@ -118,7 +76,6 @@ if (useYarn) {
// creating the app itself
const args = process.argv
.slice(2)
.filter(a => a !== '--yarn' && a !== '--bazel')
.map(a => `"${a}"`)
.join(' ');
console.log(`ng new ${args} --collection=${nxTool.packageName}`);
Expand Down
4 changes: 2 additions & 2 deletions packages/schematics/package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@nrwl/schematics",
"version": "0.0.2",
"description": "Nrwl Extensions for Angular: Schematics",
"description": "Angular CLI power-ups for modern Web development: Schematics",
"repository": {
"type": "git",
"url": "git+https://github.com/nrwl/nx.git"
Expand All @@ -25,7 +25,7 @@
"bugs": {
"url": "https://github.com/nrwl/nx/issues"
},
"homepage": "https://github.com/nrwl/nx#readme",
"homepage": "https://nx.dev",
"schematics": "./src/collection.json",
"ng-update": {
"requirements": {},
Expand Down
Loading

0 comments on commit 24f31d1

Please sign in to comment.