586 lines
32 KiB
TypeScript
586 lines
32 KiB
TypeScript
import React from 'react';
|
||
import { useRouter } from 'next/router';
|
||
import Image from 'next/image';
|
||
import Link from 'next/link';
|
||
import {
|
||
Footer,
|
||
Header,
|
||
InlineCommand,
|
||
NxUsersShowcase,
|
||
} from '@nrwl/nx-dev/ui/common';
|
||
import { sendCustomEvent } from '@nrwl/nx-dev/feature-analytics';
|
||
import { useStorage } from '../lib/use-storage';
|
||
import Head from 'next/head';
|
||
|
||
export function Node() {
|
||
const sectionItemList = [
|
||
{
|
||
title: 'Create Nx Plugins',
|
||
content: [
|
||
'Extend the power of Nx with your own custom built plugin that uses',
|
||
'[@nrwl/devkit](https://www.npmjs.com/package/@nrwl/devkit) and',
|
||
'[@nrwl/node](https://www.npmjs.com/package/@nrwl/node) or the',
|
||
'[@nrwl/nx-plugin](https://www.npmjs.com/package/@nrwl/nx-plugin).',
|
||
].join(' '),
|
||
},
|
||
{
|
||
title: 'Build APIs',
|
||
content: [
|
||
'Use the many API frameworks that are available for Node,',
|
||
' or use the ones provided by Nx for Express and Nest.',
|
||
].join(' '),
|
||
},
|
||
{
|
||
title: 'Open Source Tool',
|
||
content: [
|
||
'Create a workspace that puts emphasis on packages rather than',
|
||
'libs and apps by using the "npm" preset with "create-nx-workspace".\n\n',
|
||
'Use TypeScript to build out projects that can scale infinitely.',
|
||
].join(' '),
|
||
},
|
||
{
|
||
title: 'Nx Uses Computation Caching',
|
||
content: [
|
||
'Computation caching is a valuable way to improve performance.',
|
||
'Computing (tests, arguments, operations, etc.) is expensive and',
|
||
'time-consuming, but computation caching means you never have to rebuild',
|
||
'the same code.\n\n',
|
||
'WebPack, Jest, and TypeScript all perform computation caching.',
|
||
'Nx builds on inspiration from Bazel and similar tools, and implements',
|
||
'distributed computation caching in a way that works with any tool and',
|
||
'requires no configuration. The result is much faster builds and ',
|
||
'continuous integration.\n\n',
|
||
'In addition, when connected to Nx Cloud, you can share the computation',
|
||
'cache with everyone working on the same project.',
|
||
].join(' '),
|
||
},
|
||
];
|
||
const router = useRouter();
|
||
|
||
const { value: storedFlavor } = useStorage('flavor');
|
||
const { value: storedVersion } = useStorage('version');
|
||
|
||
return (
|
||
<>
|
||
<Head>
|
||
<title>Nx and Node</title>
|
||
<meta
|
||
name="description"
|
||
content="Nx is a smart and extensible build framework to help you develop, test, build, and scale Node applications."
|
||
/>
|
||
<meta name="twitter:title" content="Nx and Node" />
|
||
<meta
|
||
name="twitter:description"
|
||
content="Nx is a smart and extensible build framework to help you develop, test, build, and scale Node applications."
|
||
/>
|
||
<meta
|
||
name="twitter:image"
|
||
content="https://nx.dev/images/nx-media.jpg"
|
||
/>
|
||
<meta
|
||
name="twitter:image:alt"
|
||
content="Nx: Smart, Extensible Build Framework"
|
||
/>
|
||
<meta property="og:url" content="https://nx.dev/node" />
|
||
<meta
|
||
property="og:description"
|
||
content="Nx is a smart and extensible build framework to help you develop, test, build, and scale Node applications."
|
||
/>
|
||
<meta property="og:title" content="Nx and Node" />
|
||
<meta
|
||
property="og:image"
|
||
content="https://nx.dev/images/nx-media.jpg"
|
||
/>
|
||
<meta property="og:image:width" content="800" />
|
||
<meta property="og:image:height" content="400" />
|
||
</Head>
|
||
<Header
|
||
useDarkBackground={false}
|
||
showSearch={false}
|
||
flavor={{
|
||
name: storedFlavor || 'node',
|
||
value: storedFlavor || 'node',
|
||
}}
|
||
version={{
|
||
name: storedVersion || 'Latest',
|
||
value: storedVersion || 'latest',
|
||
}}
|
||
/>
|
||
<main>
|
||
<div className="w-full overflow-hidden">
|
||
{/*Intro component*/}
|
||
<div className="bg-blue-nx-dark text-white">
|
||
<div
|
||
className="max-w-screen-lg xl:max-w-screen-xl mx-auto px-5 py-5"
|
||
style={{
|
||
background:
|
||
'url(/images/cubes-top-1.png) no-repeat top center / contain',
|
||
}}
|
||
>
|
||
<div className="mt-72 flex sm:flex-row flex-col">
|
||
<div className="w-full sm:w-1/2 lg:w-2/5 flex flex-col items-start sm:pb-0 pb-10 mt-8 sm:mt-0 relative">
|
||
<svg
|
||
width="500"
|
||
height="500"
|
||
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"
|
||
>
|
||
<circle cx="200" cy="200" r="200" />
|
||
</svg>
|
||
<h2 className="text-3xl sm:text-3xl lg:text-5xl leading-none font-extrabold tracking-tight mb-4 z-10">
|
||
Nx and Node
|
||
</h2>
|
||
<div className="hidden sm:block pt-4">
|
||
<Image
|
||
src="/images/cubes-left-1.png"
|
||
width={488}
|
||
height={300}
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="w-full sm:w-1/2 lg:w-3/5 flex flex-col items-start sm:pl-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
|
||
<h3 className="text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold tracking-tight mb-4">
|
||
The power and scalability of Node has helped pave the way
|
||
for increasingly complex and sophisticated applications.
|
||
</h3>
|
||
<p className="sm:text-lg mb-6">
|
||
Using Typescript in Node applications helps dev teams code
|
||
more consistently, avoid compatibility issues, and it can be
|
||
used to build libraries for NPM. Unfortunately, the setup is
|
||
often tedious and time consuming, and any mistakes in your
|
||
configuration can grind your work to a halt.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/*What is Nx*/}
|
||
<div className="max-w-screen-lg xl:max-w-screen-xl mx-auto px-5 py-5">
|
||
<div className="my-32 flex sm:flex-row flex-col justify-center">
|
||
<div className="w-full sm:w-1/2 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
|
||
<h3 className="text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold tracking-tight mb-4">
|
||
Nx is a smart and extensible build framework that helps you
|
||
develop, test, build, and scale Node applications.
|
||
</h3>
|
||
<p className="sm:text-lg mb-6">
|
||
Nx is a set of tools that provides a standardized and
|
||
integrated development experience for all of your Node
|
||
workspaces. It takes care of things like Typescript
|
||
configuration and library sharing, so you can focus on
|
||
other, more interesting development tasks. In addition, Nx
|
||
provides...
|
||
</p>
|
||
<ul className="sm:text-lg list-disc list-inside">
|
||
<li>API creation using Express and Nest</li>
|
||
<li className="mt-4">Better linting</li>
|
||
<li className="mt-4">Better testing</li>
|
||
<li className="mt-4">
|
||
Support for popular community tools and frameworks
|
||
</li>
|
||
<li className="mt-4">
|
||
Nx’s own devkit for building plugins
|
||
</li>
|
||
<li className="mt-4">
|
||
And other Nx-specific features including dependency
|
||
graphs, code generation, and computation caching
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div className="w-full sm:w-1/2 flex flex-col justify-between items-start sm:pl-16 sm:pb-0 pb-10 mt-8 sm:mt-0 relative">
|
||
<svg
|
||
width="400"
|
||
height="400"
|
||
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"
|
||
>
|
||
<circle cx="200" cy="200" r="200" />
|
||
</svg>
|
||
<div className="hidden sm:block pt-4">
|
||
<Image
|
||
src="/images/cubes-right-1.png"
|
||
width={488}
|
||
height={300}
|
||
/>
|
||
</div>
|
||
{/*<iframe*/}
|
||
{/* width="560"*/}
|
||
{/* height="315"*/}
|
||
{/* src="https://www.youtube.com/embed/iIh5h_G52kI"*/}
|
||
{/* title="YouTube video player"*/}
|
||
{/* frameBorder="0"*/}
|
||
{/* allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"*/}
|
||
{/* allowFullScreen*/}
|
||
{/* className="w-full"*/}
|
||
{/*/>*/}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/*Call out*/}
|
||
<div className="bg-blue-nx-base text-white">
|
||
<div className="max-w-screen-lg xl:max-w-screen-xl mx-auto px-5 py-5">
|
||
<div className="flex sm:flex-row flex-col justify-center py-16">
|
||
<div className="sm:w-1/2 sm:flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0 relative">
|
||
<div className="hidden sm:block absolute -top-40">
|
||
<Image
|
||
src="/images/cubes-left-2.png"
|
||
width={310}
|
||
height={240}
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="w-full sm:w-1/2 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
|
||
<p className="sm:text-lg mb-4 underline">
|
||
Get started right away by creating a modern Node workspace
|
||
with Nx, or learn more about the benefits Nx provides when
|
||
building Node applications.
|
||
</p>
|
||
<div className="inline-flex rounded-md shadow">
|
||
<Link href="/latest/node/getting-started/intro">
|
||
<a className="inline-flex items-center justify-center px-5 py-2 border border-transparent text-base font-medium rounded-md text-gray-700 bg-white">
|
||
Nx Node Doc
|
||
</a>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="max-w-screen-lg xl:max-w-screen-xl mx-auto px-5 py-5">
|
||
{/*How to use Nx*/}
|
||
<div className="mt-32 flex sm:flex-row flex-col justify-center">
|
||
<div className="w-full sm:w-1/2 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
|
||
<h3 className="text-2xl sm:text-2xl lg:text-3xl leading-none font-extrabold text-gray-900 tracking-tight mb-4">
|
||
Create a Node Workspace <br />
|
||
with Nx Nest or Express
|
||
</h3>
|
||
</div>
|
||
<div className="w-full sm:w-1/2 flex flex-col justify-between items-start sm:pl-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
|
||
<p className="sm:text-lg mb-6">
|
||
Get started right away by creating a new Node workspace. If
|
||
you’re using Nest run the following command in your Terminal
|
||
or Command prompt:
|
||
</p>
|
||
|
||
<div className="w-full">
|
||
<InlineCommand
|
||
language={'bash'}
|
||
command={'npx create-nx-workspace --preset=nest'}
|
||
callback={() =>
|
||
sendCustomEvent('code-snippets', 'click', router.pathname)
|
||
}
|
||
/>
|
||
</div>
|
||
|
||
<p className="sm:text-lg my-6">
|
||
For Express users, the command will be:
|
||
</p>
|
||
|
||
<div className="w-full">
|
||
<InlineCommand
|
||
language={'bash'}
|
||
command={'npx create-nx-workspace --preset=express'}
|
||
callback={() =>
|
||
sendCustomEvent('code-snippets', 'click', router.pathname)
|
||
}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/*More info*/}
|
||
<div
|
||
className="mt-16 mb-32 flex sm:flex-row flex-col items-center justify-center p-8 bg-blue-nx-base text-white"
|
||
style={{
|
||
background:
|
||
'linear-gradient(90deg, hsla(0, 0%, 100%, 1) 10%, hsla(214, 62%, 21%, 1) 10%)',
|
||
}}
|
||
>
|
||
<div className="w-full sm:w-1/2 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
|
||
<iframe
|
||
width="560"
|
||
height="315"
|
||
src="https://www.youtube.com/embed/UcBSBQYNlhE"
|
||
title="YouTube video player"
|
||
frameBorder="0"
|
||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||
allowFullScreen
|
||
className="w-full"
|
||
/>
|
||
</div>
|
||
<div className="w-full sm:w-1/2 flex flex-col justify-between items-start sm:pl-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
|
||
<p className="sm:text-lg mb-6">
|
||
Once you’ve created your Node workspace, follow the steps in
|
||
this tutorial to learn how to add testing, share code, view
|
||
dependency graphs, and much, much more.
|
||
</p>
|
||
<div className="inline-flex">
|
||
<Link href="/latest/node/tutorial/01-create-application">
|
||
<a className="inline-flex items-center font-bold group">
|
||
<span className="group-hover:underline">
|
||
Nx Node App Tutorial
|
||
</span>
|
||
<svg
|
||
className="ml-1 h-5 w-5 transform-gpu transition ease-out duration-200 group-hover:translate-x-2 "
|
||
fill="none"
|
||
viewBox="0 0 24 24"
|
||
stroke="currentColor"
|
||
>
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M13 7l5 5m0 0l-5 5m5-5H6"
|
||
/>
|
||
</svg>
|
||
</a>
|
||
</Link>
|
||
</div>
|
||
<p className="italic sm:text-lg my-6">
|
||
If you want to add Nx to an existing Node project,{' '}
|
||
<Link href="/latest/node/migration/adding-to-monorepo">
|
||
<a className="underline pointer">check out this guide</a>
|
||
</Link>
|
||
.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/*VIDEO*/}
|
||
<div className="bg-blue-nx-base text-white">
|
||
<div className="max-w-screen-lg xl:max-w-screen-xl mx-auto px-5 py-5">
|
||
<div className="py-32 w-full flex justify-center">
|
||
<iframe
|
||
width="760"
|
||
height="440"
|
||
src="https://www.youtube.com/embed/iIh5h_G52kI"
|
||
frameBorder="0"
|
||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||
allowFullScreen
|
||
className="w-max-full mb-8"
|
||
style={{ boxShadow: '-48px 48px 0 0 hsla(162, 47%, 50%, 1)' }}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="max-w-screen-lg xl:max-w-screen-xl mx-auto px-5 py-5">
|
||
{/*Nx technology*/}
|
||
<div className="py-32 flex sm:flex-row flex-col items-center justify-center">
|
||
<div className="w-full sm:w-2/5 flex flex-col justify-between items-center sm:pb-0 pb-10 mt-8 sm:mt-0">
|
||
<div className="grid grid-cols-6 sm:grid-cols-2 md:grid-cols-3 gap-16 lg:gap-24">
|
||
<svg
|
||
id="jest-logo"
|
||
className="w-full opacity-25"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
role="img"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path d="M22.251 11.82a3.117 3.117 0 0 0-2.328-3.01L22.911 0H8.104L11.1 8.838a3.116 3.116 0 0 0-2.244 2.988c0 1.043.52 1.967 1.313 2.536a8.279 8.279 0 0 1-1.084 1.244 8.14 8.14 0 0 1-2.55 1.647c-.834-.563-1.195-1.556-.869-2.446a3.11 3.11 0 0 0-.91-6.08 3.117 3.117 0 0 0-3.113 3.113c0 .848.347 1.626.903 2.182-.048.097-.097.195-.146.299-.465.959-.993 2.043-1.195 3.259-.403 2.432.257 4.384 1.849 5.489A5.093 5.093 0 0 0 5.999 24c1.827 0 3.682-.917 5.475-1.807 1.279-.632 2.599-1.292 3.898-1.612.48-.118.98-.187 1.508-.264 1.07-.153 2.175-.312 3.168-.89a4.482 4.482 0 0 0 2.182-3.091c.174-.994 0-1.994-.444-2.87.298-.48.465-1.042.465-1.647zm-1.355 0c0 .965-.785 1.75-1.75 1.75a1.753 1.753 0 0 1-1.085-3.126l.007-.007c.056-.042.118-.084.18-.125 0 0 .008 0 .008-.007.028-.014.055-.035.083-.05.007 0 .014-.006.021-.006.028-.014.063-.028.097-.042.035-.014.07-.027.098-.041.007 0 .013-.007.02-.007.028-.007.056-.021.084-.028.007 0 .02-.007.028-.007.034-.007.062-.014.097-.02h.007l.104-.022c.007 0 .02 0 .028-.007.028 0 .055-.007.083-.007h.035c.035 0 .07-.007.111-.007h.09c.028 0 .05 0 .077.007h.014c.055.007.111.014.167.028a1.766 1.766 0 0 1 1.396 1.723zM10.043 1.39h10.93l-2.509 7.4c-.104.02-.208.055-.312.09l-2.64-5.385-2.648 5.35c-.104-.034-.216-.055-.327-.076l-2.494-7.38zm4.968 9.825a3.083 3.083 0 0 0-.938-1.668l1.438-2.904 1.452 2.967c-.43.43-.743.98-.868 1.605H15.01zm-3.481-1.098c.034-.007.062-.014.097-.02h.02c.029-.008.056-.008.084-.015h.028c.028 0 .049-.007.076-.007h.271c.028 0 .049.007.07.007.014 0 .02 0 .035.007.027.007.048.007.076.014.007 0 .014 0 .028.007l.097.02h.007c.028.008.056.015.083.029.007 0 .014.007.028.007.021.007.049.014.07.027.007 0 .014.007.02.007.028.014.056.021.084.035h.007a.374.374 0 0 1 .09.049h.007c.028.014.056.034.084.048.007 0 .007.007.013.007.028.014.05.035.077.049l.007.007c.083.062.16.132.236.201l.007.007a1.747 1.747 0 0 1 .48 1.209 1.752 1.752 0 0 1-3.502 0 1.742 1.742 0 0 1 1.32-1.695zm-6.838-.049c.966 0 1.751.786 1.751 1.751s-.785 1.751-1.75 1.751-1.752-.785-1.752-1.75.786-1.752 1.751-1.752zm16.163 6.025a3.07 3.07 0 0 1-1.508 2.133c-.758.438-1.689.577-2.669.716a17.29 17.29 0 0 0-1.64.291c-1.445.355-2.834 1.05-4.182 1.717-1.724.854-3.35 1.66-4.857 1.66a3.645 3.645 0 0 1-2.154-.688c-1.529-1.056-1.453-3.036-1.272-4.12.167-1.015.632-1.966 1.077-2.877.028-.055.049-.104.077-.16.152.056.312.098.479.126-.264 1.473.486 2.994 1.946 3.745l.264.139.284-.104c1.216-.431 2.342-1.133 3.336-2.071a9.334 9.334 0 0 0 1.445-1.716c.16.027.32.034.48.034a3.117 3.117 0 0 0 3.008-2.327h1.167a3.109 3.109 0 0 0 3.01 2.327c.576 0 1.11-.16 1.57-.43.18.52.236 1.063.139 1.605z" />
|
||
</svg>
|
||
<svg
|
||
id="express-logo"
|
||
className="w-full opacity-25"
|
||
role="img"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path d="M24 18.588a1.529 1.529 0 01-1.895-.72l-3.45-4.771-.5-.667-4.003 5.444a1.466 1.466 0 01-1.802.708l5.158-6.92-4.798-6.251a1.595 1.595 0 011.9.666l3.576 4.83 3.596-4.81a1.435 1.435 0 011.788-.668L21.708 7.9l-2.522 3.283a.666.666 0 000 .994l4.804 6.412zM.002 11.576l.42-2.075c1.154-4.103 5.858-5.81 9.094-3.27 1.895 1.489 2.368 3.597 2.275 5.973H1.116C.943 16.447 4.005 19.009 7.92 17.7a4.078 4.078 0 002.582-2.876c.207-.666.548-.78 1.174-.588a5.417 5.417 0 01-2.589 3.957 6.272 6.272 0 01-7.306-.933 6.575 6.575 0 01-1.64-3.858c0-.235-.08-.455-.134-.666A88.33 88.33 0 010 11.577zm1.127-.286h9.654c-.06-3.076-2.001-5.258-4.59-5.278-2.882-.04-4.944 2.094-5.071 5.264z" />
|
||
</svg>
|
||
<svg
|
||
id="eslint-logo"
|
||
className="w-full opacity-25"
|
||
role="img"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path d="M7.257 9.132L11.816 6.5a.369.369 0 0 1 .368 0l4.559 2.632a.369.369 0 0 1 .184.32v5.263a.37.37 0 0 1-.184.319l-4.559 2.632a.369.369 0 0 1-.368 0l-4.559-2.632a.369.369 0 0 1-.184-.32V9.452a.37.37 0 0 1 .184-.32M23.852 11.53l-5.446-9.475c-.198-.343-.564-.596-.96-.596H6.555c-.396 0-.762.253-.96.596L.149 11.509a1.127 1.127 0 0 0 0 1.117l5.447 9.398c.197.342.563.517.959.517h10.893c.395 0 .76-.17.959-.512l5.446-9.413a1.069 1.069 0 0 0 0-1.086m-4.51 4.556a.4.4 0 0 1-.204.338L12.2 20.426a.395.395 0 0 1-.392 0l-6.943-4.002a.4.4 0 0 1-.205-.338V8.08c0-.14.083-.269.204-.338L11.8 3.74c.12-.07.272-.07.392 0l6.943 4.003a.4.4 0 0 1 .206.338z" />
|
||
</svg>
|
||
<svg
|
||
id="typescript-logo"
|
||
className="w-full opacity-25"
|
||
role="img"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path d="M1.125 0C.502 0 0 .502 0 1.125v21.75C0 23.498.502 24 1.125 24h21.75c.623 0 1.125-.502 1.125-1.125V1.125C24 .502 23.498 0 22.875 0zm17.363 9.75c.612 0 1.154.037 1.627.111a6.38 6.38 0 0 1 1.306.34v2.458a3.95 3.95 0 0 0-.643-.361 5.093 5.093 0 0 0-.717-.26 5.453 5.453 0 0 0-1.426-.2c-.3 0-.573.028-.819.086a2.1 2.1 0 0 0-.623.242c-.17.104-.3.229-.393.374a.888.888 0 0 0-.14.49c0 .196.053.373.156.529.104.156.252.304.443.444s.423.276.696.41c.273.135.582.274.926.416.47.197.892.407 1.266.628.374.222.695.473.963.753.268.279.472.598.614.957.142.359.214.776.214 1.253 0 .657-.125 1.21-.373 1.656a3.033 3.033 0 0 1-1.012 1.085 4.38 4.38 0 0 1-1.487.596c-.566.12-1.163.18-1.79.18a9.916 9.916 0 0 1-1.84-.164 5.544 5.544 0 0 1-1.512-.493v-2.63a5.033 5.033 0 0 0 3.237 1.2c.333 0 .624-.03.872-.09.249-.06.456-.144.623-.25.166-.108.29-.234.373-.38a1.023 1.023 0 0 0-.074-1.089 2.12 2.12 0 0 0-.537-.5 5.597 5.597 0 0 0-.807-.444 27.72 27.72 0 0 0-1.007-.436c-.918-.383-1.602-.852-2.053-1.405-.45-.553-.676-1.222-.676-2.005 0-.614.123-1.141.369-1.582.246-.441.58-.804 1.004-1.089a4.494 4.494 0 0 1 1.47-.629 7.536 7.536 0 0 1 1.77-.201zm-15.113.188h9.563v2.166H9.506v9.646H6.789v-9.646H3.375z" />
|
||
</svg>
|
||
<svg
|
||
id="visualstudiocode-logo"
|
||
className="w-full opacity-25"
|
||
role="img"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path d="M23.15 2.587L18.21.21a1.494 1.494 0 0 0-1.705.29l-9.46 8.63-4.12-3.128a.999.999 0 0 0-1.276.057L.327 7.261A1 1 0 0 0 .326 8.74L3.899 12 .326 15.26a1 1 0 0 0 .001 1.479L1.65 17.94a.999.999 0 0 0 1.276.057l4.12-3.128 9.46 8.63a1.492 1.492 0 0 0 1.704.29l4.942-2.377A1.5 1.5 0 0 0 24 20.06V3.939a1.5 1.5 0 0 0-.85-1.352zm-5.146 14.861L10.826 12l7.178-5.448v10.896z" />
|
||
</svg>
|
||
<svg
|
||
id="prettier-logo"
|
||
className="w-full opacity-25"
|
||
role="img"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path d="M8.571 23.429A.571.571 0 0 1 8 24H2.286a.571.571 0 0 1 0-1.143H8c.316 0 .571.256.571.572zM8 20.57H6.857a.571.571 0 0 0 0 1.143H8a.571.571 0 0 0 0-1.143zm-5.714 1.143H4.57a.571.571 0 0 0 0-1.143H2.286a.571.571 0 0 0 0 1.143zM8 18.286H2.286a.571.571 0 0 0 0 1.143H8a.571.571 0 0 0 0-1.143zM16 16H5.714a.571.571 0 0 0 0 1.143H16A.571.571 0 0 0 16 16zM2.286 17.143h1.143a.571.571 0 0 0 0-1.143H2.286a.571.571 0 0 0 0 1.143zm17.143-3.429H16a.571.571 0 0 0 0 1.143h3.429a.571.571 0 0 0 0-1.143zM9.143 14.857h4.571a.571.571 0 0 0 0-1.143H9.143a.571.571 0 0 0 0 1.143zm-6.857 0h4.571a.571.571 0 0 0 0-1.143H2.286a.571.571 0 0 0 0 1.143zM20.57 11.43H11.43a.571.571 0 0 0 0 1.142h9.142a.571.571 0 0 0 0-1.142zM9.714 12a.571.571 0 0 0-.571-.571H5.714a.571.571 0 0 0 0 1.142h3.429A.571.571 0 0 0 9.714 12zm-7.428.571h1.143a.571.571 0 0 0 0-1.142H2.286a.571.571 0 0 0 0 1.142zm19.428-3.428H16a.571.571 0 0 0 0 1.143h5.714a.571.571 0 0 0 0-1.143zM2.286 10.286H8a.571.571 0 0 0 0-1.143H2.286a.571.571 0 0 0 0 1.143zm13.143-2.857c0 .315.255.571.571.571h5.714a.571.571 0 0 0 0-1.143H16a.571.571 0 0 0-.571.572zm-8.572-.572a.571.571 0 0 0 0 1.143H8a.571.571 0 0 0 0-1.143H6.857zM2.286 8H4.57a.571.571 0 0 0 0-1.143H2.286a.571.571 0 0 0 0 1.143zm16.571-2.857c0 .315.256.571.572.571h1.142a.571.571 0 0 0 0-1.143H19.43a.571.571 0 0 0-.572.572zm-1.143 0a.571.571 0 0 0-.571-.572H12.57a.571.571 0 0 0 0 1.143h4.572a.571.571 0 0 0 .571-.571zm-15.428.571h8a.571.571 0 0 0 0-1.143h-8a.571.571 0 0 0 0 1.143zm5.143-2.857c0 .316.255.572.571.572h11.429a.571.571 0 0 0 0-1.143H8a.571.571 0 0 0-.571.571zm-5.143.572h3.428a.571.571 0 0 0 0-1.143H2.286a.571.571 0 0 0 0 1.143zm0-2.286H16A.571.571 0 0 0 16 0H2.286a.571.571 0 0 0 0 1.143z" />
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<div className="w-full sm:w-3/5 flex flex-col justify-between items-start sm:pl-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
|
||
<h3 className="text-2xl sm:text-2xl lg:text-3xl leading-none font-extrabold text-gray-900 tracking-tight mb-4">
|
||
Tools
|
||
</h3>
|
||
<p className="sm:text-lg mb-6">
|
||
Nx provides excellent tooling for Node in many ways,
|
||
including:
|
||
</p>
|
||
<ul className="sm:text-lg list-disc list-inside">
|
||
<li>
|
||
<a
|
||
className="underline pointer"
|
||
href="https://www.typescriptlang.org/"
|
||
target="_blank"
|
||
>
|
||
TypeScript
|
||
</a>{' '}
|
||
extends JavaScript by adding types and saves you time by
|
||
catching errors and providing fixes before you run code.
|
||
</li>
|
||
<li className="mt-4">
|
||
<a
|
||
className="underline pointer"
|
||
href="https://jestjs.io/"
|
||
target="_blank"
|
||
>
|
||
Jest
|
||
</a>{' '}
|
||
is a zero-config JavaScript testing framework that
|
||
prioritizes simplicity. With robust documentation and a
|
||
feature-full API, Jest is a great solution for JS developers
|
||
looking for a powerful, modern testing toolkit.
|
||
</li>
|
||
<li className="mt-4">
|
||
<a
|
||
className="underline pointer"
|
||
href="https://eslint.org/"
|
||
target="_blank"
|
||
>
|
||
ESLint
|
||
</a>{' '}
|
||
uses static analysis to identify problems in your code, many
|
||
of which are fixed automatically in a syntax-aware manner.
|
||
ESLint is highly configurable; customize your linting
|
||
preprocess code, use custom parsers, or write your own
|
||
rules.
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/*Integrated experience*/}
|
||
<div className="bg-blue-nx-base text-white">
|
||
<div className="max-w-screen-lg xl:max-w-screen-xl mx-auto px-5 py-5">
|
||
<div className="py-32 flex sm:flex-row flex-col items-center justify-center">
|
||
<div className="w-full sm:w-2/5 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
|
||
<h3 className="text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold tracking-tight mb-4">
|
||
Nx Integrated Development Experience
|
||
</h3>
|
||
<p className="sm:text-lg mb-6">
|
||
Nx provides a modern dev experience that is more integrated.
|
||
Nx adds a high-quality VS Code plugin which helps you use
|
||
the build tool effectively, generate components in folders,
|
||
and much more.
|
||
</p>
|
||
<p className="sm:text-lg mb-6">
|
||
Nx also supports optional free cloud support with Nx Cloud
|
||
as well as GitHub integration. Share links with your
|
||
teammates where everyone working on a project can examine
|
||
detailed build logs and get insights about how to improve
|
||
your project and build.
|
||
</p>
|
||
</div>
|
||
<div className="w-full sm:w-3/5 flex flex-col justify-between items-start sm:pl-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
|
||
<Image
|
||
src="/images/vscode-nxcloud-pr.png"
|
||
alt="Nx Integrated Development Experience illustration"
|
||
width={870}
|
||
height={830}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/*Learn more*/}
|
||
<div className="max-w-screen-lg xl:max-w-screen-xl mx-auto px-5 py-5">
|
||
<div className="py-32 flex sm:flex-row flex-col items-start justify-center">
|
||
<div className="w-full sm:w-2/5 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
|
||
<h3 className="text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold text-gray-900 tracking-tight mb-4">
|
||
Learn More About Nx
|
||
</h3>
|
||
</div>
|
||
<div className="w-full sm:w-3/5 flex flex-col justify-between items-start sm:pl-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
|
||
<p className="sm:text-lg mb-6">
|
||
To learn more about Nx and how Nx can increase your dev and
|
||
build efficiency and modernize your apps stack, check out the
|
||
following resources:
|
||
</p>
|
||
<ul className="sm:text-lg list-disc list-inside">
|
||
<li>
|
||
<a
|
||
className="underline pointer"
|
||
href="https://egghead.io/playlists/scale-react-development-with-nx-4038"
|
||
target="_blank"
|
||
>
|
||
Free Nx Workspaces video course
|
||
</a>
|
||
</li>
|
||
<li className="mt-4">
|
||
<a
|
||
className="underline pointer"
|
||
href="https://www.youtube.com/watch?v=h5FIGDn5YM0"
|
||
target="_blank"
|
||
>
|
||
Nx Explainer: Dev Tools for Monorepos, In-Depth with
|
||
Victor Savkin
|
||
</a>
|
||
</li>
|
||
<li className="mt-4">
|
||
<a
|
||
className="underline pointer"
|
||
href="https://go.nrwl.io/nx-office-hours"
|
||
target="_blank"
|
||
>
|
||
Tune into regular Nx Office Hours livestreams
|
||
</a>
|
||
</li>
|
||
<li className="mt-4">
|
||
<a
|
||
className="underline pointer"
|
||
href="https://nx.app"
|
||
target="_blank"
|
||
>
|
||
Nx Cloud
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
<p className="sm:text-lg mt-6">
|
||
You can also{' '}
|
||
<a
|
||
className="underline pointer"
|
||
href="https://twitter.com/NxDevTools"
|
||
target="_blank"
|
||
>
|
||
follow Nx Dev Tools on Twitter
|
||
</a>{' '}
|
||
to keep up with latest news, feature announcements, and
|
||
resources from the Nx Core Team.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/*Who is using Nx*/}
|
||
<NxUsersShowcase />
|
||
</div>
|
||
</main>
|
||
<Footer useDarkBackground={false} />
|
||
</>
|
||
);
|
||
}
|
||
|
||
export default Node;
|