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 extrapolatefontGenerator
,ri
, andscreenTypes
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 moonstonescreenTypes
[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. Seenode
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 (seetarget
webpack option) or alternatively a specific browserlist array of desired targets.proxy
[string] - Proxy target during projectserve
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.