@raisenow/tamaro-cli 1.0.4 → 1.0.8

package/readme.md

@@ -0,0 +1,201 @@
+# Getting started
+
+It's a command-line interface for all operations with Tamaro customer configurations and *Tamaro Core*.
+
+You don't need to install it manually. The recommended way is to run it using `npx` command, which must be available along with `node` and `npm` commands.
+
+# Usage
+
+To see an overview of all possible commands just run the following command without any arguments:
+
+```bash
+npx -y @raisenow/tamaro-cli
+```
+
+To see the info about some particular command (for example `dev` command), prepend `help` before the command name:
+
+```bash
+npx -y @raisenow/tamaro-cli help dev
+```
+
+Substitute `dev` with the command you want to get info about.
+
+# Commands
+
+Available commands:
+- [dev](#dev)
+- [build](#build)
+- [deploy](#deploy)
+- [serve](#serve)
+
+## dev
+
+Runs development web-server for *Tamaro Core* or particular customer configuration.
+
+Options:
+- `--local-core` – Load *Tamaro Core* from localhost instead of CDN
+
+### Run development web-server using Tamaro Core from CDN
+
+Run development web-server for `example-02-typical-customisations` customer configuration.
+
+After running this command, development web-server should be running on http://localhost:1234/ (port may differ).
+
+```bash
+cd /path/to/tamaro-configurations/configs/example-02-typical-customisations
+npx -y @raisenow/tamaro-cli dev
+```
+
+### Run development web-server using locally running Tamaro Core
+
+1.  Run development web-server for *Tamaro Core* in the first terminal tab.
+    
+    After running this command, development web-server should be running on http://localhost:1234/ (port may differ).
+
+    ```bash
+    cd /path/to/tamaro-core
+    npx -y @raisenow/tamaro-cli dev
+    ```
+
+2.  Run development web-server for `example-02-typical-customisations` customer configuration in the second terminal tab.
+    
+    After running this command, development web-server should be running on http://localhost:1235/ (port may differ).
+
+    ```bash
+    cd /path/to/tamaro-configurations/configs/example-02-typical-customisations
+    npx -y @raisenow/tamaro-cli dev --local-core
+    ```
+
+## build
+
+Build optimised (minified) bundle of *Tamaro Core* or customer configuration for production.
+
+Options:
+- `--local-core` – Load *Tamaro Core* from localhost instead of CDN
+- `--analyze` – Generate bundle statistics to `reports` folder
+- `--deploy` – Deploy *Tamaro Core* or customer configuration bundle to AWS
+- `--serve` – Run web-server for the bundle
+- `--tag <tag>` – Tag which will be used for deployment of the bundle
+
+Before trying to deploy a bundle, make sure you have proper AWS credentials in your environment, otherwise deployment will fail.
+More info about configuring AWS credentials and profiles is in the [wiki page](https://raisenow.atlassian.net/wiki/spaces/DEVOPS/pages/3201731220).
+
+### Build and deploy customer configuration
+
+Build and deploy optimised (minified) bundle of `example-02-typical-customisations` customer configuration.
+
+```bash
+cd /path/to/tamaro-configurations/configs/example-02-typical-customisations
+npx -y @raisenow/tamaro-cli build --deploy
+```
+
+As a result bundle should be deployed to: https://tamaro.raisenow.com/example-02-typical-customisations/latest/index.html
+
+### Build and deploy customer configuration with a specific tag
+
+Build and deploy optimised (minified) bundle of `example-02-typical-customisations` customer configuration with `WEB-123` tag.
+
+```bash
+cd /path/to/tamaro-configurations/configs/example-02-typical-customisations
+npx -y @raisenow/tamaro-cli build --deploy --tag WEB-123
+```
+
+As a result bundle should be deployed to: https://tamaro.raisenow.com/example-02-typical-customisations/WEB-123/index.html
+
+### Build and serve customer configuration
+
+Build and serve optimised (minified) bundle of `example-02-typical-customisations` customer configuration.
+
+After running this command, web-server should be running on http://localhost:1234/ (port may differ).
+
+```bash
+cd /path/to/tamaro-configurations/configs/example-02-typical-customisations
+npx -y @raisenow/tamaro-cli build --serve
+```
+
+
+## deploy
+
+Deploy prebuilt Tamaro Core or customer configuration bundle to AWS.
+
+Options:
+- `--tag <tag>` – Tag which will be used for deployment of the bundle
+
+Make sure you have built the bundle before deploying it with this command, otherwise you may mistakenly deploy the bundle from previous build.
+
+Example:
+
+1. Build optimised (minified) bundle of `example-02-typical-customisations` customer configuration.
+
+    ```bash
+    cd /path/to/tamaro-configurations/configs/example-02-typical-customisations
+    npx -y @raisenow/tamaro-cli build
+    ```
+
+2.  Deploy it:
+
+    ```bash
+    npx -y @raisenow/tamaro-cli deploy
+    ```
+
+3.  Optionally deploy it with `WEB-123` tag:
+
+    ```bash
+    npx -y @raisenow/tamaro-cli deploy --tag WEB-123
+    ```
+
+## serve
+
+Run web-server for prebuilt bundle.
+
+Example:
+
+1.  Build optimised (minified) bundle of `example-02-typical-customisations` customer configuration.
+
+    ```bash
+    cd /path/to/tamaro-configurations/configs/example-02-typical-customisations
+    npx -y @raisenow/tamaro-cli build
+    ```
+
+2.  Serve it.
+
+    After running this command, web-server should be running on http://localhost:1234/ (port may differ).
+
+    ```bash
+    npx -y @raisenow/tamaro-cli serve
+    ```
+
+
+# Development
+
+Make sure you have installed and activated proper `node` and `npm` versions.
+
+- `node: ">= 16"`
+- `npm: ">= 8"`
+
+Clone the repo and install its dependencies:
+
+```bash
+git clone git@bitbucket.org:raisenow/tamaro-cli.git
+cd tamaro-cli
+npm ci
+```
+
+Link package source to be able to run its local version:
+
+```bash
+npm link .
+```
+
+Run the `dev` script to watch source files and automatically rebuild on changes.
+It must be running during *Tamaro CLI* development process. 
+
+```bash
+npm run dev
+```
+
+To use local linked version of *Tamaro CLI*, use it without `@raisenow/` scope, `-y` flag is also not needed:
+
+```bash
+npx tamaro-cli dev
+```

package/src/cli.ts

@@ -29,20 +29,25 @@ const cli = createCommand().name(pkg.name).version(pkg.version, '-v, --version')
 
 cli
   .command('dev')
-  .description('Run dev server for Tamaro core or customer configuration')
-  .option('--local-core', 'Load tamaro-core from localhost instead of CDN')
+  .description('Run dev web-server for Tamaro Core or customer configuration')
+  .option('--local-core', 'Load Tamaro Core from localhost instead of CDN')
   .action(async (options: DevOptions) => {
     await dev(options)
   })
 
 cli
   .command('build')
-  .description('Build Tamaro core or customer configuration for production')
-  .option('--analyze', 'Generate some build stats to "reports" folder')
-  .option('--deploy', 'Deploy to AWS')
-  .option('--latest', 'Deploy with tag "latest"')
-  .option('--serve', 'Run web-server for previously created build')
-  .option('--tag <tag>', 'Deploy widget with a specific tag')
+  .description(
+    'Build optimised (minified) bundle of Tamaro Core or customer configuration for production',
+  )
+  .option('--local-core', 'Load Tamaro Core from localhost instead of CDN')
+  .option('--analyze', 'Generate bundle statistics to "reports" folder')
+  .option(
+    '--deploy',
+    'Deploy Tamaro Core or customer configuration bundle to AWS',
+  )
+  .option('--serve', 'Run web-server for the bundle')
+  .option('--tag <tag>', 'Tag which will be used for deployment of the bundle')
   .action(async (options: BuildOptions) => {
     await build(options)
 
@@ -57,16 +62,17 @@ cli
 
 cli
   .command('deploy')
-  .description('Deploy Tamaro core or customer configuration to AWS')
-  .option('--latest', 'Deploy with tag "latest"')
-  .option('--tag <tag>', 'Deploy widget with a specific tag')
+  .description(
+    'Deploy prebuilt Tamaro Core or customer configuration bundle to AWS',
+  )
+  .option('--tag <tag>', 'Tag which will be used for deployment of the bundle')
   .action(async (options: DeployOptions) => {
     await deploy(options)
   })
 
 cli
   .command('serve')
-  .description('Run web-server for previously created build')
+  .description('Run web-server for prebuilt bundle')
   .action(async () => {
     await serve()
   })

package/src/commands/build/index.ts

@@ -5,9 +5,9 @@ import resolveBin from 'resolve-bin'
 ///////////////////////////////////////////////////////////////////////////////
 
 export type BuildOptions = {
+  localCore?: boolean
   analyze?: boolean
   deploy?: boolean
-  latest?: boolean
   tag?: string
   serve?: boolean
 }
@@ -15,9 +15,10 @@ export type BuildOptions = {
 ///////////////////////////////////////////////////////////////////////////////
 
 const prepareBuildFlags = (options: BuildOptions): string => {
-  const {analyze} = options
+  const {localCore, analyze} = options
   let flags: string[] = []
 
+  flags = localCore ? [...flags, '--env localCore'] : flags
   flags = analyze ? [...flags, '--env analyze'] : flags
 
   return flags.join(' ')

package/src/commands/deploy/index.ts

@@ -4,7 +4,6 @@ import {getIfCoreFns, getPaths, logCommand} from 'lib/helpers'
 ///////////////////////////////////////////////////////////////////////////////
 
 export type DeployOptions = {
-  latest?: boolean
   tag?: string
 }
 
@@ -13,7 +12,7 @@ export type DeployOptions = {
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const deploy = async (options: DeployOptions): Promise<void> => {
   // todo: ensure build exists
-  // todo: handle "tag" and "latest" options
+  // todo: handle "tag" option
   // todo: implement
   const {ifCore} = getIfCoreFns()
   // eslint-disable-next-line @typescript-eslint/no-unused-vars

package/src/commands/serve/index.ts

@@ -6,7 +6,7 @@ import {getIfCoreFns, getPaths, logCommand} from 'lib/helpers'
 export const serve = async (): Promise<void> => {
   const {ifCore} = getIfCoreFns()
   const paths = getPaths(ifCore)
-  const cmd = `npx http-server ${paths.appDist} --cors`
+  const cmd = `npx -y http-server ${paths.appDist} --cors --port 1234`
   logCommand(cmd)
   commandSync(cmd, {stdio: 'inherit'})
 }

package/src/lib/helpers.ts

@@ -5,8 +5,8 @@ import {notify as nodeNotify} from 'node-notifier'
 import {getIfUtils, IfUtils, IfUtilsFn} from 'webpack-config-utils'
 import columnify from 'columnify'
 import boxen from 'boxen'
-import dotenvExpand from 'dotenv-expand'
-import dotenv from 'dotenv'
+import {expand as dotenvExpand} from 'dotenv-expand'
+import {config as dotenvConfig} from 'dotenv'
 import stripIndent from 'strip-indent'
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -141,7 +141,7 @@ export const getEnvVars = (
   ifCore: IfUtilsFn,
   ifLocalCore: IfUtilsFn,
 ) => {
-  dotenvExpand(dotenv.config({path: filePath}))
+  dotenvExpand(dotenvConfig({path: filePath}))
 
   process.env.NODE_ENV ??= ifMin('production', 'development')
   process.env.BABEL_ENV ??= ifMin('production', 'development')
@@ -170,7 +170,7 @@ export const getEnvVars = (
     process.env.WIDGET_UUID = getWidgetUuid()
 
     if (ifLocalCore()) {
-      process.env.CORE_URL = `http://0.0.0.0:8080/index.js`
+      process.env.CORE_URL = `http://0.0.0.0:1234/index.js`
     } else {
       let version = process.env.CORE_VERSION
       version = version ? `@${version}` : ''
@@ -273,8 +273,7 @@ export const notify = (args: NotifyArgs): void => {
   nodeNotify({
     title,
     message,
-    // __dirname is "dist" in runtime
-    contentImage: resolveOwn('src/assets/rnw-logo.jpg'),
+    contentImage: resolveOwn('src/assets/rnw-logo.png'),
     sound: 'Funk',
   })
 }

package/src/webpack.config.ts

@@ -8,6 +8,7 @@ import webpack, {
   ProgressPlugin,
   RuleSetUseItem,
 } from 'webpack'
+import {getPortPromise} from 'portfinder'
 import {TsconfigPathsPlugin} from 'tsconfig-paths-webpack-plugin'
 import {CleanWebpackPlugin} from 'clean-webpack-plugin'
 import HtmlWebpackPlugin from 'html-webpack-plugin'
@@ -28,6 +29,7 @@ import {
   getPaths,
   logDataTable,
   moduleFileExtensions,
+  resolveApp,
   resolveOwn,
 } from 'lib/helpers'
 
@@ -47,6 +49,7 @@ const getWebpackConfig = async (env: any): Promise<Configuration> => {
   const appHtmlFiles = glob.sync(paths.appHtml)
   const envVars = getEnvVars(paths.appEnv, ifMin, ifCore, ifLocalCore)
   const {ifHmr} = getIfUtils({hmr: process.env.HMR_ENABLED === 'true'}, ['hmr'])
+  const port = await getPortPromise({port: 1234})
 
   logDataTable(paths, 'Paths')
   logDataTable(envVars.raw, 'Environment variables')
@@ -67,7 +70,6 @@ const getWebpackConfig = async (env: any): Promise<Configuration> => {
         options: {
           sourceMap: ifNotMin(),
           importLoaders: 3,
-          esModule: false,
           ...cssOptions,
         },
       },
@@ -114,7 +116,6 @@ const getWebpackConfig = async (env: any): Promise<Configuration> => {
       pathinfo: false,
       filename: ifCore('index.js', 'widget.js'),
       chunkFilename: ifMin('[name]-[contenthash:16].js', '[name].js'),
-      // assetModuleFilename: ifMin('assets/[name]-[contenthash:16][ext]', 'assets/[name][ext]'),
       assetModuleFilename: 'assets/[name]-[contenthash:16][ext]',
       crossOriginLoading: 'anonymous',
       uniqueName: process.env.WEBPACK_UNIQUE_NAME,
@@ -142,151 +143,173 @@ const getWebpackConfig = async (env: any): Promise<Configuration> => {
           use: require.resolve('source-map-loader'),
         }),
 
-        // Javascript and Typescript (Babel)
         {
-          test: /\.(js|ts)x?$/,
-          exclude: /node_modules/,
-          loader: require.resolve('babel-loader'),
-          options: {
-            babelrc: false,
-            configFile: false,
-            sourceMaps: ifNotMin(),
-            inputSourceMap: ifNotMin(),
-            presets: removeEmpty([
-              require.resolve('@babel/preset-env'),
-              [
-                require.resolve('@babel/preset-typescript'),
-                {
-                  allowDeclareFields: true,
+          oneOf: [
+            // App Javascript and Typescript (Babel)
+            // and some dependencies distributed in a non-es5 formats
+            {
+              test: /\.(js|ts)x?$/,
+              include: ifCore(
+                [
+                  resolveApp('src'),
+                  resolveApp('node_modules/micromark'),
+                  resolveApp('node_modules/decode-named-character-reference'),
+                ],
+                [resolveApp('.'), resolveApp('../../src')],
+              ),
+
+              loader: require.resolve('babel-loader'),
+              options: {
+                babelrc: false,
+                configFile: false,
+                sourceMaps: ifNotMin(),
+                inputSourceMap: ifNotMin(),
+                presets: [
+                  require.resolve('@babel/preset-env'),
+                  [
+                    require.resolve('@babel/preset-typescript'),
+                    {
+                      allowDeclareFields: true,
+                    },
+                  ],
+                  require.resolve('@babel/preset-react'),
+                ],
+                plugins: removeEmpty([
+                  [
+                    require.resolve('@babel/plugin-transform-runtime'),
+                    {
+                      corejs: {
+                        version: 3,
+                        proposals: true,
+                      },
+                      absoluteRuntime: dirname(
+                        require.resolve('@babel/runtime-corejs3/package.json'),
+                      ),
+                    },
+                  ],
+                  [
+                    require.resolve('@babel/plugin-proposal-decorators'),
+                    {
+                      legacy: true,
+                    },
+                  ],
+                  require.resolve('@babel/plugin-syntax-dynamic-import'),
+                  require.resolve('babel-plugin-lodash'),
+                  ifHmr(require.resolve('react-refresh/babel')),
+                ]),
+              },
+            },
+
+            // Other Javascript (not in app) - no transformation
+            {
+              test: /\.(js|mjs)$/,
+            },
+
+            // Styles (not modules)
+            {
+              test: /\.s?css$/,
+              exclude: /\.module\.s?css$/,
+              use: getCssLoaders({
+                modules: false,
+              }),
+            },
+
+            // Styles (modules)
+            {
+              test: /\.module\.s?css$/,
+              use: getCssLoaders({
+                modules: {localIdentName: '[local]__[hash:base64]'},
+              }),
+            },
+
+            // SVG (in HTML and styles)
+            {
+              test: /\.svg$/,
+              issuer: [/\.html$/, /\.s?css$/],
+              type: 'asset',
+              parser: {
+                dataUrlCondition: {
+                  maxSize: imageInlineSizeLimit,
                 },
-              ],
-              require.resolve('@babel/preset-react'),
-            ]),
-            plugins: removeEmpty([
-              [
-                require.resolve('@babel/plugin-transform-runtime'),
+              },
+            },
+
+            // SVG (in components)
+            {
+              test: /\.svg$/,
+              issuer: [/\.(ts|tsx|js|jsx|md|mdx)$/],
+              use: [
                 {
-                  corejs: {
-                    version: 3,
-                    proposals: true,
+                  loader: require.resolve('@svgr/webpack'),
+                  options: {
+                    svgoConfig: {
+                      plugins: [
+                        {
+                          removeHiddenElems: false,
+                          moveGroupAttrsToElems: false,
+                          collapseGroups: false,
+                        },
+                      ],
+                    },
+                    prettier: false,
+                    titleProp: true,
+                    ref: true,
                   },
-                  absoluteRuntime: dirname(
-                    require.resolve('@babel/runtime-corejs3/package.json'),
-                  ),
                 },
-              ],
-              [
-                require.resolve('@babel/plugin-proposal-decorators'),
                 {
-                  legacy: true,
+                  loader: require.resolve('url-loader'),
+                  options: {
+                    name: 'assets/[name]-[contenthash:16].[ext]',
+                    limit: imageInlineSizeLimit,
+                  },
                 },
               ],
-              require.resolve('@babel/plugin-syntax-dynamic-import'),
-              require.resolve('babel-plugin-lodash'),
-              ifHmr(require.resolve('react-refresh/babel')),
-            ]),
-          },
-        },
-
-        // Styles (not modules)
-        {
-          test: /\.s?css$/,
-          exclude: /\.module\.s?css$/,
-          use: getCssLoaders({
-            modules: false,
-          }),
-        },
-
-        // Styles (modules)
-        {
-          test: /\.module\.s?css$/,
-          use: getCssLoaders({
-            modules: {localIdentName: '[local]__[hash:base64]'},
-          }),
-        },
-
-        // SVG (in HTML)
-        {
-          test: /\.svg$/,
-          issuer: /\.html$/,
-          type: 'asset',
-          parser: {
-            dataUrlCondition: {
-              maxSize: imageInlineSizeLimit,
             },
-          },
-        },
 
-        // SVG (in components)
-        {
-          test: /\.svg$/,
-          issuer: {
-            not: [/\.html$/],
-          },
-          use: [
+            // Images and fonts
             {
-              loader: require.resolve('@svgr/webpack'),
-              options: {
-                svgoConfig: {
-                  plugins: [
-                    {
-                      removeHiddenElems: false,
-                      moveGroupAttrsToElems: false,
-                      collapseGroups: false,
-                    },
-                  ],
+              test: /\.(png|jpe?g|webp|gif|ico|ttf|eot|woff2?)$/,
+              type: 'asset',
+              parser: {
+                dataUrlCondition: {
+                  maxSize: imageInlineSizeLimit,
                 },
               },
             },
+
+            // YML
             {
-              loader: require.resolve('url-loader'),
+              test: /\.ya?ml$/,
+              use: [
+                {loader: require.resolve('json-loader')},
+                {loader: require.resolve('yaml-loader')},
+              ],
+            },
+
+            // HTML
+            {
+              test: /\.html$/,
+              loader: require.resolve('html-loader'),
               options: {
-                // name: ifMin(
-                //   'assets/[name]-[contenthash:16].[ext]',
-                //   'assets/[name].[ext]'
-                // ),
-                name: 'assets/[name]-[contenthash:16].[ext]',
-                limit: imageInlineSizeLimit,
+                minimize: false,
               },
             },
-          ],
-        },
 
-        // Images and fonts
-        {
-          test: /\.(png|jpe?g|webp|gif|ico|ttf|eot|woff2?)$/,
-          type: 'asset',
-          parser: {
-            dataUrlCondition: {
-              maxSize: imageInlineSizeLimit,
+            // All other files - fallback
+            // This must be the latest rule!
+            {
+              exclude: [/^$/, /\.(js|jsx|ts|tsx|mjs)$/, /\.html$/, /\.json$/],
+              type: 'asset/resource',
             },
-          },
-        },
-
-        // YML
-        {
-          test: /\.ya?ml$/,
-          use: [
-            {loader: require.resolve('json-loader')},
-            {loader: require.resolve('yaml-loader')},
           ],
         },
-
-        // HTML
-        {
-          test: /\.html$/,
-          loader: require.resolve('html-loader'),
-          options: {
-            esModule: false,
-            minimize: false,
-          },
-        },
       ]),
     },
 
     devtool: ifMin(false, 'cheap-module-source-map'),
 
     devServer: {
+      port,
       static: false,
       historyApiFallback: {
         disableDotRule: true,