@mainset/cli 0.4.4 → 0.5.0-rc.1

package/dist/esm/commands/index.mjs

@@ -1,3 +1,4 @@
+export * from './init/index.mjs';
 export * from './node-sourcer.mjs';
 export * from './source-code.mjs';
 export * from './web-app.mjs';

package/dist/esm/commands/init/index.mjs

@@ -0,0 +1 @@
+export * from './init.mjs';

package/dist/esm/commands/init/init.mjs

@@ -0,0 +1,113 @@
+import { execSync } from 'node:child_process';
+import fs from 'node:fs';
+import path from 'node:path';
+import { stdin as input, stdout as output } from 'node:process';
+import * as readline from 'node:readline/promises';
+import { runtimePathById } from '../../runtime/index.mjs';
+import { consoleColorize, initProcessCatchErrorLogger, } from '../../utils/index.mjs';
+async function handleConfigurationDependencies(targetDir) {
+    const rl = readline.createInterface({ input, output });
+    let shouldInstall = true;
+    try {
+        const answer = await rl.question('Do you want to install development dependencies (@mainset/dev-stack-fe etc.)? (Y/n) ');
+        shouldInstall = answer.trim().toLowerCase() !== 'n';
+    }
+    catch (_a) {
+        // default true
+    }
+    if (shouldInstall) {
+        let packageManager = 'npm';
+        try {
+            const answer = await rl.question('Which package manager do you use? (npm/pnpm/yarn/bun/other) [npm]: ');
+            packageManager = answer.trim().toLowerCase() || 'npm';
+        }
+        catch (_b) {
+            // default npm
+        }
+        rl.close();
+        let installCommand = '';
+        const packages = [
+            '@mainset/dev-stack-fe',
+            '@mainset/cli',
+            'cross-env',
+            'eslint',
+            'husky',
+            'prettier',
+            'stylelint',
+        ].join(' ');
+        if (['npm', 'pnpm', 'yarn', 'bun'].includes(packageManager)) {
+            const cmd = packageManager === 'npm' ? 'install' : 'add';
+            installCommand = `${packageManager} ${cmd} -D ${packages}`;
+        }
+        else {
+            // assume 'other' is the binary name user typed if not in basic list
+            installCommand = `${packageManager} i -D ${packages}`;
+        }
+        console.log(consoleColorize('BLUE', `\nInstalling dependencies with: ${installCommand}\n`));
+        try {
+            execSync(installCommand, { cwd: targetDir, stdio: 'inherit' });
+            console.log(consoleColorize('BRIGHT_GREEN', '\n✅ Dependencies installed successfully.\n'));
+        }
+        catch (error) {
+            console.error(consoleColorize('BRIGHT_RED', `\n❌ Failed to install dependencies: ${error.message}\n`));
+        }
+        // Close readline if not installing
+    }
+    else {
+        rl.close();
+    }
+}
+function registerInitCommand(program) {
+    program
+        .command('init [appName]')
+        .description('Run init project or configuration process')
+        .option('-m, --mode <type>', 'Initialization mode: app, package or config', 'application')
+        .option('-p, --path <relativePath>', 'Initialization path', './')
+        .action(async (appName, options) => {
+        // Use runtimePathById.root to resolve the target directory relative to the project root
+        const targetDir = path.resolve(runtimePathById.root, options.path, appName || '');
+        if (options.mode === 'application') {
+            if (!appName) {
+                console.error(consoleColorize('BRIGHT_RED', `\n[mainset cli][init] App name is required for application initialization.`));
+                process.exit(1);
+            }
+            // ========== Application mode ==========
+            console.log('\n🏗️  [mainset cli] init: application');
+            try {
+                // Use runtimePathById.msCLISrc to resolve the template directory relative to the CLI runtime
+                const templateDir = path.resolve(runtimePathById.msCLISrc, '../../../src/commands/init/templates/application');
+                if (fs.existsSync(targetDir)) {
+                    console.error(consoleColorize('BRIGHT_YELLOW', `\n[mainset cli][init] Directory "${appName}" already exists at "${targetDir}". Aborting.`));
+                    process.exit(1);
+                }
+                fs.cpSync(templateDir, targetDir, { recursive: true });
+                console.log(`\n✅ Application "${appName}" initialized successfully.\n`);
+            }
+            catch (error) {
+                initProcessCatchErrorLogger('init', error, 'application');
+            }
+        }
+        else if (options.mode === 'config') {
+            // ========== Configuration mode ==========
+            console.log('\n🏗️  [mainset cli] init: configuration');
+            try {
+                const templateDir = path.resolve(runtimePathById.msCLISrc, '../../../src/commands/init/templates/configuration');
+                if (!fs.existsSync(templateDir)) {
+                    console.log(consoleColorize('BRIGHT_YELLOW', `\n[mainset cli][init] Configuration template not found at ${templateDir}`));
+                    return;
+                }
+                fs.cpSync(templateDir, targetDir, { recursive: true });
+                console.log('\n✅ Configuration initialized successfully.\n');
+                await handleConfigurationDependencies(targetDir);
+            }
+            catch (error) {
+                initProcessCatchErrorLogger('init', error, 'configuration');
+            }
+        }
+        else {
+            console.error(consoleColorize('BRIGHT_YELLOW', `[mainset cli][init] Unknown init mode: "${options.mode}"`));
+            process.exit(1);
+        }
+    });
+}
+export { registerInitCommand };

