Enact

Starting a New App

Generating the Base App Template

  Usage
    enact create [options] [<directory>]

  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 Moonstone 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 entrypoint. Not needed if main entrypoint 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 by default will 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, "moonstone"
  • 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 moonstone.
  • ri [object] - Resolution independence options to be forwarded to the LESS plugin. By default will use any preset for a specified theme or fallback to moonstone
  • 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 definitons. By default will use any preset for a specified theme or fallback to moonstone.
  • nodeBuiltins [object] - Configuration settings for polyfilling NodeJS built-ins. See node webpack option.
  • 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 browserlist array of desired targets.
  • proxy [string] - Proxy target during project serve to be used within the http-proxy-middleware.

For example:

{
	...
	"enact": {
		"theme": "moonstone",
		"nodeBuiltins": {
			fs: 'empty',
			net: 'empty',
			tls: 'empty'
		}
	}
	...
}

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.
  • npm run clean - Deletes the ./dist directory

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