@enact/cli 5.0.0-alpha.5 → 5.0.1

package/.travis.yml

@@ -1,12 +1,10 @@
+dist: focal
 language: node_js
 node_js:
-    - "14"
+    - node
 sudo: false
-cache:
-  directories:
-    - $(npm config get cache)
 install:
-    - npm config set prefer-offline true
+    - npm config set prefer-offline false
     - npm install
 
 script:

package/CHANGELOG.md

@@ -1,3 +1,32 @@
+## 5.0.1 (August 30, 2022)
+
+### pack
+
+* Updated @enact/dev-utils fixing isomorphic build with the latest language list.
+* Fixed Enact project setting `forceCSSModules` to enforce modular CSS.
+
+## 5.0.0 (July 19, 2022)
+
+* Updated dependencies.
+
+### pack
+
+* Fixed build failure when `.env` file exists.
+* Fixed `snapshot_blob.bin` file is not listed on the build results.
+
+## 5.0.0-rc.1 (Jun 23, 2022)
+
+### serve
+
+* Fixed `enact serve` fails to open another port when the default port is busy.
+
+### pack
+
+* Fixed `core-js` version to `3.22.8` for compatibility.
+* Added `ENACT_PACK_ISOMORPHIC` as a global variable to use `hydrateRoot` instead of `createRoot` from app when isomorphic build.
+* Added `ignoreWarning` config to ignore warnings from SnapshotPlugin.
+* Updated webpack config to support `sass-loader` for opt-in support of SASS/SCSS files.
+
 ## 5.0.0-alpha.5 (May 31, 2022)
 
 * Updated the `lockfileVersion` of npm-shrinkwrap file to v2.

package/README.md

@@ -92,7 +92,6 @@ For example:
 }
 ```
 
-
 ## Displaying Lint Output in the Editor
 
 Some editors, including Sublime Text, Atom, and Visual Studio Code, provide plugins for ESLint.
@@ -104,6 +103,21 @@ You would need to install an ESLint plugin for your editor first.
 Ever since ESLint 6, global installs of ESLint configs are no longer supported.
 To work around this new limitation, while still supporting in-editor linting, we've created a new [eslint-config-enact-proxy](https://github.com/enactjs/eslint-config-enact-proxy) package.
 The [eslint-config-enact-proxy](https://github.com/enactjs/eslint-config-enact-proxy) acts like a small proxy config, redirecting ESLint to use a globally-installed Enact ESLint config.
+`eslint-config-enact-proxy` needs to be installed locally on a project to enable in-editor linting:
+
+```sh
+npm install --save-dev eslint-config-enact-proxy
+```
+
+Also, you need to modify `eslintConfig` property in `package.json`:
+
+```json
+  "eslintConfig": {
+    "extends": "enact-proxy"
+  },
+```
+>**NOTE**: For strict mode, use `"extends": "enact-proxy/strict"`.
+
 In order for in-editor linting to work with our updated ESLint config, you'll need to upgrade to ESLint 7 or later. This can be installed globally by running:
 
 ```sh
@@ -113,7 +127,7 @@ npm install -g eslint
 Then, you will need to uninstall any previous globally-installed Enact linting package (everything but eslint itself):
 
 ```sh
-npm remove -g eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-babel @babel/eslint-parser eslint-plugin-jest eslint-plugin-enact eslint-config-enact
+npm uninstall -g eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-babel @babel/eslint-parser eslint-plugin-jest eslint-plugin-enact eslint-config-enact
 ```
 
 ## Copyright and License Information

package/commands/pack.js

@@ -19,7 +19,7 @@ const minimist = require('minimist');
 const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
 const printBuildError = require('react-dev-utils/printBuildError');
 const stripAnsi = require('strip-ansi');