package/dist/esm/mainset-cli.mjs

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 import { Command } from 'commander';
-import { registerNodeSourcerCommand, registerSourceCodeCommand, registerWebAppCommand, } from './commands/index.mjs';
+import { registerInitCommand, registerNodeSourcerCommand, registerSourceCodeCommand, registerWebAppCommand, } from './commands/index.mjs';
 import { verifyOrSetNodeEnv } from './utils/index.mjs';
 // !IMPORTANT: Set NODE_ENV is case it is not passed
 verifyOrSetNodeEnv();
@@ -9,6 +9,7 @@ program
     .name('ms-cli')
     .description('CLI to manage frontend tooling and infrastructure')
     .version('0.1.0');
+registerInitCommand(program);
 registerSourceCodeCommand(program);
 registerNodeSourcerCommand(program);
 registerWebAppCommand(program);

package/dist/types/commands/index.d.mts

@@ -1,3 +1,4 @@
+export * from './init/index.mjs';
 export * from './node-sourcer.mjs';
 export * from './source-code.mjs';
 export * from './web-app.mjs';

package/dist/types/commands/init/index.d.mts

@@ -0,0 +1 @@
+export * from './init.mjs';

package/dist/types/commands/init/init.d.mts

@@ -0,0 +1,3 @@
+import { Command } from 'commander';
+declare function registerInitCommand(program: Command): void;
+export { registerInitCommand };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mainset/cli",
-  "version": "0.4.4",
+  "version": "0.5.0-rc.1",
   "description": "A unified CLI tool for accelerating development, based on mainset vision of front-end infrastructure",
   "homepage": "https://github.com/mainset/dev-stack-fe/tree/main/packages/cli",
   "bugs": {
@@ -15,7 +15,8 @@
   "type": "module",
   "sideEffects": false,
   "files": [
-    "dist"
+    "dist",
+    "src/commands/init/templates"
   ],
   "exports": {
     "./runtime": {

package/src/commands/init/templates/application/.env.example

@@ -0,0 +1 @@
+API_REMOTE_URL=https://httpbin.org

package/src/commands/init/templates/application/config/proxy.config.d.mts

@@ -0,0 +1,5 @@
+import type { SSRConfigParams } from '@mainset/cli/ssr-server';
+
+declare const proxyConfigByPath: SSRConfigParams['proxyConfigByPath'];
+
+export default proxyConfigByPath;

package/src/commands/init/templates/application/config/proxy.config.mjs

@@ -0,0 +1,10 @@
+const proxyConfigByPath = {
+  '/api-example/': {
+    context: ['/api-example/'],
+    target: process.env.API_REMOTE_URL,
+    pathRewrite: { '^/api-example/': '/' },
+    changeOrigin: true,
+  },
+};
+
+export default proxyConfigByPath;

package/src/commands/init/templates/application/config/serve-static.config.mjs

@@ -0,0 +1,7 @@
+import proxyConfigByPath from './proxy.config.mjs';
+
+const serveStaticConfig = {
+  proxyConfigByPath,
+};
+
+export default serveStaticConfig;

package/src/commands/init/templates/application/config/ssr-server.config.mts

@@ -0,0 +1,57 @@
+import { runtimePathById } from '@mainset/cli/runtime';
+import type { SSRConfigParams } from '@mainset/cli/ssr-server';
+import fs from 'fs';
+import path from 'path';
+import ReactDOMServer from 'react-dom/server';
+
+import provideServerReactApp from '../src/app.server';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import proxyConfigByPath from './proxy.config.mjs';
+
+const ssrServerConfig: SSRConfigParams = {
+  serveStatics: [
+    {
+      rootPath: path.join(runtimePathById.dist, 'public'),
+    },
+  ],
+  proxyConfigByPath,
+  renderSSRContentByPath: {
+    '/{*any}': ({ reqUrl, fullUrl }) =>
+      new Promise((resolve, reject) => {
+        fs.readFile(
+          path.join(runtimePathById.dist, 'public', 'server.html'),
+          'utf8',
+          async (err, htmlData) => {
+            if (err) {
+              return reject(err);
+            }
+
+            // Const context = {}; // Context to track SSR rendering information
+
+            try {
+              // Pass both requestUrl (relative) and fullUrl to provider of React App for server-side rendering
+              const appHtml = await provideServerReactApp({
+                reqUrl,
+                fullUrl,
+                // Context
+              });
+
+              const content = htmlData.replace(
+                '<div id="example-react"></div>',
+                `<div id="example-react">${ReactDOMServer.renderToString(
+                  appHtml,
+                )}</div>`,
+              );
+
+              return resolve(content);
+            } catch (error) {
+              return reject(error);
+            }
+          },
+        );
+      }),
+  },
+};
+
+export default ssrServerConfig;

package/src/commands/init/templates/application/package.json

@@ -0,0 +1,24 @@
+{
+  "engines": {
+    "node": ">=24.14.0"
+  },
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development ms-cli web-app --exec serve",
+    "dev:csr": "cross-env NODE_ENV=development ms-cli web-app --exec serve --serveMode csr",
+    "build": "ms-cli web-app --exec build",
+    "build:csr": "ms-cli web-app --exec build --serveMode csr",
+    "serve": "ms-cli web-app --exec serve-static",
+    "serve:csr": "ms-cli web-app --exec serve-static --serveMode csr"
+  },
+  "dependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@mainset/bundler-webpack": "^0.2.0",
+    "@mainset/cli": "^0.4.4",
+    "@mainset/dev-stack-fe": "^0.3.1",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1"
+  }
+}

package/src/commands/init/templates/application/src/@types/bundler-webpack.d.ts

@@ -0,0 +1 @@
+import '@mainset/bundler-webpack/global-types';

package/src/commands/init/templates/application/src/app.browser.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+import { HomePage } from './pages';
+
+const BrowserReactApp = <HomePage />;
+
+export default BrowserReactApp;

package/src/commands/init/templates/application/src/app.server.tsx

@@ -0,0 +1,15 @@
+import BrowserReactApp from './app.browser';
+
+type ProvideServerReactAppParams = {
+  reqUrl: string;
+  fullUrl: string;
+  // Context?: Record<string, any>;
+};
+
+const provideServerReactApp = (params?: ProvideServerReactAppParams) => {
+  console.log({ params });
+
+  return BrowserReactApp;
+};
+
+export default provideServerReactApp;

package/src/commands/init/templates/application/src/index.csr.ts

@@ -0,0 +1,9 @@
+import ReactDOMClient from 'react-dom/client';
+
+import BrowserReactApp from './app.browser';
+
+const targetContainer = document.getElementById('example-react');
+
+if (targetContainer) {
+  ReactDOMClient.createRoot(targetContainer).render(BrowserReactApp);
+}

package/src/commands/init/templates/application/src/index.ssr.ts

@@ -0,0 +1,9 @@
+import ReactDOMClient from 'react-dom/client';
+
+import BrowserReactApp from './app.browser';
+
+const targetContainer = document.getElementById('example-react');
+
+if (targetContainer) {
+  ReactDOMClient.hydrateRoot(targetContainer, BrowserReactApp);
+}

package/src/commands/init/templates/application/src/index.template.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html>
+  <head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+
+    <!-- styles -->
+  </head>
+
+  <body>
+    <div id="example-react"></div>
+
+    <!-- SPA -->
+  </body>
+</html>

package/src/commands/init/templates/application/src/pages/Home/HomePage.tsx

@@ -0,0 +1,26 @@
+import React, { useEffect } from 'react';
+
+import * as styles from './home-page.module.scss';
+
+const HomePage = () => {
+  const [apiResponse, setApiResponse] = React.useState<{
+    origin: string;
+  } | null>(null);
+
+  useEffect(() => {
+    fetch('/api-example/ip')
+      .then((response) => response.json())
+      .then((responseAsJson) => {
+        setApiResponse(responseAsJson);
+      });
+  }, []);
+
+  return (
+    <div className={styles['home-page__welcome-section']}>
+      <h1>Hello world</h1>
+      <p>Your IP is: {apiResponse?.origin || '...'}</p>
+    </div>
+  );
+};
+
+export { HomePage };

package/src/commands/init/templates/application/src/pages/Home/home-page.module.scss

@@ -0,0 +1,9 @@
+.home-page {
+  &__welcome-section {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    height: 100vh;
+  }
+}

package/src/commands/init/templates/application/src/pages/Home/index.ts

@@ -0,0 +1 @@
+export * from './HomePage';

package/src/commands/init/templates/application/src/pages/index.ts

@@ -0,0 +1 @@
+export { HomePage } from './Home';

package/src/commands/init/templates/application/src/styles/global.scss

@@ -0,0 +1 @@
+@use './normalize.scss';

package/src/commands/init/templates/application/src/styles/normalize.scss

@@ -0,0 +1,8 @@
+body,
+h1,
+h2,
+h3,
+hr,
+p {
+  margin: 0;
+}

package/src/commands/init/templates/application/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": [
+    "@mainset/dev-stack-fe/tsconfig--bundler",
+    "@mainset/dev-stack-fe/tschunk--react"
+  ],
+  "compilerOptions": {
+    "outDir": "./dist/esm"
+  }
+}

