Files
directus/docs/guides/migration/node.md
Connor 92621429ee Linting and Formatting Upgrade (#18892)
* add docs to eslint

* update prettier ignore

* fix vitepress linting

* eslint ignore fixes

* prettier run

* update prettier ignore

* fix formatting

* enable linting of markdown files

* revert format command change

* fix irregular whitespace

* update dictionary

* (Changelog) Create four-boxes-shake.md

* Rework ESLint / Prettier setup

- Disable js/ts/vue files for Prettier to ensure linting/formatting is
  only happening via ESLint
- Rework formatting of code blocks in md files
  - Disable formatting of code blocks in md files under '/docs' by Prettier
  - Instead use "eslint-plugin-markdown" to format & __lint__ js*/ts*/vue such code blocks
  - Replace unmaintained "eslint-plugin-md" plugin by official "eslint-plugin-markdown" plugin
  - I'll check whether we can use this to format other code blocks
    (json, html, ...) as well
- Restructure, clean-up and apply some fixes to the ESLint config
  (Note: Not ready for flat config yet since not supported by
  vscode-eslint)
- Enable cache for ESLint / Prettier in scripts
- Clean-up ignore file
  - Explicit folder declaration (.../)
  - Don't ignore all 'extensions' folders in ESLint (only
    '/api/extensions/')
  - Enable formatting in '/.github' folder

* Fix all formatting issues with Prettier

* Update md files under /docs/.typedocs

* Fix lint issues in vue/js files

* ESLint / Prettier config revision v2

Enable Prettier for md code blocks, but only as warnings since it can
get into the way with Vitepress md extensions like '[!code ...]'
comments

* Remove prettier-ignore comments

* Make spellchecker happy

* Remove changeset

* Revert lint setup for code blocks

There are many cases in the docs where linting / formatting of code
blocks doesn't make
sense:
- Code block is only an excerpt - linter fails
- Code block contains special comments (e.g. markdown extensions) which
  needs to remain at the same place - formatting would break it
- ...

* Apply lint issues / formatting from temp lint setup

* Run formatter

* Fix merge failure

* Simplify & modernize ESLint / Prettier setup

No longer run Prettier via ESLint. Nowadays, this is the recommended
setup. There's no real need to run it this way, it's just an additional
layer.

Add VS Code settings to make the work with the new setup easier.

* Remove unused eslint disable directives

* Make editorconfig more useful

* Fix formatting issues reported by editorconfig

* Format files with Prettier

* Enable formatting of source translations file

* Format source translations file

* Remove unnecessary console error

* Remove unnecessary line

* Only ignore md files under .changeset

* Add CI reporter for Prettier

* Fail job on wrongly formatted files

* Fix format

* Test Prettier action on changed/added file

* Use simple CI format check for now & no cache

* Revert "Test Prettier action on changed/added file"

This reverts commit 4f7d8826ad.

* Introduce code blocks check for docs

* Fix code block issues

* Ignore auto-generated packages dir

* Fix comment position

* Also lint `/app/.storybook`

* Reformat modified files

---------

Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch>
Co-authored-by: Rijk van Zanten <rijkvanzanten@me.com>
2023-06-29 11:54:01 +02:00

5.4 KiB

description, tags, skill_level, directus_version, author_override, author
description tags skill_level directus_version author_override author
Learn how to migrate your data model to a new Directus project using Node.js.
9.23.0 Kevin Lewis

Migrate Your Data Model with Node.js

{{ $frontmatter.description }}

:::tip Author: {{$frontmatter.author}}

Directus Version: {{$frontmatter.directus_version}}

:::

Explanation

Directus' schema migration endpoints allow users to retrieve a project's data model and apply changes to another project.

This is useful if you make changes to a data model in a development project and need to apply them to a production project, or to move from a self-hosted project to Directus Cloud.

How-To Guide

::: tip Permissions

You must be an admin user to use these endpoints and follow this guide.

:::

You should have two Directus projects - this guide will refer to them as the "base" and the "target". Before starting, make sure you have a static access token for both projects.

Set Up Project

Open a new empty directory in your code editor. In your terminal, navigate to the directory and install dependencies with npm install cross-fetch.

Create a new index.js file and set it up:

const fetch = require('cross-fetch');

