From c3089164714b7bc9cd8a23e037e744ceba30bb60 Mon Sep 17 00:00:00 2001 From: Kai Vandivier Date: Sat, 2 Nov 2024 15:58:55 +0100 Subject: [PATCH 1/7] docs: platform v12 release blog --- blog/2024-11-2-app-platform-v12.md | 58 ++++++++++++++++++++++++++++++ 1 file changed, 58 insertions(+) create mode 100644 blog/2024-11-2-app-platform-v12.md diff --git a/blog/2024-11-2-app-platform-v12.md b/blog/2024-11-2-app-platform-v12.md new file mode 100644 index 0000000..0274a78 --- /dev/null +++ b/blog/2024-11-2-app-platform-v12.md @@ -0,0 +1,58 @@ +--- +slug: 2022/07/app-platform-v12 +title: App Platform v12 +authors: core +tags: [app platform, developer tools, webapp, announcement] +--- + +# Platform v12 Migration Guide: Vite & React 18 + +Good news! Vite and React 18 in the app platform are ready to use! + +We're very excited for these updates — both will significantly modernize the App Platform, and Vite will be a big upgrade from Create React App (CRA), which we used under the hood to build and serve apps previously. It will greatly improve the developer experience, and with greater control over the configuration, it will open up some powerful new possibilities for the platform. + +Here are some tips about what to expect, and how to easily upgrade to the latest version of `@dhis2/cli-app-scripts` to take advantage of Vite and React 18. + +### Notable changes + +These are some things that you'll see right away after upgrading: + +- It's fast! Starting up an app is nearly instant, and building an app is about 3-4 times faster compared to CRA +- Plugins are handled better: + - Start-up of both the app and plugin is nearly instant + - The app and plugin are run on the same port + - Support for a plugin without an app is improved + - Code is shared between entrypoints, which makes bundles smaller + - Hot Module Replacement (HMR) for code changes in the plugin will be as fast as in the app +- There are some new TypeScript features: + - Bootstrapping an app with a TypeScript template is supported: `d2-app-scripts init --typescript my-app`. See the [`init` docs](../scripts/init.md) for more about the command + - Vite has native support for TypeScript + - Although not in the App Platform package, with the latest `@dhis2/cli-style`, TypeScript type checking is performed when running `d2-style lint` + - With `@dhis2/ui` version 9, the UI library is now typed as well +- There's a small suite of tools available in the CLI when running an app in dev mode: + - With the dev server running, press `h + enter` to see the options + - Options include exposing the server on LAN, opening the app in the browser, cleanly quitting the server, and restarting the dev server (which can be helpful if you're modifying libraries in `node_modules`) +- The build output includes a summary to inspect chunks + +### Future changes + +With Vite, the door is open for some big future improvements: + +- Extensible config: developers can add their own options to the Vite config, for example a plugin for Flow types, or to define import aliases ([LIBS-706](https://dhis2.atlassian.net/browse/LIBS-706)) +- Arbitrary entrypoints, beyond app/plugin/lib: Make a regular app, a configuration app, a capture plugin, a dashboard plugin, and more all from the same repo and sharing code between them ([LIBS-394](https://dhis2.atlassian.net/browse/LIBS-394)) + +With respect to TypeScript, work is also under way to add types to data fetching tools using specs generated from OpenAPI ([LIBS-523](https://dhis2.atlassian.net/browse/LIBS-523)). + +## Getting started + +By running these steps, you should be able to run your app right away: + +1. `yarn add @dhis2/app-runtime @dhis2/ui -D @dhis2/cli-app-scripts` +2. `npx yarn-deduplicate yarn.lock && yarn` +3. Try out `yarn start --allowJsxInJs`, and your app should be running 🚀 + +There will be some other changes you will want to make, which are described in detail in the [migration guide](to-do:link). Our goal is to make it easy to adopt the new changes, so we have some tools to facilitate the process. + +Head on over to the [migration guide](to-do:link) for more instructions and technical info. + +Enjoy the updates, and happy coding! From c569df3c5144dfea42de48b75b622d5454947e2b Mon Sep 17 00:00:00 2001 From: Kai Vandivier Date: Sat, 2 Nov 2024 16:04:11 +0100 Subject: [PATCH 2/7] docs: update slug --- blog/2024-11-2-app-platform-v12.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blog/2024-11-2-app-platform-v12.md b/blog/2024-11-2-app-platform-v12.md index 0274a78..249457f 100644 --- a/blog/2024-11-2-app-platform-v12.md +++ b/blog/2024-11-2-app-platform-v12.md @@ -1,5 +1,5 @@ --- -slug: 2022/07/app-platform-v12 +slug: 2024/11/app-platform-v12 title: App Platform v12 authors: core tags: [app platform, developer tools, webapp, announcement] From fba8f3e9dd7da69904ee8a7c56e31a5d5fa846de Mon Sep 17 00:00:00 2001 From: Kai Vandivier Date: Mon, 4 Nov 2024 14:39:48 +0100 Subject: [PATCH 3/7] docs: prepare for sidebar updates --- sidebars.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/sidebars.js b/sidebars.js index 41c5f37..84a58a0 100644 --- a/sidebars.js +++ b/sidebars.js @@ -73,6 +73,12 @@ module.exports = { label: 'Overview', type: 'doc', }, + // Todo: add after merging platform docs (currently breaks build) + // { + // migrate: [ + // 'app-platform/scripts/migrate/js-to-jsx', + // ], + // }, { id: 'app-platform/scripts/build', label: 'build', @@ -132,6 +138,10 @@ module.exports = { 'app-platform/architecture', 'app-platform/troubleshooting', 'app-platform/proxy', + // Todo: add after merging platform docs + // { + // Migration: ['app-platform/migration/v12'], + // }, { id: 'app-platform/changelog', label: 'Changelog', From 00fb0f189072b1a0aff737386909e59ed154ab70 Mon Sep 17 00:00:00 2001 From: Kai Vandivier Date: Mon, 4 Nov 2024 14:40:00 +0100 Subject: [PATCH 4/7] docs: prepare for correct links --- blog/2024-11-2-app-platform-v12.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/blog/2024-11-2-app-platform-v12.md b/blog/2024-11-2-app-platform-v12.md index 249457f..8ff0597 100644 --- a/blog/2024-11-2-app-platform-v12.md +++ b/blog/2024-11-2-app-platform-v12.md @@ -25,7 +25,7 @@ These are some things that you'll see right away after upgrading: - Code is shared between entrypoints, which makes bundles smaller - Hot Module Replacement (HMR) for code changes in the plugin will be as fast as in the app - There are some new TypeScript features: - - Bootstrapping an app with a TypeScript template is supported: `d2-app-scripts init --typescript my-app`. See the [`init` docs](../scripts/init.md) for more about the command + - Bootstrapping an app with a TypeScript template is supported: `d2-app-scripts init --typescript my-app`. See the [`init` docs](https://example.org) for more about the command - Vite has native support for TypeScript - Although not in the App Platform package, with the latest `@dhis2/cli-style`, TypeScript type checking is performed when running `d2-style lint` - With `@dhis2/ui` version 9, the UI library is now typed as well @@ -51,8 +51,8 @@ By running these steps, you should be able to run your app right away: 2. `npx yarn-deduplicate yarn.lock && yarn` 3. Try out `yarn start --allowJsxInJs`, and your app should be running 🚀 -There will be some other changes you will want to make, which are described in detail in the [migration guide](to-do:link). Our goal is to make it easy to adopt the new changes, so we have some tools to facilitate the process. +There will be some other changes you will want to make, which are described in detail in the [migration guide](https://example.org). Our goal is to make it easy to adopt the new changes, so we have some tools to facilitate the process. -Head on over to the [migration guide](to-do:link) for more instructions and technical info. +Head on over to the [migration guide](https://example.org) for more instructions and technical info. Enjoy the updates, and happy coding! From 45c55d803b610be22fe30768662ad5d53b5cbcca Mon Sep 17 00:00:00 2001 From: Kai Vandivier Date: Mon, 4 Nov 2024 16:20:05 +0100 Subject: [PATCH 5/7] docs: add 'diff' to prism languages --- docusaurus.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docusaurus.config.js b/docusaurus.config.js index 9811a78..05116e1 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -12,7 +12,7 @@ module.exports = { projectName: 'developer-portal', themeConfig: { prism: { - additionalLanguages: ['java', 'yaml', 'json'], + additionalLanguages: ['diff', 'java', 'json', 'yaml'], }, navbar: { logo: { From 3bb5b7334165a881a527698920cf52cd3533441d Mon Sep 17 00:00:00 2001 From: Kai Vandivier Date: Tue, 5 Nov 2024 11:47:06 +0100 Subject: [PATCH 6/7] docs: apply suggestions --- blog/2024-11-2-app-platform-v12.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/blog/2024-11-2-app-platform-v12.md b/blog/2024-11-2-app-platform-v12.md index 8ff0597..4e12057 100644 --- a/blog/2024-11-2-app-platform-v12.md +++ b/blog/2024-11-2-app-platform-v12.md @@ -1,11 +1,11 @@ --- slug: 2024/11/app-platform-v12 title: App Platform v12 -authors: core +authors: [core, kai] tags: [app platform, developer tools, webapp, announcement] --- -# Platform v12 Migration Guide: Vite & React 18 +# Platform v12 Release, Vite and React 18 Migration Guide Good news! Vite and React 18 in the app platform are ready to use! @@ -36,7 +36,7 @@ These are some things that you'll see right away after upgrading: ### Future changes -With Vite, the door is open for some big future improvements: +With Vite, the door is open for some big future improvements. We've already created JIRA tickets for these, so if you're interested in staying up-to-date on them you can watch these tickets. - Extensible config: developers can add their own options to the Vite config, for example a plugin for Flow types, or to define import aliases ([LIBS-706](https://dhis2.atlassian.net/browse/LIBS-706)) - Arbitrary entrypoints, beyond app/plugin/lib: Make a regular app, a configuration app, a capture plugin, a dashboard plugin, and more all from the same repo and sharing code between them ([LIBS-394](https://dhis2.atlassian.net/browse/LIBS-394)) @@ -51,8 +51,8 @@ By running these steps, you should be able to run your app right away: 2. `npx yarn-deduplicate yarn.lock && yarn` 3. Try out `yarn start --allowJsxInJs`, and your app should be running 🚀 -There will be some other changes you will want to make, which are described in detail in the [migration guide](https://example.org). Our goal is to make it easy to adopt the new changes, so we have some tools to facilitate the process. +There will be some other changes you will want to make, which are described in detail in the [migration guide](https://example.org). Our goal is to make it easy to adopt the new changes, so we have some tools to facilitate the process. -Head on over to the [migration guide](https://example.org) for more instructions and technical info. +Head on over to the [migration guide](https://example.org) for more detailed instructions and technical background information. Enjoy the updates, and happy coding! From ff2cb6fb5d4f181b6733b08451ad71d9b0b18ef7 Mon Sep 17 00:00:00 2001 From: Kai Vandivier Date: Tue, 5 Nov 2024 13:09:02 +0100 Subject: [PATCH 7/7] docs: revision --- blog/2024-11-2-app-platform-v12.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/blog/2024-11-2-app-platform-v12.md b/blog/2024-11-2-app-platform-v12.md index 4e12057..3599110 100644 --- a/blog/2024-11-2-app-platform-v12.md +++ b/blog/2024-11-2-app-platform-v12.md @@ -7,9 +7,9 @@ tags: [app platform, developer tools, webapp, announcement] # Platform v12 Release, Vite and React 18 Migration Guide -Good news! Vite and React 18 in the app platform are ready to use! +Good news! Vite and React 18 in the app platform are ready to use! Vite replaces the deprecated Create React App (CRA) for starting and build apps, and React v18 replaces v16. -We're very excited for these updates — both will significantly modernize the App Platform, and Vite will be a big upgrade from Create React App (CRA), which we used under the hood to build and serve apps previously. It will greatly improve the developer experience, and with greater control over the configuration, it will open up some powerful new possibilities for the platform. +We're very excited for these updates — both will significantly modernize the App Platform, and Vite will be a big upgrade from CRA. It will greatly improve the developer experience, and with greater control over the configuration, it will open up some powerful new possibilities for the platform. Here are some tips about what to expect, and how to easily upgrade to the latest version of `@dhis2/cli-app-scripts` to take advantage of Vite and React 18.