@dhis2/create-app 5.3.0-alpha.1 → 5.3.0-alpha.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2/create-app",
-    "version": "5.3.0-alpha.1",
+    "version": "5.3.0-alpha.3",
     "description": "",
     "main": "src/index.js",
     "bin": {
@@ -12,7 +12,6 @@
     "dependencies": {
         "@dhis2/cli-helpers-engine": "^3.2.2",
         "@inquirer/prompts": "^7.8.4",
-        "decompress": "^4.2.1",
         "fast-glob": "^3.3.3",
         "fs-extra": "^11.3.3"
     },

package/src/index.js

@@ -1,9 +1,10 @@
+const { execSync } = require('child_process')
 const path = require('path')
-const { reporter, exec } = require('@dhis2/cli-helpers-engine')
+const { reporter, exec, chalk } = require('@dhis2/cli-helpers-engine')
 const { input, select } = require('@inquirer/prompts')
-const decompress = require('decompress')
 const fg = require('fast-glob')
 const fs = require('fs-extra')
+const { default: getPackageManager } = require('./utils/getPackageManager')
 
 process.on('uncaughtException', (error) => {
     if (error instanceof Error && error.name === 'ExitPromptError') {
@@ -15,14 +16,15 @@ process.on('uncaughtException', (error) => {
 })
 
 const templates = {
+    templateRoot: path.join(__dirname, '../templates'),
     templateWithList: path.join(
         __dirname,
-        '../templates/template-ts-dataelements.zip'
+        '../templates/template-ts-dataelements'
     ),
 
     templateWithReactRouter: path.join(
         __dirname,
-        '../templates/template-ts-dataelements-react-router.zip'
+        '../templates/template-ts-dataelements-react-router'
     ),
 }
 
@@ -51,24 +53,17 @@ const commandHandler = {
         packageManager: {
             description: 'Package Manager',
             type: 'string',
-            default: 'pnpm',
             alias: ['package', 'packagemanager'],
         },
     },
 }
+
 const getTemplateFile = (templateName) => {
     return templateName === 'react-router'
         ? templates.templateWithReactRouter
         : templates.templateWithList
 }
 
-const defaultOptions = {
-    typeScript: true,
-    templateName: 'basic',
-    template: getTemplateFile('basic'),
-    packageManager: 'pnpm',
-}
-
 const command = {
     command: '[app]',
     builder: (yargs) => {
@@ -77,11 +72,6 @@ const command = {
     handler: async (argv) => {
         let name = argv._[0] || argv.name
 
-        const selectedOptions = {
-            ...defaultOptions,
-        }
-
-        reporter.debug(`running "npm create @dhis2/app" (or npx) command"`)
         const useDefauls = argv.yes
 
         if (!name) {
@@ -94,10 +84,11 @@ const command = {
             reporter.log(`name of project: ${name}`)
         }
 
-        selectedOptions.typeScript = argv.typescript
-        selectedOptions.packageManager = argv.packageManager
-        selectedOptions.templateName = argv.template
-        selectedOptions.template = getTemplateFile(argv.template)
+        const selectedOptions = {
+            typeScript: argv.typescript,
+            packageManager: argv.packageManager ?? getPackageManager(),
+            templateName: argv.template,
+        }
 
         if (!useDefauls) {
             const packageManager = await select({
@@ -110,8 +101,6 @@ const command = {
                 ],
             })
 
-            // pnpm = packageManager === 'pnpm'
-            // npm = packageManager === 'npm'
             selectedOptions.packageManager = packageManager
 
             const language = await select({
@@ -126,7 +115,7 @@ const command = {
             selectedOptions.typeScript = language === 'ts'
 
             const template = await select({
-                message: 'Select a teamplate',
+                message: 'Select a template',
                 default: 'ts',
                 choices: [
                     { name: 'Basic Template', value: 'basic' },
@@ -138,23 +127,15 @@ const command = {
             })
 
             selectedOptions.templateName = template
-            selectedOptions.template = getTemplateFile(template)
         }
 
-        // let pkgManager = 'yarn'
-        // if (pnpm) {
-        //     pkgManager = 'pnpm'
-        // } else if (npm) {
-        //     pkgManager = 'npm'
-        // }
-
         reporter.info(
             `Initialising a new project using "${selectedOptions.packageManager}" as a package manager.`
         )
 
-        if (selectedOptions.packageManager !== 'pnpm') {
+        if (selectedOptions.packageManager === 'yarn') {
             reporter.warn(
-                'We recommend using "pnpm" as a package manager for new projects. You can do so by passing the argument --pnpm (i.e. d2 app scripts init --pnpm). This will become the default in future versions of d2 CLI.'
+                'We recommend using "pnpm" as a package manager for new projects. Yarn 1 will be deprecated in future versions of the CLI.'
             )
         }
         // create the folder where the template will be generated
@@ -168,9 +149,26 @@ const command = {
             process.exit(1)
         }
 
-        reporter.info(`selected options: ${JSON.stringify(selectedOptions)}`)
+        reporter.info(`${chalk.cyan('Selected options:')}`)
+        for (const [x, y] of Object.entries(selectedOptions)) {
+            reporter.info(`    ${x}: ${y}`)
+        }
 
-        await decompress(selectedOptions.template, cwd)
+        try {
+            // Running git clean on templates folder
+            // This is  useful in local development if you have built the templates for testing
+            // and want to make sure to delete d2 and node_modules folders before copying the template
+            execSync(`git clean -X -f -- ${templates.templateRoot}`, {
+                stdio: 'ignore',
+            })
+            reporter.debug('Successfully ran git clean')
+        } catch (err) {
+            reporter.debug(err)
+        }
+
+        reporter.info('Copying template files')
+        const templateFiles = getTemplateFile(selectedOptions.templateName)
+        fs.copySync(templateFiles, cwd)
 
         const paths = {
             base: cwd,
@@ -237,6 +235,8 @@ const command = {
 
         // copy correct lock file for npm/yarn
         if (!pnpm) {
+            // ? copying yarn.lock or package-lock speeds installation a bit
+            // ? but we could also just run "yarn install" and generate the lock file
             if (fs.existsSync(paths.pnpmLock)) {
                 fs.removeSync(paths.pnpmLock)
             }
@@ -313,6 +313,8 @@ const command = {
             pipe: argv.debug,
         })
 
+        // ToDo: setup the formatting on CLI project properly and avoid running it on scaffolding
+        reporter.debug(`Running '${pkgManager} format' (prettier)`)
         await exec({
             cmd: pkgManager,
             args: npm ? ['run', 'format'] : ['format'],
@@ -320,7 +322,14 @@ const command = {
             pipe: argv.debug,
         })
 
-        reporter.info('Done!')
+        reporter.info(`${chalk.greenBright('Done!')}`)
+
+        const cdCmd = name != '.' ? `cd ${name} && ` : ''
+        reporter.print(
+            `Run ${chalk.bold(
+                `${cdCmd}${pkgManager} start`
+            )} to launch your new DHIS2 application`
+        )
 
         return
     },

package/src/utils/getPackageManager.js

@@ -0,0 +1,15 @@
+const getPackageManager = () => {
+    const userAgent = process.env.npm_config_user_agent || ''
+
+    if (userAgent.startsWith('yarn')) {
+        return 'yarn'
+    }
+
+    if (userAgent.startsWith('npm')) {
+        return 'npm'
+    }
+
+    return 'pnpm'
+}
+
+export default getPackageManager

package/templates/template-ts-dataelements/.prettierrc.mjs

@@ -0,0 +1,10 @@
+import prettierConfig from '@dhis2/config-prettier'
+
+/**
+ * @type {import("prettier").Config}
+ */
+const config = {
+    ...prettierConfig,
+}
+
+export default config

package/templates/template-ts-dataelements/README.md

@@ -0,0 +1,45 @@
+This project was bootstrapped with [DHIS2 Application Platform](https://github.com/dhis2/app-platform).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `yarn start`
+
+Runs the app in the development mode.<br />
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.<br />
+You will also see any lint errors in the console.
+
+### `yarn test`
+
+Launches the test runner and runs all available tests found in `/src`.<br />
+
+See the section about [running tests](https://platform.dhis2.nu/#/scripts/test) for more information.
+
+### `yarn build`
+
+Builds the app for production to the `build` folder.<br />
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.<br />
+A deployable `.zip` file can be found in `build/bundle`!
+
+See the section about [building](https://platform.dhis2.nu/#/scripts/build) for more information.
+
+### `yarn deploy`
+
+Deploys the built app in the `build` folder to a running DHIS2 instance.<br />
+This command will prompt you to enter a server URL as well as the username and password of a DHIS2 user with the App Management authority.<br/>
+You must run `yarn build` before running `yarn deploy`.<br />
+
+See the section about [deploying](https://platform.dhis2.nu/#/scripts/deploy) for more information.
+
+## Learn More
+
+You can learn more about the platform in the [DHIS2 Application Platform Documentation](https://platform.dhis2.nu/).
+
+You can learn more about the runtime in the [DHIS2 Application Runtime Documentation](https://runtime.dhis2.nu/).
+
+To learn React, check out the [React documentation](https://reactjs.org/).

package/templates/template-ts-dataelements/d2.config.js

@@ -0,0 +1,12 @@
+/** @type {import('@dhis2/cli-app-scripts').D2Config} */
+const config = {
+    type: 'app',
+
+    entryPoints: {
+        app: './src/App.tsx',
+    },
+
+    viteConfigExtensions: './viteConfigExtensions.mts',
+}
+
+module.exports = config

package/templates/template-ts-dataelements/eslint.config.mjs

@@ -0,0 +1,13 @@
+import config from '@dhis2/config-eslint'
+import { defineConfig } from 'eslint/config'
+import { includeIgnoreFile } from '@eslint/compat'
+import { fileURLToPath } from 'node:url'
+
+const gitignorePath = fileURLToPath(new URL('.gitignore', import.meta.url))
+
+export default defineConfig([
+    includeIgnoreFile(gitignorePath, 'Imported .gitignore patterns'),
+    {
+        extends: [config],
+    },
+])

package/templates/template-ts-dataelements/i18n/en.pot

@@ -0,0 +1,42 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: i18next-conv\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=(n != 1)\n"
+"POT-Creation-Date: 2026-01-03T10:11:58.219Z\n"
+"PO-Revision-Date: 2026-01-03T10:11:58.220Z\n"
+
+msgid "ERROR"
+msgstr "ERROR"
+
+msgid "Loading..."
+msgstr "Loading..."
+
+msgid "Hello {{name}}"
+msgstr "Hello {{name}}"
+
+msgid "Welcome to DHIS2 with TypeScript!"
+msgstr "Welcome to DHIS2 with TypeScript!"
+
+msgid "Error"
+msgstr "Error"
+
+msgid "Error loading the data elements"
+msgstr "Error loading the data elements"
+
+msgid "ID"
+msgstr "ID"
+
+msgid "Name"
+msgstr "Name"
+
+msgid "Domain"
+msgstr "Domain"
+
+msgid "Value Type"
+msgstr "Value Type"
+
+msgid "Created by"
+msgstr "Created by"

package/templates/template-ts-dataelements/package.json

@@ -0,0 +1,35 @@
+{
+    "name": "{{template-name}}",
+    "version": "1.0.0",
+    "description": "",
+    "license": "BSD-3-Clause",
+    "private": true,
+    "packageManager": "pnpm@10.13.1",
+    "scripts": {
+        "build": "d2-app-scripts build",
+        "start": "d2-app-scripts start",
+        "test": "d2-app-scripts test",
+        "deploy": "d2-app-scripts deploy",
+        "lint": "eslint && prettier -c .",
+        "format": "prettier . -w"
+    },
+    "dependencies": {
+        "@dhis2/app-runtime": "^3.15.1",
+        "@dhis2/ui": "^10.11.0",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1"
+    },
+    "devDependencies": {
+        "@dhis2/cli-app-scripts": "12.8.0-alpha.3",
+        "@dhis2/config-eslint": "^0.2.2",
+        "@dhis2/config-prettier": "^0.2.2",
+        "@eslint/compat": "^2.0.0",
+        "@types/jest": "^30.0.0",
+        "@types/react": "^19.2.7",
+        "@types/react-dom": "^19.2.3",
+        "eslint": "^9.39.2",
+        "prettier": "^3.7.4",
+        "typescript": "^5.9.3",
+        "vite": "^7.3.0"
+    }
+}