package/src/commands/init/templates/configuration/.dockerignore

@@ -0,0 +1,34 @@
+# Include any files or directories that you don't want to be copied to your
+# container here (e.g., local build artifacts, temporary files, etc.).
+#
+# For more help, visit the .dockerignore file reference guide at
+# https://docs.docker.com/go/build-context-dockerignore/
+
+**/.classpath
+**/.dockerignore
+**/.env
+**/.git
+**/.gitignore
+**/.project
+**/.settings
+**/.toolstarget
+**/.vs
+**/.vscode
+**/.next
+**/.cache
+**/*.*proj.user
+**/*.dbmdl
+**/*.jfm
+**/charts
+**/docker-compose*
+**/compose.y*ml
+**/Dockerfile*
+**/node_modules
+**/npm-debug.log
+**/obj
+**/secrets.dev.yaml
+**/values.dev.yaml
+**/build
+**/dist
+LICENSE
+README.md

package/src/commands/init/templates/configuration/.husky/commit-msg

@@ -0,0 +1 @@
+npx commitlint@^19 --edit

package/src/commands/init/templates/configuration/.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged@^16

package/src/commands/init/templates/configuration/.prettierignore

@@ -0,0 +1,25 @@
+# general
+LICENSE
+.gitignore
+.keep
+
+# configuration files
+.dockerignore
+Dockerfile
+
+# package manager
+pnpm-lock.yaml
+.npmrc.example
+
+# packages
+.prettierignore
+.husky
+
+# files
+*.sh
+*.toml
+*.env*
+
+# images
+*.ico
+*.svg

