Starting a New App

Generating the Base App Template

  Usage
    enact create [options] []

  Arguments
    directory         Optional project destination directory
                          (default: current working directory)

  Options
    -t, --template    Specific template to use
    -local            Include @enact/cli locally in the project
    -verbose          Verbose output logging

This will generate a basic app based on the Sandstone project template, complete with Enact libraries, React, and a fully configured package.json.

Enact Project Settings

The @enact/cli tool will check the project’s package.json looking for an optional enact object for a few customization options:

• template [string] - Filepath to an alternate HTML template to use with the Webpack html-webpack-plugin.
• isomorphic [string] - Alternate filepath to a custom isomorphic-compatible entry point. Not needed if main entry point is already isomorphic-compatible.
• title [string] - Title text that should be put within the HTML’s <title></title> tags. Note: if this is a webOS-project, the title will, by default, be auto-detected from the appinfo.json content.
• theme [object] - A simplified string name to extrapolate fontGenerator, ri, and screenTypes preset values from. For example, "sandstone".
• fontGenerator [string] - Filepath to a CommonJS fontGenerator module which will build locale-specific font CSS to inject into the HTML. By default, will use any preset for a specified theme or fallback to sandstone.
• ri [object] - Resolution independence options to be forwarded to the postcss-resolution-independence. By default, will use any preset for a specified theme or fallback to sandstone.
  • baseSize [number] - The root font-size to use when converting the value of the base unit to a resolution-independent unit. For example, when baseSize is set to 24, 48px in the LESS file will be converted to 2rem.
• screenTypes [array|string] - Array of 1 or more screentype definitions to be used with prerender HTML initialization. Can alternatively reference a json filepath to read for screentype definitions. By default, will use any preset for a specified theme or fallback to sandstone.
• nodeBuiltins [object] - Configuration settings for polyfilling NodeJS built-ins. See node webpack option.
• resolveFallback [object] - Configuration settings for redirecting module requests when normal resolving fails. See resolve.fallback webpack option.
• externalStartup [boolean] - Flag whether to externalize the startup/update js that is normally inlined within prerendered app HTML output.
• forceCSSModules [boolean] - Flag whether to force all LESS/CSS to be processed in a modular context (not just the *.module.css and *.module.less files).
• deep [string|array] - 1 or more JavaScript conditions that, when met, indicate deeplinking and any prerender should be discarded.
• target [string|array] - A build-type generic preset string (see target webpack option) or alternatively a specific browserslist array of desired targets.
• proxy [string] - Proxy target during project serve to be used within the http-proxy-middleware.

For example:

{
	...
	"enact": {
		"theme": "sandstone",
		"resolveFallback": {
			fs: false,
			net: false,
			tls: false
		},
		"ri": {
			"baseSize": 24
		}
	}
	...
}

Available npm Tasks

Included within the project template are a number of npm tasks available, with each mapped to Enact CLI commands:

• npm run serve - Packages and hosts the app on a local http server using webpack-dev-server. Supports hot module replacement and inline updates as the source code changes.
• npm run pack - Packages the app into ./dist in development mode (unminified code, with any applicable development code).
• npm run pack-p - Packages the app into ./dist in production mode (minified code, with development code dropped).
• npm run watch - Packages in development mode and sets up a watcher that will rebuild the app whenever the source code changes.
• npm run test - Builds and executes any test spec files within the project.
• npm run lint - Lints the project’s JavaScript files according to the Enact ESLint configuration settings and optionally TSLint.
• npm run clean - Deletes the ./dist directory

That’s it! Now you have a fully functioning app environment.