chore(nxdev): improve colours on website according to latest design (#6769)
This commit is contained in:
Miroslav Jonaš
GitHub
parent
17d8647818
commit
fce939636f
@ -156,7 +156,7 @@ function SidebarSectionItems({ item }: { item: MenuItem }) {
|
||||
)}
|
||||
>
|
||||
{isActiveLink ? (
|
||||
<span className="rounded-md absolute h-full w-1 -right-2 sm:-right-4 top-0 bg-green-nx-base" />
|
||||
<span className="rounded-md absolute h-full w-1 -right-2 sm:-right-4 top-0 bg-blue-nx-base" />
|
||||
) : null}
|
||||
<span
|
||||
className={cx('relative', {
|
||||
|
||||
@ -304,7 +304,7 @@
|
||||
|
||||
.DocSearch-Hits mark {
|
||||
background: none;
|
||||
color: theme('colors.purple.nx-base');
|
||||
color: theme('colors.blue.nx-dark');
|
||||
}
|
||||
|
||||
.DocSearch-Hit[aria-selected='true'] mark {
|
||||
|
||||
@ -77,7 +77,7 @@ export function Index() {
|
||||
|
||||
<div className="flex flex-wrap space-y-4 sm:space-y-0 sm:space-x-4 text-center">
|
||||
<Link href="/getting-started/intro">
|
||||
<a className="w-full sm:w-auto flex-none bg-purple-nx-base text-white text-lg leading-6 font-semibold py-3 px-6 border border-transparent rounded-md focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-purple-nx-base focus:outline-none transition-colors duration-180">
|
||||
<a className="w-full sm:w-auto flex-none bg-white text-blue-nx-dark text-lg leading-6 font-semibold py-3 px-6 border border-transparent rounded-md focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-nx-dark focus:outline-none transition-colors duration-180">
|
||||
Get Started
|
||||
</a>
|
||||
</Link>
|
||||
@ -111,13 +111,13 @@ export function Index() {
|
||||
</div>
|
||||
</div>
|
||||
{/* BANNER */}
|
||||
<div className="bg-green-nx-base">
|
||||
<div className="bg-blue-nx-dark">
|
||||
<div className="max-w-7xl mx-auto py-3 px-3 sm:px-6 lg:px-8">
|
||||
<div className="flex items-center flex-col sm:flex-row justify-between flex-wrap">
|
||||
<div className="flex-1 flex flex-row items-center">
|
||||
<span className="flex p-2 rounded-lg bg-green-nx-base sm:bg-white">
|
||||
<span className="flex p-2 rounded-lg bg-blue-nx-dark sm:bg-white">
|
||||
<svg
|
||||
className="h-6 w-6 text-white sm:text-green-nx-base"
|
||||
className="h-6 w-6 text-white sm:text-blue-nx-dark"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
@ -139,8 +139,22 @@ export function Index() {
|
||||
</div>
|
||||
<div className="w-full sm:w-auto pt-4 sm:pt-0">
|
||||
<Link href="/conf">
|
||||
<a className="flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-blue-nx-base bg-white">
|
||||
<a className="flex items-center justify-center px-4 py-2 border border-transparent group rounded-md text-md text-white font-extrabold">
|
||||
Learn more
|
||||
<span className="transform-gpu transition ease-out duration-200 group-hover:translate-x-2">
|
||||
<svg
|
||||
width="20"
|
||||
height="16"
|
||||
viewBox="-4 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M8.29289 3.29289C8.68342 2.90237 9.31658 2.90237 9.70711 3.29289L13.7071 7.29289C14.0976 7.68342 14.0976 8.31658 13.7071 8.70711L9.70711 12.7071C9.31658 13.0976 8.68342 13.0976 8.29289 12.7071C7.90237 12.3166 7.90237 11.6834 8.29289 11.2929L10.5858 9H3C2.44772 9 2 8.55228 2 8C2 7.44772 2.44772 7 3 7H10.5858L8.29289 4.70711C7.90237 4.31658 7.90237 3.68342 8.29289 3.29289Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
@ -158,7 +172,7 @@ export function Index() {
|
||||
<div className="mt-6 md:mt-24 mb-20 flex md:flex-row flex-col justify-center">
|
||||
<div className="w-full md:w-1/2 grid grid-cols-3 gap-4 sm:gap-10 items-center">
|
||||
<Link href="/react">
|
||||
<a className="w-full bg-white border border-gray-100 shadow-sm hover:shadow-md transition-all ease-out duration-180 rounded-md py-4 px-3 space-x-1 text-base tracking-tight font-bold leading-tight text-center flex flex-col justify-center items-center px-2 py-4 space-y-4">
|
||||
<a className="w-full bg-white border border-gray-100 shadow-sm hover:border-blue-nx-dark transition-all ease-out duration-180 rounded-md py-4 px-3 space-x-1 text-base tracking-tight font-bold leading-tight text-center flex flex-col justify-center items-center px-2 py-4 space-y-4">
|
||||
<svg viewBox="0 0 24 24" className="w-1/2" fill="#52C1DE">
|
||||
<path d="M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z" />
|
||||
</svg>
|
||||
@ -168,7 +182,7 @@ export function Index() {
|
||||
</a>
|
||||
</Link>
|
||||
<Link href="/angular">
|
||||
<a className="w-full bg-white border border-gray-100 shadow-sm hover:shadow-md transition-all ease-out duration-180 rounded-md py-4 px-3 space-x-1 text-base tracking-tight font-bold leading-tight text-center flex flex-col justify-center items-center px-2 py-4 space-y-4">
|
||||
<a className="w-full bg-white border border-gray-100 shadow-sm hover:border-blue-nx-dark transition-all ease-out duration-180 rounded-md py-4 px-3 space-x-1 text-base tracking-tight font-bold leading-tight text-center flex flex-col justify-center items-center px-2 py-4 space-y-4">
|
||||
<svg viewBox="0 0 24 24" className="w-1/2" fill="#E23236">
|
||||
<path d="M9.931 12.645h4.138l-2.07-4.908m0-7.737L.68 3.982l1.726 14.771L12 24l9.596-5.242L23.32 3.984 11.999.001zm7.064 18.31h-2.638l-1.422-3.503H8.996l-1.422 3.504h-2.64L12 2.65z" />
|
||||
</svg>
|
||||
@ -178,7 +192,7 @@ export function Index() {
|
||||
</a>
|
||||
</Link>
|
||||
<Link href="/node">
|
||||
<a className="w-full bg-white border border-gray-100 shadow-sm hover:shadow-md transition-all ease-out duration-180 rounded-md py-4 px-3 space-x-1 text-base tracking-tight font-bold leading-tight text-center flex flex-col justify-center items-center px-2 py-4 space-y-4">
|
||||
<a className="w-full bg-white border border-gray-100 shadow-sm hover:border-blue-nx-dark transition-all ease-out duration-180 rounded-md py-4 px-3 space-x-1 text-base tracking-tight font-bold leading-tight text-center flex flex-col justify-center items-center px-2 py-4 space-y-4">
|
||||
<svg viewBox="0 0 24 24" className="w-1/2" fill="#77AE64">
|
||||
<path d="M11.998,24c-0.321,0-0.641-0.084-0.922-0.247l-2.936-1.737c-0.438-0.245-0.224-0.332-0.08-0.383 c0.585-0.203,0.703-0.25,1.328-0.604c0.065-0.037,0.151-0.023,0.218,0.017l2.256,1.339c0.082,0.045,0.197,0.045,0.272,0l8.795-5.076 c0.082-0.047,0.134-0.141,0.134-0.238V6.921c0-0.099-0.053-0.192-0.137-0.242l-8.791-5.072c-0.081-0.047-0.189-0.047-0.271,0 L3.075,6.68C2.99,6.729,2.936,6.825,2.936,6.921v10.15c0,0.097,0.054,0.189,0.139,0.235l2.409,1.392 c1.307,0.654,2.108-0.116,2.108-0.89V7.787c0-0.142,0.114-0.253,0.256-0.253h1.115c0.139,0,0.255,0.112,0.255,0.253v10.021 c0,1.745-0.95,2.745-2.604,2.745c-0.508,0-0.909,0-2.026-0.551L2.28,18.675c-0.57-0.329-0.922-0.945-0.922-1.604V6.921 c0-0.659,0.353-1.275,0.922-1.603l8.795-5.082c0.557-0.315,1.296-0.315,1.848,0l8.794,5.082c0.57,0.329,0.924,0.944,0.924,1.603 v10.15c0,0.659-0.354,1.273-0.924,1.604l-8.794,5.078C12.643,23.916,12.324,24,11.998,24z M19.099,13.993 c0-1.9-1.284-2.406-3.987-2.763c-2.731-0.361-3.009-0.548-3.009-1.187c0-0.528,0.235-1.233,2.258-1.233 c1.807,0,2.473,0.389,2.747,1.607c0.024,0.115,0.129,0.199,0.247,0.199h1.141c0.071,0,0.138-0.031,0.186-0.081 c0.048-0.054,0.074-0.123,0.067-0.196c-0.177-2.098-1.571-3.076-4.388-3.076c-2.508,0-4.004,1.058-4.004,2.833 c0,1.925,1.488,2.457,3.895,2.695c2.88,0.282,3.103,0.703,3.103,1.269c0,0.983-0.789,1.402-2.642,1.402 c-2.327,0-2.839-0.584-3.011-1.742c-0.02-0.124-0.126-0.215-0.253-0.215h-1.137c-0.141,0-0.254,0.112-0.254,0.253 c0,1.482,0.806,3.248,4.655,3.248C17.501,17.007,19.099,15.91,19.099,13.993z" />
|
||||
</svg>
|
||||
@ -316,20 +330,19 @@ export function Index() {
|
||||
</div>
|
||||
</div>
|
||||
{/* NXCLOUD AD */}
|
||||
<div
|
||||
style={{ background: '#122B4D', border: '1px solid #0f2440' }}
|
||||
className="text-white my-16 md:my-32 rounded-xl"
|
||||
>
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:py-10 py-6 lg:px-8 lg:flex lg:items-center lg:justify-between relative">
|
||||
<h2 className="text-2xl tracking-tight sm:text-4xl">
|
||||
<span className="block">See how much more time</span>
|
||||
<span className="block">you can save with Nx Cloud.</span>
|
||||
<div className="text-white my-16 md:my-32 rounded-xl bg-blue-nx-dark border-blue-nx-dark">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-10 py-10 md:px-8 lg:flex lg:items-center lg:justify-between relative">
|
||||
<span className="absolute text-xs top-2 mt-3">Sponsor</span>
|
||||
<h2 className="text-2xl font-bold tracking-tight sm:text-2xl">
|
||||
<span className="block">
|
||||
See how much more time you can save with Nx Cloud.
|
||||
</span>
|
||||
</h2>
|
||||
<div className="mt-8 flex lg:mt-0 lg:flex-shrink-0">
|
||||
<div className="mt-4 flex lg:mt-0 lg:flex-shrink-0">
|
||||
<div className="inline-flex rounded-md shadow">
|
||||
<a
|
||||
href="https://nx.app/?utm_source=nx.dev"
|
||||
className="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-purple-nx-base"
|
||||
className="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-blue-nx-dark bg-white"
|
||||
>
|
||||
Learn About Nx Cloud
|
||||
</a>
|
||||
@ -459,9 +472,9 @@ export function Index() {
|
||||
Nx, you get a consistent dev experience regardless of the
|
||||
tools used.
|
||||
</p>
|
||||
<p className="md:text-lg mb-6">For instance:</p>
|
||||
<ul className="md:text-lg list-disc list-inside">
|
||||
<li className="mt-4">
|
||||
<p className="sm:text-lg mb-0">For instance:</p>
|
||||
<ul className="sm:text-lg list-disc list-inside mt-0">
|
||||
<li>
|
||||
Use{' '}
|
||||
<a
|
||||
className="underline pointer"
|
||||
@ -557,7 +570,7 @@ export function Index() {
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://egghead.io/courses/scale-react-development-with-nx-4038?utm_source=nx.dev"
|
||||
className="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-purple-nx-base"
|
||||
className="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-nx-dark"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Watch Nx Workspaces Course
|
||||
@ -573,7 +586,7 @@ export function Index() {
|
||||
{/*MORE*/}
|
||||
<div className="my-16 md:my-32 flex sm:flex-row flex-col">
|
||||
<div className="w-full sm:w-1/2 flex flex-col justify-center sm:pr-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
|
||||
<h3 className="text-xl leading-none tracking-tight mb-4">
|
||||
<h3 className="text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold tracking-tight mb-4">
|
||||
Nx and Nx Console
|
||||
</h3>
|
||||
<p className="sm:text-lg mb-6">
|
||||
@ -594,7 +607,7 @@ export function Index() {
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-full sm:w-1/2 flex flex-col justify-center sm:pl-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
|
||||
<h3 className="text-xl leading-none tracking-tight mb-4">
|
||||
<h3 className="text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold tracking-tight mb-4">
|
||||
Brought to you by the community
|
||||
</h3>
|
||||
<p className="sm:text-lg mb-6">
|
||||
|
||||
@ -125,7 +125,7 @@ export function Node() {
|
||||
viewBox="0 0 400 400"
|
||||
fill="currentColor"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="fill-current hidden md:block text-green-nx-base absolute -top-40 -left-72"
|
||||
className="fill-current hidden md:block text-blue-nx-dark absolute -top-40 -left-72"
|
||||
>
|
||||
<circle cx="200" cy="200" r="200" />
|
||||
</svg>
|
||||
@ -194,7 +194,7 @@ export function Node() {
|
||||
viewBox="0 0 400 400"
|
||||
fill="currentColor"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="fill-current hidden md:block text-green-nx-base absolute -top-20 -right-32"
|
||||
className="fill-current hidden md:block text-blue-nx-dark absolute -top-20 -right-32"
|
||||
>
|
||||
<circle cx="200" cy="200" r="200" />
|
||||
</svg>
|
||||
@ -435,6 +435,7 @@ export function Node() {
|
||||
className="underline pointer"
|
||||
href="https://www.typescriptlang.org/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
TypeScript
|
||||
</a>{' '}
|
||||
@ -446,6 +447,7 @@ export function Node() {
|
||||
className="underline pointer"
|
||||
href="https://jestjs.io/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Jest
|
||||
</a>{' '}
|
||||
@ -459,6 +461,7 @@ export function Node() {
|
||||
className="underline pointer"
|
||||
href="https://eslint.org/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
ESLint
|
||||
</a>{' '}
|
||||
@ -525,6 +528,7 @@ export function Node() {
|
||||
className="underline pointer"
|
||||
href="https://egghead.io/playlists/scale-react-development-with-nx-4038"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Free Nx Workspaces video course
|
||||
</a>
|
||||
@ -534,6 +538,7 @@ export function Node() {
|
||||
className="underline pointer"
|
||||
href="https://www.youtube.com/watch?v=h5FIGDn5YM0"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Nx Explainer: Dev Tools for Monorepos, In-Depth with
|
||||
Victor Savkin
|
||||
@ -544,6 +549,7 @@ export function Node() {
|
||||
className="underline pointer"
|
||||
href="https://go.nrwl.io/nx-office-hours"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Tune into regular Nx Office Hours livestreams
|
||||
</a>
|
||||
@ -553,6 +559,7 @@ export function Node() {
|
||||
className="underline pointer"
|
||||
href="https://nx.app"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Nx Cloud
|
||||
</a>
|
||||
@ -564,6 +571,7 @@ export function Node() {
|
||||
className="underline pointer"
|
||||
href="https://twitter.com/NxDevTools"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
follow Nx Dev Tools on Twitter
|
||||
</a>{' '}
|
||||
|
||||
@ -47,8 +47,6 @@ By default, Nx is going to cache `dist/packages/frontend`, `packages/frontend/di
|
||||
}
|
||||
```
|
||||
|
||||
Test2
|
||||
|
||||
## Options
|
||||
|
||||
### script (_**required**_)
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# affected
|
||||
|
||||
Run task for affected projects
|
||||
Run target for affected projects
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# print-affected
|
||||
|
||||
Graph execution plan
|
||||
Prints information about the projects and targets affected by changes
|
||||
|
||||
## Usage
|
||||
|
||||
@ -86,6 +86,8 @@ This is the name of the tasks runner configured in nx.json
|
||||
|
||||
### select
|
||||
|
||||
Select the subset of the returned json document (e.g., --selected=projects)
|
||||
|
||||
### skip-nx-cache
|
||||
|
||||
Default: `false`
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# run-many
|
||||
|
||||
Run task for multiple projects
|
||||
Run target for multiple listed projects
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
@ -174,7 +174,7 @@ You can select a configuration like this: `nx build myapp --configuration=produc
|
||||
|
||||
The following show how the builder options get constructed:
|
||||
|
||||
```bash
|
||||
```javascript
|
||||
require(`@nrwl/jest`).builders['jest']({...options, ...selectedConfiguration, ...commandLineArgs}}) // Pseudocode
|
||||
```
|
||||
|
||||
|
||||
@ -51,9 +51,9 @@ Any custom code that was present in Step 1 and 2 should be recreated now in the
|
||||
|
||||
**Step 5**
|
||||
|
||||
Modify `tsconfig.spec.ts` in the lib’s folder and add Jest typings: add jest under types and remove previous framework (e.g. jasmine)
|
||||
Modify `tsconfig.spec.json` in the lib’s folder and add Jest typings: add jest under types and remove previous framework (e.g. jasmine)
|
||||
|
||||
```bash
|
||||
```json
|
||||
"types": [ "jest", "node" ]
|
||||
```
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# Setup incremental builds for Angular applications
|
||||
|
||||
In this guide we’ll specifically look into which changes need to be made to enable [incremental builds](/angular/ci/incremental-builds) for Angular applications.
|
||||
In this guide we’ll specifically look into which changes need to be made to enable [incremental builds](/angular/ci/incremental-builds) for Angular applications. Please read the [incremental builds guide](/angular/ci/incremental-builds) to see if incremental builds are a good fit for you.
|
||||
|
||||
> Incremental builds requires Nx version 10.4.0 or later.
|
||||
|
||||
|
||||
@ -47,8 +47,6 @@ By default, Nx is going to cache `dist/packages/frontend`, `packages/frontend/di
|
||||
}
|
||||
```
|
||||
|
||||
Test2
|
||||
|
||||
## Options
|
||||
|
||||
### script (_**required**_)
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# affected
|
||||
|
||||
Run task for affected projects
|
||||
Run target for affected projects
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# print-affected
|
||||
|
||||
Graph execution plan
|
||||
Prints information about the projects and targets affected by changes
|
||||
|
||||
## Usage
|
||||
|
||||
@ -86,6 +86,8 @@ This is the name of the tasks runner configured in nx.json
|
||||
|
||||
### select
|
||||
|
||||
Select the subset of the returned json document (e.g., --selected=projects)
|
||||
|
||||
### skip-nx-cache
|
||||
|
||||
Default: `false`
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# run-many
|
||||
|
||||
Run task for multiple projects
|
||||
Run target for multiple listed projects
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
@ -40,4 +40,4 @@ Nx works especially well for [monorepos](/{{framework}}/core-concepts/why-monore
|
||||
- [Free Nx Course on YouTube](https://www.youtube.com/watch?time_continue=49&v=2mYLe9Kp9VM&feature=emb_logo)
|
||||
- [Nx CLI](/{{framework}}/getting-started/nx-cli)
|
||||
- [Configuration Files](/{{framework}}/core-concepts/configuration)
|
||||
- [Mental Model](/{{framework}}/core-concepts/mental-model
|
||||
- [Mental Model](/{{framework}}/core-concepts/mental-model)
|
||||
|
||||
@ -47,8 +47,6 @@ By default, Nx is going to cache `dist/packages/frontend`, `packages/frontend/di
|
||||
}
|
||||
```
|
||||
|
||||
Test2
|
||||
|
||||
## Options
|
||||
|
||||
### script (_**required**_)
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# affected
|
||||
|
||||
Run task for affected projects
|
||||
Run target for affected projects
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# print-affected
|
||||
|
||||
Graph execution plan
|
||||
Prints information about the projects and targets affected by changes
|
||||
|
||||
## Usage
|
||||
|
||||
@ -86,6 +86,8 @@ This is the name of the tasks runner configured in nx.json
|
||||
|
||||
### select
|
||||
|
||||
Select the subset of the returned json document (e.g., --selected=projects)
|
||||
|
||||
### skip-nx-cache
|
||||
|
||||
Default: `false`
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# run-many
|
||||
|
||||
Run task for multiple projects
|
||||
Run target for multiple listed projects
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
@ -31,7 +31,7 @@ Read more about [Publishable and Buildable Nx Libraries here.](/{{framework}}/st
|
||||
|
||||
## Nx computation cache and Nx Cloud
|
||||
|
||||
In an incremental build scenario, when building the app, all it's dependencies need to be built first. In our scenario above, that means we need to first run `nx build mylib` and then `nx build myapp`. As the number of libraries grows, running these commands quickly becomes unmanageable. Instead, we can run `nx build myapp --with-deps`.
|
||||
In an incremental build scenario, when building the app, all it's dependencies need to be built first. In our scenario above, that means we need to first run `nx build mylib` and then `nx build myapp`. As the number of libraries grows, running these commands quickly becomes unmanageable. Instead, we can run `nx build myapp`.
|
||||
|
||||
It is costly to rebuild all the buildable libraries from scratch every time you want to serve the app. That's why the Nx computation caching is so important. The caching allows us to only rebuild a small subset of the libraries, which results in much better performance.
|
||||
|
||||
@ -49,12 +49,31 @@ The above chart has three different test runs:
|
||||
|
||||
## When should I use incremental builds
|
||||
|
||||
We're continuously improving the speed of incremental builds. However as of now, incremental builds become really beneficial in **really large repositories**.
|
||||
Whether incremental builds area a good choice depends on your repository. For most small and mid-sized applications, the costs introduced by incremental builds will outweigh the benefits.
|
||||
|
||||
Also, using incremental builds only really makes sense when using the distributed Nx caching with Nx Cloud. Check out [nx.app](https://nx.app) for more information on how to setup distributed caching.
|
||||
The upsides of incremental builds:
|
||||
|
||||
## Setup an incremental build
|
||||
- Compiling only a subset of code
|
||||
- Distributing the compilation
|
||||
|
||||
- [Setup an incremental build for an Angular app](/latest/angular/ci/setup-incremental-builds-angular)
|
||||
- _Setup an incremental build for a React app (soon)_
|
||||
- _Setup an incremental build for a Node app (soon)_
|
||||
The downsides of incremental builds:
|
||||
|
||||
- Complex "watch" mode
|
||||
- Overhead with initializing the TypeScript compiler multiple times
|
||||
- The linking part of a WebPack build is indivisible
|
||||
|
||||
If you are only planning to use incremental builds to speed up your CI, then the watch mode concern is irrelevant, and the only thing you need to assess is whether the benefits of skipping the compilation outweigh the costs of initializing the TypeScript compiler several times.
|
||||
|
||||
> For a given workspace you can use Nx batch mode executors to compile all the libs using a single TS program. It can be made to work for a single workspace, but it's hard to generalize. With this, there is only one TS program created, so there is no extra cost associated with incremental builds.
|
||||
|
||||
## Custom Serve Target
|
||||
|
||||
If you are implementing a custom serve command, you can use `WebpackNxBuildCoordinationPlugin` provided by `@nrwl/web`. It's a webpack plugin you can use to coordinate the compiling of the libs and the webpack linking.
|
||||
|
||||
## Using Webpack Module Federation to implement incremental builds
|
||||
|
||||
When we talk about incremental builds we often talk about incrementally compiling the code and then linking them with a single webpack build. In this case the build artifact when using incremental builds is the same as without using incremental builds, but the build process itself has different characteristics.
|
||||
|
||||
But there are other ways to make the build process incremental. One of them is using WebPack Module Federation.
|
||||
|
||||
When using WebPack Module Federation, you split the application into multiple webpack builds. Imagine the application has 3 big sections, and they are built using 3 webpack builds: `W1`, `W2`, and `W3`. Each of them has to build shared code in addition to building the corresponding application section code. So the time it takes to build all of them (`W1` + `W2` + `W3`) will be greater than `W`. However, if you change only Section 1, you will only need to run `W1`. `W2` and `W3` will be retrieved from cache. In addition, `W1`, `W2`, and `W3` can run on separate machines. Because of that, both the CI time and the local serve time can be drastically reduced.
|
||||
|
||||
@ -11,13 +11,11 @@ module.exports = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
black: 'hsla(0, 0%, 13%, 1)',
|
||||
blue: {
|
||||
'nx-dark': 'hsla(214, 61%, 11%, 1)',
|
||||
'nx-base': 'hsla(214, 62%, 21%, 1)',
|
||||
},
|
||||
purple: {
|
||||
'nx-base': 'hsla(258, 76%, 62%, 1)',
|
||||
},
|
||||
green: {
|
||||
'nx-base': 'hsla(162, 47%, 50%, 1)',
|
||||
},
|
||||
|
||||
@ -86,14 +86,14 @@ export function FeatureList() {
|
||||
{data.map((tile) => (
|
||||
<div key={tile.link} className="p-4 lg:w-1/3 md:w-1/2 w-full">
|
||||
<Link href={tile.link}>
|
||||
<div className="h-full px-4 py-8 rounded-lg border border-gray-50 shadow flex flex-col relative overflow-hidden cursor-pointer group hover:bg-purple-nx-base hover:text-white transition">
|
||||
<h2 className="text-center text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold tracking-tight mb-4 relative text-purple-nx-base group-hover:text-white">
|
||||
<div className="h-full px-4 py-8 rounded-lg border border-gray-50 shadow flex flex-col relative overflow-hidden cursor-pointer group hover:border-blue-nx-dark transition">
|
||||
<h2 className="text-center text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold tracking-tight mb-4 relative text-blue-nx-dark">
|
||||
{tile.icon}
|
||||
{tile.title}
|
||||
</h2>
|
||||
{tile.items.map((item, index) => (
|
||||
<p key={index} className="flex items-start mt-4">
|
||||
<span className="w-4 h-4 mr-2 mt-1 inline-flex items-center justify-center text-purple-nx-base group-hover:text-white">
|
||||
<span className="w-4 h-4 mr-2 mt-1 inline-flex items-center justify-center text-blue-nx-dark">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="h-6 w-6"
|
||||
|
||||
@ -16,7 +16,7 @@ export function Footer({ useDarkBackground }: FooterProps) {
|
||||
{/*FOOTER LINKS*/}
|
||||
<div className="my-12 flex sm:flex-row flex-col items-start text-center sm:text-left">
|
||||
<div className="w-full sm:w-1/3 flex flex-col p-6 mt-8 sm:mt-0">
|
||||
<h3 className="text-xl leading-none tracking-tight mb-4">
|
||||
<h3 className="text-lg font-extrabold leading-none tracking-tight mb-4">
|
||||
Resources
|
||||
</h3>
|
||||
<ul>
|
||||
@ -42,7 +42,9 @@ export function Footer({ useDarkBackground }: FooterProps) {
|
||||
</ul>
|
||||
</div>
|
||||
<div className="w-full sm:w-1/3 flex flex-col p-6 mt-8 sm:mt-0">
|
||||
<h3 className="text-xl leading-none tracking-tight mb-4">Help</h3>
|
||||
<h3 className="text-lg font-extrabold leading-none tracking-tight mb-4">
|
||||
Help
|
||||
</h3>
|
||||
<ul>
|
||||
<li className="mb-2">
|
||||
<Link href={`/getting-started/intro`}>
|
||||
@ -77,7 +79,7 @@ export function Footer({ useDarkBackground }: FooterProps) {
|
||||
</ul>
|
||||
</div>
|
||||
<div className="w-full sm:w-1/3 flex flex-col p-6 mt-8 sm:mt-0">
|
||||
<h3 className="text-xl leading-none tracking-tight mb-4">
|
||||
<h3 className="text-lg font-extrabold leading-none tracking-tight mb-4">
|
||||
Community
|
||||
</h3>
|
||||
<ul>
|
||||
|
||||
@ -37,7 +37,7 @@ export function InlineCommand({
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className="sm:max-w-full w-full text-sm flex-none bg-white text-gray-400 hover:text-gray-900 font-input-mono leading-6 py-1 sm:px-3 border border-gray-200 rounded-md flex items-center justify-center space-x-2 sm:space-x-4 focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-gray-300 focus:outline-none transition-colors duration-180"
|
||||
className="sm:max-w-full w-full text-sm flex-none bg-white text-gray-400 hover:text-gray-900 font-input-mono leading-6 py-1 sm:px-3 border border-blue-nx-dark rounded-md flex items-center justify-center space-x-2 sm:space-x-4 focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-gray-300 focus:outline-none transition-colors duration-180"
|
||||
>
|
||||
<span className="overflow-auto flex items-center text-gray-900">
|
||||
<span className="hidden sm:inline text-gray-500" aria-hidden="true">
|
||||
@ -48,7 +48,6 @@ export function InlineCommand({
|
||||
useInlineStyles={false}
|
||||
language={language}
|
||||
children={command}
|
||||
style={'padding: 0;'}
|
||||
/>
|
||||
</span>
|
||||
<svg width="24" height="24" fill="none" stroke="currentColor">
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
export function NxUsersShowcase() {
|
||||
return (
|
||||
<div className="max-w-screen-lg mx-auto px-5 py-32">
|
||||
<p className="sm:mx-auto sm:text-lg">Join the ecosystem of Nx users</p>
|
||||
<h2 className="text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold tracking-tight mb-4">
|
||||
Join the ecosystem of Nx users
|
||||
</h2>
|
||||
<div className="mt-12 grid items-center justify-items-center grid-cols-1 sm:grid-cols-3 md:grid-cols-6 gap-12 text-gray-500">
|
||||
<svg width="160" height="88" viewBox="0 0 160 88" fill="currentColor">
|
||||
<path d="M90.9947 24.3067L98.6787 27.3333L90.9947 30.1947V34.2827L104.155 28.9693V25.7L90.9947 20.3867V24.3067Z" />
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user