feat(frontend): update home screens
This commit is contained in:
ben
Victor Savkin
parent
b4e25fdd2a
commit
a83f47abf3
@ -284,7 +284,7 @@ describe('app', () => {
|
||||
).toBeTruthy();
|
||||
expect(
|
||||
getFileContent(tree, 'apps/my-dir/my-app/src/app/app.component.html')
|
||||
).toContain('This is an Angular app built with');
|
||||
).toContain('Thank you for using and showing some ♥ for Nx.');
|
||||
});
|
||||
|
||||
it("should update `template`'s property of AppComponent with Nx content", async () => {
|
||||
@ -295,7 +295,7 @@ describe('app', () => {
|
||||
);
|
||||
expect(
|
||||
getFileContent(tree, 'apps/my-dir/my-app/src/app/app.component.ts')
|
||||
).toContain('This is an Angular app built with');
|
||||
).toContain('Thank you for using and showing some ♥ for Nx.');
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@ -44,6 +44,225 @@ interface NormalizedSchema extends Schema {
|
||||
parsedTags: string[];
|
||||
}
|
||||
|
||||
const nrwlHomeTemplate = {
|
||||
html: `
|
||||
<header class="flex">
|
||||
<img alt="Nx logo" width="75" src="https://nx.dev/assets/images/nx-logo-white.svg" />
|
||||
<h1>Welcome to {{title}}!</h1>
|
||||
</header>
|
||||
<main>
|
||||
<h2>Resources & Tools</h2>
|
||||
<p>
|
||||
Thank you for using and showing some ♥ for Nx.
|
||||
</p>
|
||||
<div class="flex github-star-container">
|
||||
<a href="https://github.com/nrwl/nx" target="_blank" rel="noopener noreferrer"> If you like Nx, please give it a star:
|
||||
<div class="github-star-badge">
|
||||
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
|
||||
Star
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<p>
|
||||
Here are some links to help you get started.
|
||||
</p>
|
||||
<ul class="resources">
|
||||
<li class="col-span-2">
|
||||
<a
|
||||
class="resource flex"
|
||||
href="https://nx.dev/angular/getting-started/what-is-nx"
|
||||
>
|
||||
Nx video tutorial
|
||||
</a>
|
||||
</li>
|
||||
<li class="col-span-2">
|
||||
<a
|
||||
class="resource flex"
|
||||
href="https://nx.dev/angular/tutorial/01-create-application"
|
||||
>
|
||||
Interactive tutorial
|
||||
</a>
|
||||
</li>
|
||||
<li class="col-span-2">
|
||||
<a class="resource flex" href="https://connect.nrwl.io/">
|
||||
<img
|
||||
height="36"
|
||||
alt="Nrwl Connect"
|
||||
src="https://connect.nrwl.io/assets/img/CONNECT_ColorIcon.png"
|
||||
/>
|
||||
<span class="gutter-left">Nrwl Connect</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Next Steps</h2>
|
||||
<p>Here are some things you can do with Nx.</p>
|
||||
<details open>
|
||||
<summary>Add UI library</summary>
|
||||
<pre>
|
||||
\`# Generate UI lib
|
||||
ng g @nrwl/angular:lib ui
|
||||
|
||||
# Add a component
|
||||
ng g @nrwl/angular:component xyz --project ui\`</pre
|
||||
>
|
||||
</details>
|
||||
<details>
|
||||
<summary>View dependency graph</summary>
|
||||
<pre>\`nx dep-graph\`</pre>
|
||||
</details>
|
||||
<details>
|
||||
<summary>Run affected commands</summary>
|
||||
<pre>
|
||||
\`# see what's been affected by changes
|
||||
ng affected:dep-graph
|
||||
|
||||
# run tests for current changes
|
||||
ng affected:test
|
||||
|
||||
# run e2e tests for current changes
|
||||
ng affected:e2e
|
||||
\`</pre
|
||||
>
|
||||
</details>
|
||||
</main>
|
||||
`,
|
||||
css: `
|
||||
/*
|
||||
* Remove template code below
|
||||
*/
|
||||
:host {
|
||||
display: block;
|
||||
font-family: sans-serif;
|
||||
min-width: 300px;
|
||||
max-width: 600px;
|
||||
margin: 50px auto;
|
||||
}
|
||||
|
||||
.gutter-left {
|
||||
margin-left: 9px;
|
||||
}
|
||||
|
||||
.col-span-2 {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: #143055;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 0 36px;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-left: 18px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
margin: 40px 0 10px 0;
|
||||
}
|
||||
|
||||
.resources {
|
||||
text-align: center;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
grid-gap: 9px;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.resource {
|
||||
color: #0094ba;
|
||||
height: 36px;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
border: 1px solid rgba(0, 0, 0, 0.12);
|
||||
border-radius: 4px;
|
||||
padding: 3px 9px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.resource:hover {
|
||||
background-color: rgba(68, 138, 255, 0.04);
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: 9px;
|
||||
border-radius: 4px;
|
||||
background-color: black;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
details {
|
||||
border-radius: 4px;
|
||||
color: #333;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
border: 1px solid rgba(0, 0, 0, 0.12);
|
||||
padding: 3px 9px;
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
|
||||
summary {
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
.github-star-container {
|
||||
margin-top: 12px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.github-star-container a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.github-star-badge {
|
||||
color: #24292e;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
padding: 3px 10px;
|
||||
border: 1px solid rgba(27,31,35,.2);
|
||||
border-radius: 3px;
|
||||
background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
|
||||
margin-left: 4px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.github-star-badge:hover {
|
||||
background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%);
|
||||
border-color: rgba(27,31,35,.35);
|
||||
background-position: -.5em;
|
||||
}
|
||||
.github-star-badge .material-icons {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
`
|
||||
};
|
||||
|
||||
function addRouterRootConfiguration(options: NormalizedSchema): Rule {
|
||||
return (host: Tree) => {
|
||||
const modulePath = `${options.appProjectRoot}/src/app/app.module.ts`;
|
||||
@ -95,27 +314,47 @@ function addRouterRootConfiguration(options: NormalizedSchema): Rule {
|
||||
};
|
||||
}
|
||||
|
||||
function updateComponentStyles(options: NormalizedSchema): Rule {
|
||||
return (host: Tree) => {
|
||||
const content = nrwlHomeTemplate.css;
|
||||
|
||||
if (!options.inlineStyle) {
|
||||
const filesMap = {
|
||||
css: `${options.appProjectRoot}/src/app/app.component.css`,
|
||||
scss: `${options.appProjectRoot}/src/app/app.component.scss`,
|
||||
less: `${options.appProjectRoot}/src/app/app.component.less`,
|
||||
styl: `${options.appProjectRoot}/src/app/app.component.styl`
|
||||
};
|
||||
return host.overwrite(filesMap[options.style], content);
|
||||
}
|
||||
|
||||
// Inline component update
|
||||
const modulePath = `${options.appProjectRoot}/src/app/app.component.ts`;
|
||||
const templateNodeValue = getDecoratorPropertyValueNode(
|
||||
host,
|
||||
modulePath,
|
||||
'Component',
|
||||
'styles',
|
||||
'@angular/core'
|
||||
);
|
||||
replaceNodeValue(
|
||||
host,
|
||||
modulePath,
|
||||
templateNodeValue,
|
||||
`[\`\n${content}\n\`],\n`
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param options
|
||||
*/
|
||||
function updateComponentTemplate(options: NormalizedSchema): Rule {
|
||||
return (host: Tree) => {
|
||||
const baseContent = `
|
||||
<div style="text-align:center">
|
||||
<h1>Welcome to {{title}}!</h1>
|
||||
<img width="450" src="https://raw.githubusercontent.com/nrwl/nx/master/nx-logo.png">
|
||||
</div>
|
||||
|
||||
<p>This is an Angular app built with <a href="https://nx.dev/angular">Nx</a>.</p>
|
||||
<p>🔎 **Nx is a set of Extensible Dev Tools for Monorepos.**</p>
|
||||
|
||||
<h2>Quick Start & Documentation</h2>
|
||||
|
||||
<ul>
|
||||
<li><a href="https://nx.dev/angular/getting-started/what-is-nx">10-minute video showing all Nx features</a></li>
|
||||
<li><a href="https://nx.dev/angular/tutorial/01-create-application">Interactive tutorial</a></li>
|
||||
</ul>
|
||||
`;
|
||||
const content = options.routing
|
||||
? `${baseContent}\n<router-outlet></router-outlet>`
|
||||
: baseContent;
|
||||
? `${nrwlHomeTemplate.html}\n<router-outlet></router-outlet>`
|
||||
: nrwlHomeTemplate.html;
|
||||
|
||||
if (!options.inlineTemplate) {
|
||||
return host.overwrite(
|
||||
@ -124,6 +363,7 @@ function updateComponentTemplate(options: NormalizedSchema): Rule {
|
||||
);
|
||||
}
|
||||
|
||||
// Inline component update
|
||||
const modulePath = `${options.appProjectRoot}/src/app/app.component.ts`;
|
||||
const templateNodeValue = getDecoratorPropertyValueNode(
|
||||
host,
|
||||
@ -136,7 +376,7 @@ function updateComponentTemplate(options: NormalizedSchema): Rule {
|
||||
host,
|
||||
modulePath,
|
||||
templateNodeValue,
|
||||
`\`\n${baseContent}\n\`,\n`
|
||||
`\`\n${nrwlHomeTemplate.html}\n\`,\n`
|
||||
);
|
||||
};
|
||||
}
|
||||
@ -177,8 +417,12 @@ function updateLinting(options: NormalizedSchema): Rule {
|
||||
]);
|
||||
}
|
||||
|
||||
function addTsconfigs(options: NormalizedSchema): Rule {
|
||||
function addSchematicFiles(
|
||||
appProjectRoot: string,
|
||||
options: NormalizedSchema
|
||||
): Rule {
|
||||
return chain([
|
||||
host => host.delete(`${appProjectRoot}/src/favicon.ico`),
|
||||
mergeWith(
|
||||
apply(url('./files'), [
|
||||
template({
|
||||
@ -385,7 +629,7 @@ export default function(schema: Schema): Rule {
|
||||
skipInstall: true,
|
||||
skipPackageJson: false
|
||||
}),
|
||||
addTsconfigs(options),
|
||||
addSchematicFiles(appProjectRoot, options),
|
||||
options.e2eTestRunner === 'protractor'
|
||||
? move(e2eProjectRoot, options.e2eProjectRoot)
|
||||
: removeE2e(options, e2eProjectRoot),
|
||||
@ -403,6 +647,7 @@ export default function(schema: Schema): Rule {
|
||||
move(appProjectRoot, options.appProjectRoot),
|
||||
updateProject(options),
|
||||
updateComponentTemplate(options),
|
||||
updateComponentStyles(options),
|
||||
options.routing ? addRouterRootConfiguration(options) : noop(),
|
||||
updateLinting(options),
|
||||
options.unitTestRunner === 'jest'
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
@ -94,3 +94,39 @@
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
.app .github-star-container {
|
||||
margin-top: 12px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.app .github-star-container a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.app .github-star-badge {
|
||||
color: #24292e;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
padding: 3px 10px;
|
||||
border: 1px solid rgba(27,31,35,.2);
|
||||
border-radius: 3px;
|
||||
background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
|
||||
margin-left: 4px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.app .github-star-badge:hover {
|
||||
background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%);
|
||||
border-color: rgba(27,31,35,.35);
|
||||
background-position: -.5em;
|
||||
}
|
||||
.app .github-star-badge .material-icons {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
@ -105,6 +105,42 @@ summary {
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
.github-star-container {
|
||||
margin-top: 12px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.github-star-container a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.github-star-badge {
|
||||
color: #24292e;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
padding: 3px 10px;
|
||||
border: 1px solid rgba(27,31,35,.2);
|
||||
border-radius: 3px;
|
||||
background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
|
||||
margin-left: 4px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.github-star-badge:hover {
|
||||
background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%);
|
||||
border-color: rgba(27,31,35,.35);
|
||||
background-position: -.5em;
|
||||
}
|
||||
.github-star-badge .material-icons {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
`;
|
||||
<% }%>
|
||||
|
||||
@ -121,7 +157,17 @@ var innerJsx = `
|
||||
<main>
|
||||
<h2>Resources & Tools</h2>
|
||||
<p>
|
||||
Thank you for using and showing some ♥ for Nx. <br />
|
||||
Thank you for using and showing some ♥ for Nx.
|
||||
</p>
|
||||
<div className="flex github-star-container">
|
||||
<a href="https://github.com/nrwl/nx" target="_blank" rel="noopener noreferrer"> If you like Nx, please give it a star:
|
||||
<div className="github-star-badge">
|
||||
<svg className="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
|
||||
Star
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<p>
|
||||
Here are some links to help you get started.
|
||||
</p>
|
||||
<ul className="resources">
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 15 KiB |
@ -179,7 +179,7 @@ describe('app', () => {
|
||||
).toBeTruthy();
|
||||
expect(
|
||||
tree.readContent('apps/my-dir/my-app/src/app/app.element.ts')
|
||||
).toContain('This is a Web Components app built with');
|
||||
).toContain('Thank you for using and showing some ♥ for Nx.');
|
||||
});
|
||||
|
||||
describe('--style scss', () => {
|
||||
|
||||
@ -0,0 +1,133 @@
|
||||
/*
|
||||
* Remove template code below
|
||||
*/
|
||||
body > *:first-child {
|
||||
display: block;
|
||||
font-family: sans-serif;
|
||||
min-width: 300px;
|
||||
max-width: 600px;
|
||||
margin: 50px auto;
|
||||
}
|
||||
|
||||
.gutter-left {
|
||||
margin-left: 9px;
|
||||
}
|
||||
|
||||
.col-span-2 {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: #143055;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 0 36px;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-left: 18px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
margin: 40px 0 10px 0;
|
||||
}
|
||||
|
||||
.resources {
|
||||
text-align: center;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
grid-gap: 9px;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.resource {
|
||||
color: #0094ba;
|
||||
height: 36px;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
border: 1px solid rgba(0, 0, 0, 0.12);
|
||||
border-radius: 4px;
|
||||
padding: 3px 9px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.resource:hover {
|
||||
background-color: rgba(68, 138, 255, 0.04);
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: 9px;
|
||||
border-radius: 4px;
|
||||
background-color: black;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
details {
|
||||
border-radius: 4px;
|
||||
color: #333;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
border: 1px solid rgba(0, 0, 0, 0.12);
|
||||
padding: 3px 9px;
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
|
||||
summary {
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
.github-star-container {
|
||||
margin-top: 12px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.github-star-container a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.github-star-badge {
|
||||
color: #24292e;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
padding: 3px 10px;
|
||||
border: 1px solid rgba(27,31,35,.2);
|
||||
border-radius: 3px;
|
||||
background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
|
||||
margin-left: 4px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.github-star-badge:hover {
|
||||
background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%);
|
||||
border-color: rgba(27,31,35,.35);
|
||||
background-position: -.5em;
|
||||
}
|
||||
.github-star-badge .material-icons {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
@ -8,24 +8,85 @@ export class AppElement extends HTMLElement {
|
||||
connectedCallback() {
|
||||
const title = '<%= projectName %>';
|
||||
this.innerHTML = `
|
||||
<div style="text-align: center">
|
||||
<header class="flex">
|
||||
<img alt="Nx logo" width="75" src="https://nx.dev/assets/images/nx-logo-white.svg" />
|
||||
<h1>Welcome to ${title}!</h1>
|
||||
<img
|
||||
width="450"
|
||||
src="https://raw.githubusercontent.com/nrwl/nx/master/nx-logo.png"
|
||||
/>
|
||||
</header>
|
||||
<main>
|
||||
<h2>Resources & Tools</h2>
|
||||
<p>
|
||||
Thank you for using and showing some ♥ for Nx.
|
||||
</p>
|
||||
<div class="flex github-star-container">
|
||||
<a href="https://github.com/nrwl/nx" target="_blank" rel="noopener noreferrer"> If you like Nx, please give it a star:
|
||||
<div class="github-star-badge">
|
||||
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
|
||||
Star
|
||||
</div>
|
||||
<p>This is a Web Components app built with <a href="https://nx.dev/web">Nx</a>.</p>
|
||||
<p>🔎 **Nx is a set of Extensible Dev Tools for Monorepos.**</p>
|
||||
<h2>Quick Start & Documentation</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://nx.dev/web/getting-started/what-is-nx">10-minute video showing all Nx features</a>
|
||||
</a>
|
||||
</div>
|
||||
<p>
|
||||
Here are some links to help you get started.
|
||||
</p>
|
||||
<ul class="resources">
|
||||
<li class="col-span-2">
|
||||
<a
|
||||
class="resource flex"
|
||||
href="https://nx.dev/angular/getting-started/what-is-nx"
|
||||
>
|
||||
Nx video tutorial
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://nx.dev/web/tutorial/01-create-application">Interactive tutorial</a>
|
||||
<li class="col-span-2">
|
||||
<a
|
||||
class="resource flex"
|
||||
href="https://nx.dev/angular/tutorial/01-create-application"
|
||||
>
|
||||
Interactive tutorial
|
||||
</a>
|
||||
</li>
|
||||
<li class="col-span-2">
|
||||
<a class="resource flex" href="https://connect.nrwl.io/">
|
||||
<img
|
||||
height="36"
|
||||
alt="Nrwl Connect"
|
||||
src="https://connect.nrwl.io/assets/img/CONNECT_ColorIcon.png"
|
||||
/>
|
||||
<span class="gutter-left">Nrwl Connect</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Next Steps</h2>
|
||||
<p>Here are some things you can do with Nx.</p>
|
||||
<details open>
|
||||
<summary>Add UI library</summary>
|
||||
<pre>
|
||||
\`# Generate UI lib
|
||||
nx g @nrwl/angular:lib ui
|
||||
|
||||
# Add a component
|
||||
nx g @nrwl/angular:component xyz --project ui\`</pre
|
||||
>
|
||||
</details>
|
||||
<details>
|
||||
<summary>View dependency graph</summary>
|
||||
<pre>\`nx dep-graph\`</pre>
|
||||
</details>
|
||||
<details>
|
||||
<summary>Run affected commands</summary>
|
||||
<pre>
|
||||
\`# see what's been affected by changes
|
||||
nx affected:dep-graph
|
||||
|
||||
# run tests for current changes
|
||||
nx affected:test
|
||||
|
||||
# run e2e tests for current changes
|
||||
nx affected:e2e
|
||||
\`</pre
|
||||
>
|
||||
</details>
|
||||
</main>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 7.2 KiB After Width: | Height: | Size: 15 KiB |
Loading…
x
Reference in New Issue
Block a user