-const {ProgressPlugin, webpack} = require('webpack');
+const webpack = require('webpack');
 const {optionParser: app, mixins, configHelper: helper} = require('@enact/dev-utils');
 
 function displayHelp() {
@@ -147,7 +147,7 @@ function copyPublicFolder(output) {
 // Print a detailed summary of build files.
 function printFileSizes(stats, output) {
 	const assets = stats
-		.toJson({all: false, assets: true})
+		.toJson({all: false, assets: true, cachedAssets: true})
 		.assets.filter(asset => /\.(js|css|bin)$/.test(asset.name))
 		.map(asset => {
 			const size = fs.statSync(path.join(output, asset.name)).size;
@@ -250,7 +250,11 @@ function api(opts = {}) {
 
 	// Do this as the first thing so that any code reading it knows the right env.
 	const configFactory = require('../config/webpack.config');
-	const config = configFactory(opts.production ? 'production' : 'development', opts['ilib-additional-path']);
+	const config = configFactory(
+		opts.production ? 'production' : 'development',
+		opts.isomorphic,
+		opts['ilib-additional-path']
+	);
 
 	// Set any entry path override
 	if (opts.entry) helper.replaceMain(config, path.resolve(opts.entry));
@@ -258,8 +262,6 @@ function api(opts = {}) {
 	// Set any output path override
 	if (opts.output) config.output.path = path.resolve(opts.output);
 
-	if (opts.verbose) opts.ProgressPlugin = ProgressPlugin;
-
 	mixins.apply(config, opts);
 
 	// Remove all content but keep the directory so that

package/commands/serve.js

@@ -93,7 +93,7 @@ function hotDevServer(config, fastRefresh) {
 	return config;
 }
 
-function devServerConfig(host, protocol, publicPath, proxy, allowedHost) {
+function devServerConfig(host, port, protocol, publicPath, proxy, allowedHost) {
 	let https = false;
 	const {SSL_CRT_FILE, SSL_KEY_FILE} = process.env;
 	if (protocol === 'https' && [SSL_CRT_FILE, SSL_KEY_FILE].every(f => f && fs.existsSync(f))) {
@@ -127,38 +127,59 @@ function devServerConfig(host, protocol, publicPath, proxy, allowedHost) {
 		// Enable HTTPS if the HTTPS environment variable is set to 'true'
 		https,
 		host,
+		port,
 		// Allow cross-origin HTTP requests
 		headers: {
 			'Access-Control-Allow-Origin': '*',
 			'Access-Control-Allow-Methods': '*',
 			'Access-Control-Allow-Headers': '*'
 		},
-		static: {
-			// By default WebpackDevServer serves physical files from current directory
-			// in addition to all the virtual build products that it serves from memory.
-			// This is confusing because those files won’t automatically be available in
-			// production build folder unless we copy them. However, copying the whole
-			// project directory is dangerous because we may expose sensitive files.
-			// Instead, we establish a convention that only files in `public` directory
-			// get served. Our build script will copy `public` into the `build` folder.
-			// In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
-			// <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
-			// In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
-			// Note that we only recommend to use `public` folder as an escape hatch
-			// for files like `favicon.ico`, `manifest.json`, and libraries that are
-			// for some reason broken when imported through webpack. If you just want to
-			// use an image, put it in `src` and `import` it from JavaScript instead.
-			directory: path.resolve(app.context, 'public'),
-			publicPath: publicPath,
-			// By default files from `contentBase` will not trigger a page reload.
-			watch: {
-				// Reportedly, this avoids CPU overload on some systems.
-				// https://github.com/facebook/create-react-app/issues/293
-				// src/node_modules is not ignored to support absolute imports
-				// https://github.com/facebook/create-react-app/issues/1065
-				ignored: ignoredFiles(path.resolve(app.context, 'src'))
+		static: [
+			{
+				// By default WebpackDevServer serves physical files from current directory
+				// in addition to all the virtual build products that it serves from memory.
+				// This is confusing because those files won’t automatically be available in
+				// production build folder unless we copy them. However, copying the whole
+				// project directory is dangerous because we may expose sensitive files.
+				// Instead, we establish a convention that only files in `public` directory
+				// get served. Our build script will copy `public` into the `build` folder.
+				// In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
+				// <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
+				// In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
+				// Note that we only recommend to use `public` folder as an escape hatch
+				// for files like `favicon.ico`, `manifest.json`, and libraries that are
+				// for some reason broken when imported through webpack. If you just want to
+				// use an image, put it in `src` and `import` it from JavaScript instead.
+				directory: path.resolve(app.context, 'public'),
+				publicPath,
+				// By default files from `contentBase` will not trigger a page reload.
+				watch: {
+					// Reportedly, this avoids CPU overload on some systems.
+					// https://github.com/facebook/create-react-app/issues/293
+					// src/node_modules is not ignored to support absolute imports
+					// https://github.com/facebook/create-react-app/issues/1065
+					ignored: [
+						ignoredFiles(path.resolve(app.context, 'src')),
+						'/node_modules[\\/](?!@enact[\\/](?!.*node_modules))/'
+					]
+				}
+			},
+			{
+				directory: path.resolve(app.context, '__mocks__'),
+				publicPath,
+				// By default files from `contentBase` will not trigger a page reload.
+				watch: {
+					// Reportedly, this avoids CPU overload on some systems.
+					// https://github.com/facebook/create-react-app/issues/293
+					// src/node_modules is not ignored to support absolute imports
+					// https://github.com/facebook/create-react-app/issues/1065
+					ignored: [
+						ignoredFiles(path.resolve(app.context, 'src')),
+						'/node_modules[\\/](?!@enact[\\/](?!.*node_modules))/'
+					]
+				}
 			}
-		},
+		],
 		client: {
 			webSocketURL: {
 				// Enable custom sockjs pathname for websocket connection to hot reloading server.
@@ -249,8 +270,7 @@ function serve(config, host, port, open) {
 		// Serve webpack assets generated by the compiler over a web sever.
 		const serverConfig = Object.assign(
 			{},
-			config.devServer,
-			devServerConfig(host, protocol, publicPath, proxyConfig, urls.lanUrlForConfig)
+			devServerConfig(host, resolvedPort, protocol, publicPath, proxyConfig, urls.lanUrlForConfig)
 		);
 		const devServer = new WebpackDevServer(serverConfig, compiler);
 		// Launch WebpackDevServer.
@@ -304,8 +324,8 @@ function api(opts) {
 	const config = hotDevServer(configFactory('development'), fastRefresh);
 
 	// Tools like Cloud9 rely on this.
-	const host = process.env.HOST || opts.host || config.devServer.host || '0.0.0.0';
-	const port = parseInt(process.env.PORT || opts.port || config.devServer.port || 8080);
+	const host = process.env.HOST || opts.host || '0.0.0.0';
+	const port = parseInt(process.env.PORT || opts.port || 8080);
 
 	// Start serving
 	if (['node', 'async-node', 'webworker'].includes(app.environment)) {

package/config/dotenv.js

@@ -3,7 +3,7 @@
 const fs = require('fs');
 const path = require('path');
 const dotenv = require('dotenv');
-const expand = require('dotenv-expand');
+const {expand} = require('dotenv-expand');
 
 // Loads all required .env files in correct order, for a given mode.
 // See https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use

package/config/jest/jest.config.js

@@ -76,15 +76,15 @@ module.exports = {
 	testURL: 'http://localhost',
 	transform: {
 		'^.+\\.(js|jsx|ts|tsx)$': require.resolve('./babelTransform'),
-		'^.+\\.(css|less)$': require.resolve('./cssTransform.js'),
-		'^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|less|json)$)': require.resolve('./fileTransform')
+		'^.+\\.(css|less|sass|scss)$': require.resolve('./cssTransform.js'),
+		'^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|less|sass|scss|json)$)': require.resolve('./fileTransform')
 	},
 	transformIgnorePatterns: [
 		'[/\\\\]node_modules[/\\\\](?!@enact).+\\.(js|jsx|mjs|cjs|ts|tsx)$',
-		'^.+\\.module\\.(css|less)$'
+		'^.+\\.module\\.(css|less|sass|scss)$'
 	],
 	moduleNameMapper: {
-		'^.+\\.module\\.(css|less)$': require.resolve('identity-obj-proxy'),
+		'^.+\\.module\\.(css|less|sass|scss)$': require.resolve('identity-obj-proxy'),
 		'^@testing-library/jest-dom$': require.resolve('@testing-library/jest-dom'),
 		'^@testing-library/react$': require.resolve('@testing-library/react'),
 		'^@testing-library/user-event$': require.resolve('@testing-library/user-event'),

package/config/webpack.config.js

@@ -41,7 +41,7 @@ const createEnvironmentHash = require('./createEnvironmentHash');
 
 // This is the production and development configuration.
 // It is focused on developer experience, fast rebuilds, and a minimal bundle.
-module.exports = function (env, ilibAdditionalResourcesPath) {
+module.exports = function (env, isomorphic = false, ilibAdditionalResourcesPath) {
 	process.chdir(app.context);
 
 	// Load applicable .env files into environment variables.
@@ -100,22 +100,18 @@ module.exports = function (env, ilibAdditionalResourcesPath) {
 			process.env.INLINE_STYLES ? require.resolve('style-loader') : MiniCssExtractPlugin.loader,
 			{
 				loader: require.resolve('css-loader'),
-				options: Object.assign(
-					{importLoaders: preProcessor ? 2 : 1, sourceMap: shouldUseSourceMap},
-					cssLoaderOptions,
-					{
-						url: {
-							filter: url => {
-								// Don't handle absolute path urls
-								if (url.startsWith('/')) {
-									return false;
-								}
-
-								return true;
+				options: Object.assign({sourceMap: shouldUseSourceMap}, cssLoaderOptions, {
+					url: {
+						filter: url => {
+							// Don't handle absolute path urls
+							if (url.startsWith('/')) {
+								return false;
 							}
+
+							return true;
 						}
 					}
-				)
+				})
 			},
 			{
 				// Options for PostCSS as we reference these options twice
@@ -128,7 +124,7 @@ module.exports = function (env, ilibAdditionalResourcesPath) {
 						// https://github.com/facebook/create-react-app/issues/2677
 						ident: 'postcss',
 						plugins: [
-							useTailwind && require('tailwindcss'),
+							useTailwind && 'tailwindcss',
 							// Fix and adjust for known flexbox issues
 							// See https://github.com/philipwalton/flexbugs
 							'postcss-flexbugs-fixes',
@@ -176,6 +172,14 @@ module.exports = function (env, ilibAdditionalResourcesPath) {
 			}
 		});
 
+	const getScssStyleLoaders = cssLoaderOptions =>
+		getStyleLoaders(cssLoaderOptions, {
+			loader: require.resolve('sass-loader'),
+			options: {
+				sourceMap: shouldUseSourceMap
+			}
+		});
+
 	const getAdditionalModulePaths = paths => {
 		if (!paths) return [];
 		return Array.isArray(paths) ? paths : [paths];
@@ -185,6 +189,8 @@ module.exports = function (env, ilibAdditionalResourcesPath) {
 		mode: isEnvProduction ? 'production' : 'development',
 		// Don't attempt to continue if there are any errors.
 		bail: true,
+		// Webpack noise constrained to errors and warnings
+		stats: 'errors-warnings',
 		// Use source maps during development builds or when specified by GENERATE_SOURCEMAP
 		devtool: shouldUseSourceMap && (isEnvProduction ? 'source-map' : 'cheap-module-source-map'),
 		// These are the "entry points" to our application.
@@ -241,6 +247,13 @@ module.exports = function (env, ilibAdditionalResourcesPath) {
 		infrastructureLogging: {
 			level: 'none'
 		},
+		ignoreWarnings: [
+			// We ignore 'Module not found' warnings from SnapshotPlugin
+			{
+				module: /SnapshotPlugin/,
+				message: /Module not found/
+			}
+		],
 		resolve: {
 			// These are the reasonable defaults supported by the React/ES6 ecosystem.
 			extensions: ['.js', '.mjs', '.jsx', '.ts', '.tsx', '.json'].filter(
@@ -305,9 +318,9 @@ module.exports = function (env, ilibAdditionalResourcesPath) {
 						{
 							test: /\.module\.css$/,
 							use: getStyleLoaders({
+								importLoaders: 1,
 								modules: {
-									getLocalIdent,
-									mode: 'local'
+									getLocalIdent
 								}
 							})
 						},
@@ -316,9 +329,9 @@ module.exports = function (env, ilibAdditionalResourcesPath) {
 							// The `forceCSSModules` Enact build option can be set true to universally apply
 							// modular CSS support.
 							use: getStyleLoaders({
+								importLoaders: 1,
 								modules: {
-									...(app.forceCSSModules ? {getLocalIdent} : {}),
-									mode: 'icss'
+									...(app.forceCSSModules ? {getLocalIdent} : {mode: 'icss'})
 								}
 							}),
 							// Don't consider CSS imports dead code even if the
@@ -330,22 +343,43 @@ module.exports = function (env, ilibAdditionalResourcesPath) {
 						{
 							test: /\.module\.less$/,
 							use: getLessStyleLoaders({
+								importLoaders: 2,
 								modules: {
-									getLocalIdent,
-									mode: 'local'
+									getLocalIdent
 								}
 							})
 						},
 						{
 							test: /\.less$/,
 							use: getLessStyleLoaders({
+								importLoaders: 2,
 								modules: {
-									...(app.forceCSSModules ? {getLocalIdent} : {}),
-									mode: 'icss'
+									...(app.forceCSSModules ? {getLocalIdent} : {mode: 'icss'})
 								}
 							}),
 							sideEffects: true
 						},
+						// Opt-in support for CSS Modules, but using SASS
+						// using the extension .module.scss or .module.sass
+						{
+							test: /\.module\.(scss|sass)$/,
+							use: getScssStyleLoaders({
+								importLoaders: 3,
+								modules: {
+									getLocalIdent
+								}
+							})
+						},
+						// Opt-in support for SASS (using .scss or .sass extensions)
+						{
+							test: /\.(scss|sass)$/,
+							use: getScssStyleLoaders({
+								importLoaders: 3,
+								modules: {
+									...(app.forceCSSModules ? {getLocalIdent} : {mode: 'icss'})
+								}
+							})
+						},
 						// "file" loader handles on all files not caught by the above loaders.
 						// When you `import` an asset, you get its output filename and the file
 						// is copied during the build process.
@@ -365,12 +399,6 @@ module.exports = function (env, ilibAdditionalResourcesPath) {
 				}
 			].filter(Boolean)
 		},
-		// Specific webpack-dev-server options.
-		devServer: {
-			// Broadcast http server on the localhost, port 8080.
-			host: '0.0.0.0',
-			port: 8080
-		},
 		// Target app to build for a specific environment (default 'browserslist')
 		target: app.environment,
 		// Optional configuration for polyfilling NodeJS built-ins.
@@ -450,7 +478,10 @@ module.exports = function (env, ilibAdditionalResourcesPath) {
 			// Otherwise React will be compiled in the very slow development mode.
 			new DefinePlugin({
 				'process.env.NODE_ENV': JSON.stringify(isEnvProduction ? 'production' : 'development'),
-				'process.env.PUBLIC_URL': JSON.stringify(publicPath)
+				'process.env.PUBLIC_URL': JSON.stringify(publicPath),
+				// Define ENACT_PACK_ISOMORPHIC global variable to determine to use
+				// `hydrateRoot` for isomorphic build and `createRoot` for non-isomorphic build by app.
+				ENACT_PACK_ISOMORPHIC: isomorphic
 			}),
 			// Inject prefixed environment variables within code, when used
 			new EnvironmentPlugin(Object.keys(process.env).filter(key => /^(REACT_APP|WDS_SOCKET)/.test(key))),

package/docs/building-apps.md

@@ -104,6 +104,98 @@ npm install --save typescript @types/react @types/react-dom @types/jest
 
 Optionally, [ESLint](https://eslint.org) can be installed globally or locally and configured within a project to enable linting support within the `enact lint` command.
 
+## Sass Support
+
+CSS stylesheets could get larger and more complex as you develop. To help and enrich the styling of your apps, there are great CSS preprocessors
+out there.  Enact CLI provides [LESS](https://lesscss.org) as the default and [Sass](https://sass-lang.com) support is an optional feature since Enact CLI 5.0.0.
+
+To use Sass, install Sass globally:
+
+```bash
+npm install -g sass
+```
+
+Now you can rename `src/App.css` to `src/App.scss` or `src/App.sass` and for using CSS modules, `src/App.module.scss` or `src/App.module.sass`. And update `src/App.js` to import `src/App.scss`. Enact CLI will compile these files properly through webpack for you.
+
+More information can be found [here](https://sass-lang.com/guide) to learn about Sass.
+
+## Tailwind CSS Support
+
+Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file.
+Enact CLI supports to use Tailwind CSS as an optional feature since Enact CLI 5.0.0.
+
+To use Tailwindcss, install Tailwindcss globally:
+
+```bash
+npm install -g tailwindcss
+```
+
+And then run the init command to generate tailwind.config.js in your app:
+
+```bash
+npx tailwindcss init
+```
+
+Add the paths to all of your template files in your tailwind.config.js file.
+
+```js
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+```
+
+Create `src/tailwind.css` file and add the @tailwind directives for each of Tailwind’s layers to your file.
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+Import `src/tailwind.css` into your `src/index.js` file.
+
+```js
+import {createRoot} from 'react-dom/client';
+import App from './App';
+import './tailwind.css';
+
+const appElement = (<App />);
+...
+```
+
+Now you can start using Tailwind’s utility classes to style your content.
+Here is the example.
+
+```js
+const MainPanel = kind({
+    name: 'MainPanel',
+ 
+    render: (props) => (
+        <Panel {...props}>
+            <p className="text-3xl font-bold underline">
+                Edit src/views/MainPanel.js and save to reload.
+            </p>
+        </Panel>
+    )
+});
+```
+
+More information can be found [here](https://tailwindcss.com/docs) to learn about tailwindcss.
+
+### Troubleshooting
+If you receive an error when building the app that says `Cannot find module: 'typescript/sass/tailwindcss'` after installing the modules above(e.g. `typescript`, `sass`, or `tailwindcss`) globally,
+try to set `NODE_PATH` to point global node_modules directory like below.
+
+```bash
+export NODE_PATH=/path/to/your/global/node_modules
+```
+
 ## Isomorphic Support & Prerendering
 By using the isomorphic code layout option, your project bundle will be outputted in a versatile universal code format allowing potential usage outside the browser. The Enact CLI takes advantage of this mode by additionally generating an HTML output of your project and embedding it directly with the resulting **index.html**. By default, isomorphic mode will attempt to prerender only `en-US`, however with the `--locales` option, a wide variety of locales can be specified and prerendered. More details on isomorphic support and its limitations can be found [here](./isomorphic-support.md).
 

package/docs/isomorphic-support.md

@@ -31,6 +31,32 @@ npm pack -- --isomorphic
 npm pack-p -- --isomorphic
 ```
 
+If you are using React18, you need to call `hydrateRoot` instead of `createRoot` to hydrate prerendered HTML.  
+Enact CLI provides a global variable `ENACT_PACK_ISOMORPHIC` to selectively call those two APIs in your app's `index.js`.
+If you build with isomorphic option, `ENACT_PACK_ISOMORPHIC` will be `true`, otherwise `false`.  
+For more detailed information, please refer to the [React 18 migration guide](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis).
+
+Whithin your **src/index.js** file, add a conditional statement to render or hydrate your app:
+```js
+/* global ENACT_PACK_ISOMORPHIC */
+import {createRoot, hydrateRoot} from 'react-dom/client';
+
+import App from './App';
+
+const appElement = (<App />);
+
+// In a browser environment, render the app to the document.
+if (typeof window !== 'undefined') {
+	if (ENACT_PACK_ISOMORPHIC) {
+		hydrateRoot(document.getElementById('root'), appElement);
+	} else {
+		createRoot(document.getElementById('root')).render(appElement);
+	}
+}
+
+export default appElement;
+```
+
 ### When to Build Isomorphically
 By default, the Enact CLI will not use isomorphic code layout, and it should not be considered part of the regular development workflow. It is advisable to only build in isomorphic format when you want to test isomorphic features or in production mode builds.