package/src/commands/init/templates/configuration/Dockerfile

@@ -0,0 +1,93 @@
+# syntax=docker/dockerfile:1
+
+# Comments are provided throughout this file to help you get started.
+# If you need more help, visit the Dockerfile reference guide at
+# https://docs.docker.com/go/dockerfile-reference/
+
+# Want to help us make this template better? Share your feedback here: https://forms.gle/ybq9Krt8jtBL3iCk7
+
+ARG NODE_VERSION=24.14.0
+ARG PNPM_VERSION=10.30.3
+
+FROM node:${NODE_VERSION}-alpine as base
+
+# Install pnpm.
+RUN --mount=type=cache,target=/root/.npm \
+    npm install -g pnpm@${PNPM_VERSION}
+
+WORKDIR /usr/src/web-app--react
+
+################################################################################
+# Create a stage for installing production dependencies.
+FROM base AS install-dependencies
+
+# Download dependencies as a separate step to take advantage of Docker's caching.
+# Leverage a cache mount to /root/.local/share/pnpm/store to speed up subsequent builds.
+# Leverage a bind mounts to package.json and pnpm-lock.yaml to avoid having to copy them into
+# into this layer.
+RUN \
+    # mount root files
+    --mount=type=bind,source=package.json,target=package.json \
+    --mount=type=bind,source=pnpm-lock.yaml,target=pnpm-lock.yaml \
+    # mount cache and install dependencies
+    --mount=type=cache,target=/root/.local/share/pnpm/store \
+    (\
+        # Install dependencies with pnpm
+        # pnpm install --prod --frozen-lockfile
+        pnpm install --frozen-lockfile \
+    )
+
+################################################################################
+# Create a stage for building the packages source code for Server Side Rendering
+FROM install-dependencies as build-ssr
+
+# Copy the rest of the source files into the image.
+COPY . .
+
+# Run the build script.
+RUN pnpm run build
+
+################################################################################
+# Create a new {production} stage that will be running the application
+FROM install-dependencies AS production
+
+# Use production node environment
+ENV NODE_ENV production
+
+# Run the application as a non-root user.
+USER node
+
+# Copy compiled {/dist} code from the {build} Docker stage into the image.
+COPY --chown=node:node --from=build-ssr /usr/src/web-app--react/dist ./dist
+# Copy other required files and folders to launch the application
+COPY ./package.json ./
+COPY ./config ./config
+
+# Expose the port that the application listens on.
+EXPOSE 8080
+
+# Run the application.
+CMD ["pnpm", "run", "serve"]
+
+################################################################################
+# Create a new {development} stage that will be running the application
+FROM install-dependencies AS development
+
+# Use production node environment
+ENV NODE_ENV development
+
+# Run the application as a non-root user.
+USER node
+
+# Copy compiled {/dist} code from the {build} Docker stage into the image.
+COPY --chown=node:node --from=build-ssr /usr/src/web-app--react/dist ./dist
+
+# Copy the rest of the source files into the image.
+# !IMPORTANT: the {--chown=node:node} required, server crashes on file change, files re-generated with root permissions
+COPY --chown=node:node . .
+
+# Expose the port that the application listens on.
+EXPOSE 8080
+
+# Run the application.
+CMD ["pnpm", "run", "dev"]