const BASE_DIRECTUS_URL = 'https://your-base-project.directus.app';
const BASE_ACCESS_TOKEN = 'your-access-token';

const TARGET_DIRECTUS_URL = 'https://your-target-project.directus.app';
const TARGET_ACCESS_TOKEN = 'your-access-token';

async function main() {}

main();

Retrieve Data Model Snapshot From Base Project

At the bottom of index.js, create a getSnapshot() function:

async function getSnapshot() {
	const URL = `${BASE_DIRECTUS_URL}/schema/snapshot?access_token=${BASE_ACCESS_TOKEN}`;
	const { data } = await fetch(URL).then((r) => r.json());
	return data;
}

Note that the data property is destructured from the response and returned. In the main() function, call getSnapshot():

async function main() {
	const snapshot = await getSnapshot(); // [!code ++]
	console.log(snapshot); // [!code ++]
}

Get your snapshot by running node index.js.

Retrieve Data Model Diff

This section will create a "diff" that describes all differences between your base and target project's data models.

At the bottom of index.js, create a getDiff() function which accepts a snapshot parameter:

async function getDiff(snapshot) {
	const URL = `${TARGET_DIRECTUS_URL}/schema/diff?access_token=${TARGET_ACCESS_TOKEN}`;

	const { data } = await fetch(URL, {
		method: 'POST',
		body: JSON.stringify(snapshot),
		headers: {
			'Content-Type': 'application/json',
		},
	}).then((r) => r.json());

	return data;
}

Update your main() function:

async function main() {
	const snapshot = await getSnapshot();
	console.log(snapshot); // [!code --]
	const diff = await getDiff(snapshot); // [!code ++]
	console.log(diff); // [!code ++]
}

Get your diff by running node index.js.

Apply Diff To Target Project

At the bottom of index.js, create a applyDiff() function which accepts a diff parameter:

async function applyDiff(diff) {
	const URL = `${TARGET_DIRECTUS_URL}/schema/apply?access_token=${TARGET_ACCESS_TOKEN}`;

	await fetch(URL, {
		method: 'POST',
		body: JSON.stringify(diff),
		headers: {
			'Content-Type': 'application/json',
		},
	});
}

Update your main() function:

async function main() {
	const snapshot = await getSnapshot();
	const diff = await getDiff(snapshot);
	console.log(diff); // [!code --]
	await applyDiff(diff); // [!code ++]
}

Apply the diff by running node index.js.

Final Tips

The diff endpoint does not allow different Directus versions and database vendors by default. This is to avoid any unintentional diffs from being generated. You can opt in to bypass these checks by adding a second query parameter called force with the value of true.

The hash property in the diff is based on the target instance's schema and version. It is used to safeguard against changes that may happen after the current diff was generated which can potentially incur unexpected side effects when applying the diffs without this safeguard. In case the schema has been changed in the meantime, the diff must be regenerated.

The complete and final code is available below.

const fetch = require('cross-fetch');

const BASE_DIRECTUS_URL = 'https://your-base-project.directus.app';
const BASE_ACCESS_TOKEN = 'your-access-token';

const TARGET_DIRECTUS_URL = 'https://your-target-project.directus.app';
const TARGET_ACCESS_TOKEN = 'your-access-token';

async function main() {
	const snapshot = await getSnapshot();
	const diff = await getDiff(snapshot);
	await applyDiff(diff);
}

main();

async function getSnapshot() {
	const URL = `${BASE_DIRECTUS_URL}/schema/snapshot?access_token=${BASE_ACCESS_TOKEN}`;
	const { data } = await fetch(URL).then((r) => r.json());
	return data;
}

async function getDiff(snapshot) {
	const URL = `${TARGET_DIRECTUS_URL}/schema/diff?access_token=${TARGET_ACCESS_TOKEN}`;

	const { data } = await fetch(URL, {
		method: 'POST',
		body: JSON.stringify(snapshot),
		headers: {
			'Content-Type': 'application/json',
		},
	}).then((r) => r.json());

	return data;
}

async function applyDiff(diff) {
	const URL = `${TARGET_DIRECTUS_URL}/schema/apply?access_token=${TARGET_ACCESS_TOKEN}`;

	await fetch(URL, {
		method: 'POST',
		body: JSON.stringify(diff),
		headers: {
			'Content-Type': 'application/json',
		},
	});
}