168 lines
7.1 KiB
TypeScript
168 lines
7.1 KiB
TypeScript
import Link from 'next/link';
|
|
|
|
export function MigrationsAndCodeGeneration(): JSX.Element {
|
|
return (
|
|
<article
|
|
id="affected-and-code-generation"
|
|
className="relative overflow-hidden bg-gray-50 py-28 dark:bg-slate-800/40"
|
|
>
|
|
<div className="mx-auto max-w-7xl py-12 px-4 sm:grid sm:grid-cols-2 sm:gap-8 sm:px-6 lg:py-16 lg:px-8">
|
|
<div>
|
|
<header>
|
|
<h1 className="text-lg font-semibold tracking-tight text-blue-500 dark:text-sky-500">
|
|
Evergreen setup
|
|
</h1>
|
|
<p className="mt-4 text-3xl font-semibold tracking-tight text-slate-900 dark:text-slate-100 sm:text-5xl">
|
|
Stay up to date, without effort
|
|
</p>
|
|
</header>
|
|
<div className="mt-8 flex gap-16 font-normal">
|
|
<p className="max-w-xl text-lg text-slate-700 dark:text-slate-400">
|
|
Keeping your stack up to date can be a struggle. Nx comes with a
|
|
smart system that is capable of automatically upgrading your
|
|
codebase. Think of it like{' '}
|
|
<span className="font-medium">
|
|
database migration scripts, but for your config files, npm
|
|
packages and even source code
|
|
</span>
|
|
.
|
|
</p>
|
|
</div>
|
|
<div className="action mt-6 flex">
|
|
<Link
|
|
href="/core-features/automate-updating-dependencies"
|
|
title="Read more about affected command"
|
|
className="rounded-full border border-transparent bg-blue-500 py-1 px-3 font-semibold text-white transition hover:bg-blue-600 hover:text-slate-50 focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:bg-sky-500 dark:hover:bg-sky-400"
|
|
>
|
|
Read about migrations
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<div
|
|
aria-hidden="true"
|
|
className="relative flex h-full w-full flex-col items-center gap-8"
|
|
>
|
|
<div className="w-[568px] max-w-full rounded-xl shadow-xl md:flex">
|
|
<div className="coding flex w-full flex-col rounded-lg border border-slate-200 bg-slate-50 p-4 font-mono text-xs leading-normal text-slate-800 subpixel-antialiased shadow-lg dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200">
|
|
<div className="flex items-center">
|
|
<p>
|
|
<span className="text-base text-purple-600 dark:text-fuchsia-500">
|
|
→
|
|
</span>{' '}
|
|
<span className="mx-1 text-green-600 dark:text-green-400">
|
|
~/workspace
|
|
</span>{' '}
|
|
<span>$</span>
|
|
</p>
|
|
<p className="typing mt-0.5 flex-1 pl-2">nx migrate latest</p>
|
|
</div>
|
|
<div className="mt-2 flex">
|
|
<p className="typing flex-1 items-center pl-2">
|
|
Fetching meta data about packages.
|
|
<br />
|
|
It may take a few minutes.
|
|
<br />
|
|
Fetching nx@14.7.13
|
|
<br />
|
|
Fetching @nrwl/cypress@14.7.13
|
|
<br />
|
|
Fetching @nrwl/next@14.7.13
|
|
<br />
|
|
Fetching @nrwl/linter@14.7.13
|
|
<br />
|
|
Fetching @nrwl/workspace@14.7.13
|
|
<br />
|
|
Fetching @nrwl/jest@14.7.13
|
|
<br />
|
|
Fetching @nrwl/react@14.7.13
|
|
<br />
|
|
Fetching @nrwl/web@14.7.13
|
|
</p>
|
|
</div>
|
|
<div className="mt-8 flex">
|
|
<p className="typing flex-1 items-center pl-2">
|
|
<span className="bg-green-300 px-1 py-0.5 dark:bg-green-600">
|
|
NX
|
|
</span>
|
|
<span className="ml-2 text-green-500 dark:text-green-600">
|
|
The migrate command has run successfully.
|
|
</span>
|
|
<br />
|
|
<br />
|
|
- Package.json has been updated.
|
|
<br />- Migrations.json has been generated.
|
|
</p>
|
|
</div>
|
|
<div className="mt-8 flex">
|
|
<p className="typing flex-1 items-center pl-2">
|
|
<span className="mr-2 bg-yellow-300 px-1 py-0.5 dark:bg-yellow-600">
|
|
NX
|
|
</span>
|
|
Next steps:
|
|
<br />
|
|
<br />
|
|
- Make sure package.json changes make sense and then run
|
|
'yarn',
|
|
<br />
|
|
- Run 'yarn nx migrate --run-migrations'
|
|
<br />- To learn more go to
|
|
<a
|
|
href="https://nx.dev/core-features/automate-updating-dependencies"
|
|
className="ml-2 underline"
|
|
>
|
|
https://nx.dev/core-features/automate-updating-dependencies
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="w-[568px] max-w-full self-start rounded-xl shadow-xl lg:absolute lg:left-1/2 lg:top-24">
|
|
<div className="coding flex w-full flex-col rounded-lg border border-slate-200 bg-slate-50 p-4 font-mono text-xs leading-normal text-slate-800 subpixel-antialiased shadow-lg dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200">
|
|
<div className="flex items-center">
|
|
<p>
|
|
<span className="text-base text-purple-600 dark:text-fuchsia-500">
|
|
→
|
|
</span>{' '}
|
|
<span className="mx-1 text-green-600 dark:text-green-400">
|
|
~/workspace
|
|
</span>{' '}
|
|
<span>$</span>
|
|
</p>
|
|
<p className="typing mt-0.5 flex-1 pl-2">
|
|
nx migrate --run-migrations
|
|
</p>
|
|
</div>
|
|
<div className="mt-4 flex">
|
|
<p className="typing flex-1 items-center pl-2">
|
|
<span className="mr-2 bg-yellow-300 px-1 py-0.5 dark:bg-yellow-600">
|
|
NX
|
|
</span>
|
|
Running 'yarn' to make sure necessary packages are installed
|
|
</p>
|
|
</div>
|
|
<div className="mt-4 flex">
|
|
<p className="typing flex-1 items-center pl-2">
|
|
<span className="mr-2 bg-yellow-300 px-1 py-0.5 dark:bg-yellow-600">
|
|
NX
|
|
</span>
|
|
Running migrations from 'migrations.json'
|
|
</p>
|
|
</div>
|
|
<div className="mt-4 flex">
|
|
<p className="typing flex-1 items-center pl-2">
|
|
<span className="bg-green-300 px-1 py-0.5 dark:bg-green-600">
|
|
NX
|
|
</span>
|
|
<span className="ml-2 text-green-500 dark:text-green-600">
|
|
This workspace is up to date!
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
);
|
|
}
|