package/src/commands/init/templates/configuration/commitlint.config.mjs

@@ -0,0 +1,3 @@
+import { mainsetCommitlintConfig } from '@mainset/dev-stack-fe/commitlint';
+
+export default mainsetCommitlintConfig;

package/src/commands/init/templates/configuration/compose.yaml

@@ -0,0 +1,59 @@
+# Comments are provided throughout this file to help you get started.
+# If you need more help, visit the Docker Compose reference guide at
+# https://docs.docker.com/go/compose-spec-reference/
+
+# Here the instructions define your application as a service called "server".
+# This service is built from the Dockerfile in the current directory.
+# You can add other services your application may depend on here, such as a
+# database or a cache. For examples, see the Awesome Compose repository:
+# https://github.com/docker/awesome-compose
+services:
+  web-app--react:
+    build:
+      context: .
+      target: production
+    # NOTE: start production service by default without {--profile} flag
+    profiles: [prod]
+    env_file:
+      - ./.env
+    ports:
+      - 8080:8080
+    labels:
+      - 'traefik.enable=true'
+      - 'traefik.http.routers.web-app--react.rule=Host(`react-boilerplate.mainset.${DEV__DOMAIN_LOCALHOST:-localhost}`)'
+      - 'traefik.http.services.web-app--react.loadbalancer.server.port=8080'
+    networks:
+      - network--dev
+  web-app--react-dev:
+    extends: web-app--react
+    build:
+      target: development
+    env_file:
+      - ./.env.development
+    volumes:
+      # Bind Mount code for Live Update
+      - ./src:/usr/src/web-app--react/src
+      # !IMPORTANT: ensure that the volume mounting does not overwrite any of the {node_modules} directory
+      - /usr/src/web-app--react/node_modules
+      # !IMPORTANT: ensure that the volume mounting does not overwrite any of the {dist} static directory
+      - /usr/src/web-app--react/dist
+    profiles: [dev]
+
+  # development service
+  # make the service available under custom domain on local computer
+  traefik:
+    image: traefik:v2.5
+    command:
+      - '--api.insecure=true'
+      - '--providers.docker=true'
+      - '--entrypoints.web.address=:80'
+    ports:
+      - '80:80'
+    volumes:
+      - '/var/run/docker.sock:/var/run/docker.sock:ro'
+    networks:
+      - network--dev
+
+# development
+networks:
+  network--dev:

package/src/commands/init/templates/configuration/eslint.config.mjs

@@ -0,0 +1,6 @@
+import {
+  defineConfig,
+  eslintMainsetConfig,
+} from '@mainset/dev-stack-fe/eslint';
+
+export default defineConfig([...eslintMainsetConfig]);

package/src/commands/init/templates/configuration/lint-staged.config.mjs

@@ -0,0 +1,3 @@
+import { mainsetLintStaged } from '@mainset/dev-stack-fe/lint-staged';
+
+export default mainsetLintStaged;

package/src/commands/init/templates/configuration/prettier.config.mjs

@@ -0,0 +1,5 @@
+import mainsetPrettierConfig from '@mainset/dev-stack-fe/prettier';
+
+export default {
+  ...mainsetPrettierConfig,
+};

package/src/commands/init/templates/configuration/stylelint.config.mjs

@@ -0,0 +1,6 @@
+import mainsetStylelintConfig from '@mainset/dev-stack-fe/stylelint';
+
+/** @type {import('stylelint').Config} */
+export default {
+  ...mainsetStylelintConfig,
+};