feat(cli): allow providing custom configuration (#1055)

* allow specifying mode when creating config * load config file from cwd * add cli options for custom config * update documentation for CLI
equinor · Jul 20, 2023 · 6c2fd59 · 6c2fd59
1 parent e65c671
commit 6c2fd59
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 15 deletions.
diff --git a/.changeset/heavy-rivers-build.md b/.changeset/heavy-rivers-build.md
@@ -0,0 +1,10 @@
+---
+'@equinor/fusion-framework-cli': minor
+---
+
+__Allow loading of custom vite config__
+
+When running the CLI, allow the user to provide custom [Vite config](https://vitejs.dev/config/). 
+The provided config is merged with the built-in config (default generated by the CLI).
+
+updated [documentation](https://equinor.github.io/fusion-framework/guide/app/cli.html#config)
diff --git a/packages/cli/src/scripts/create-config.ts b/packages/cli/src/scripts/create-config.ts
@@ -1,6 +1,6 @@
 import { resolve } from 'path';
 
-import { defineConfig, UserConfig, createLogger } from 'vite';
+import { defineConfig, createLogger, type UserConfig } from 'vite';
 
 import react from '@vitejs/plugin-react';
 import tsconfigPaths from 'vite-tsconfig-paths';
@@ -9,6 +9,8 @@ import { resolvePackage } from './app-config.js';
 
 import EnvironmentPlugin from 'vite-plugin-environment';
 
+type CreateConfigOptions = { mode: 'production' | 'development' };
+
 const createCustomLogger = () => {
     const logger = createLogger();
     const originalWarning = logger.warn;
@@ -24,33 +26,35 @@ const createCustomLogger = () => {
     return logger;
 };
 
-export const createConfig = (): UserConfig => {
+export const loadCustomConfig = async (file: string) => {
+    const filePath = resolve(process.cwd(), file);
+    return (await import(filePath)).default;
+};
+
+
+export const createConfig = (opt?: CreateConfigOptions): UserConfig => {
+    const { mode } = opt ?? { mode: 'development' };
     const { root, pkg } = resolvePackage();
     return defineConfig({
         plugins: [
             react(),
             tsconfigPaths(),
             EnvironmentPlugin({
-                NODE_ENV: 'production',
+                NODE_ENV: mode,
             }),
         ],
         root: root,
         server: {
             middlewareMode: true,
         },
-        mode: 'development',
         appType: 'custom',
         build: {
             outDir: resolve(root, 'dist'),
             lib: {
                 entry: resolve(root, pkg.main),
                 fileName: 'app-bundle',
                 formats: ['es'],
-            },
-            // minify: false,
-            // terserOptions: {
-            //     mangle: false,
-            // },
+            }
         },
         customLogger: createCustomLogger(),
     }) as unknown as UserConfig;

diff --git a/packages/cli/src/scripts/main.ts b/packages/cli/src/scripts/main.ts
@@ -7,7 +7,7 @@ import ora from 'ora';
 import { build, mergeConfig, UserConfig } from 'vite';
 
 import startDevServer from './serve.js';
-import createConfig from './create-config.js';
+import { createConfig, loadCustomConfig } from './create-config.js';
 import { resolveAppConfig } from './app-config.js';
 
 const program = new Command();
@@ -25,9 +25,17 @@ app.command('dev')
 
     .option('-p, --port <number>', 'dev-server port', '3000')
     .option('--portal <string>', 'fusion portal host')
-    .action(async ({ port, portal }) => {
+    .option(
+        '-c, --config <file>',
+        'Use specified config file, see https://vitejs.dev/guide/cli.html#build'
+    )
+    .action(async ({ port, portal, config }) => {
         const spinner = ora('Loading configuration').start();
-        const viteConfig = mergeConfig(await createConfig(), { server: { port } }) as UserConfig;
+        const customConfig = config ? await loadCustomConfig(config) : {};
+        const viteConfig = mergeConfig(await createConfig(), {
+            ...customConfig,
+            server: { port },
+        }) as UserConfig;
         const appConfig = await resolveAppConfig();
 
         appConfig.portalHost = portal
@@ -38,8 +46,20 @@ app.command('dev')
         startDevServer({ viteConfig, appConfig });
     });
 
-app.command('build').action(async () => {
-    build(mergeConfig(await createConfig(), { build: { emptyOutDir: true } }));
-});
+app.command('build')
+    .option(
+        '-c, --config <file>',
+        'Use specified config file, see https://vitejs.dev/guide/cli.html#build'
+    )
+    .action(async ({ config }) => {
+        const spinner = ora('Loading configuration').start();
+        const customConfig = config ? await loadCustomConfig(config) : {};
+        const viteConfig = mergeConfig(await createConfig({ mode: 'production' }), {
+            build: { emptyOutDir: true },
+            ...customConfig,
+        });
+        spinner.succeed('Configuration loaded');
+        build(viteConfig);
+    });
 
 program.parse();
diff --git a/vue-press/src/guide/app/cli.md b/vue-press/src/guide/app/cli.md
@@ -46,6 +46,31 @@ export default () => ({
 });
 ```
 
+### Vite
+
+by default the CLI will generate configuration required, but can be overridden by providing custom [Vite config](https://vitejs.dev/config/).
+
+```sh
+fusion-framework-cli app dev -c vite.config.js
+fusion-framework-cli app build -c vite.config.js
+fusion-framework-cli app build --config vite.config.js
+```
+
+__example__
+```js
+/** @type {import('vite').UserConfig} */
+export default {
+  build: {
+    minify: false,
+    terserOptions: {
+      mangle: false
+    },
+    sourcemap: true
+  }
+}
+```
+
+> only static `UserConfig` is allowed
 
 ## Dev