enact-dev

enact-dev

A standalone dev environment for Enact apps using Webpack, Babel, React, and a collection of other tools.

Installation

All that's needed to install enact-dev is to use npm to install it globally. For Linux sudo may be required.

npm install -g enact-dev

Note: Node 6.x+ is highly recommended for optimum speed and efficiency, however anything since Node 4.x is compatible.

Creating a new App

The only time you're ever want to directly use the Enact CLI is when you want to create a new project.

enact create [directory]

This will generate a basic App template, complete with npm scripts and dependencies setup. If no directory path is specified, it will be generated within the working directory.

Advanced: If you've used npm link on separate installations of the Enact repo, you can include --link to the init command and NPM will symlink your Enact repo, rather than reinstall. Additionally, you can link in the Enact dependencies post-install via the enact link command.

Available App Scripts

Within the project directory, you can run:

npm run serve

Builds and serves the app in the development mode.
Open http://localhost:8080 to view it in the browser.

The page will reload if you make edits.

npm run pack and npm run pack-p

Builds the project in the working directory. Specifically, pack builds in development mode with code un-minified and with debug code included, whereas pack-p builds in production mode, with everything minified and optimized for performance. Be sure to avoid shipping or performance testing on development mode builds.

npm run watch

Builds the project in development mode and keeps watch over the project directory. Whenever files are changed, added, or deleted, the project will automatically get rebuilt using an active shared cache to speed up the process. This is similar to the serve task, but without the http server.

npm run clean

Deletes previous build fragments from ./dist.

npm run lint

Runs the Enact configuration of Eslint on the project for syntax analysis.

npm run test, npm run test-json, and npm run test-watch

These tasks will execute all valid tests (files that end in -specs.js) that are within the project directory. The test is a standard execution pass, test-json uses a json reporter for output, and test-watch will set up a watcher to re-execute tests when files change.

npm run license

Outputs a JSON representation of the licenses for modules referenced by the current project as well as any licenses of modules used by enact-dev that may be included in a production build of an app.

Enact Build Options

The enact-dev 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 [boolean|string] - If true, it indicates the default entrypoint is isomorphic-compatible (and can be built via the --isomorphic enact-dev flag). If the value is a string, then it will use that value as a filepath to a custom isomorphic-compatible entrypoint.
• 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.
• ri [object] - Resolution independence options to be forwarded to the LESS plugin.
• node [object] - Configuration settings for polyfilling NodeJS built-ins. See node webpack option.
• proxy [string] - Proxy target during project serve to be used within the http-proxy-middleware.

For example:

{
	...
	"enact": {
		"isomorphic": true,
		"ri": {
			"baseSize":24
		}
	}
	...
} 

Displaying Lint Output in the Editor

Some editors, including Sublime Text, Atom, and Visual Studio Code, provide plugins for ESLint.

They are not required for linting. You should see the linter output right in your terminal. However, if you prefer the lint results to appear right in your editor, there are some extra steps you can do.

You would need to install an ESLint plugin for your editor first.

A note for Atom linter-eslint users

If you are using the Atom linter-eslint plugin, make sure that Use global ESLint installation option is checked:

Then, you will need to install some packages globally:

npm install -g eslint eslint-plugin-react eslint-plugin-babel babel-eslint eslint-plugin-enact eslint-config-enact

We recognize that this is suboptimal, but it is currently required due to the way we hide the ESLint dependency. The ESLint team is already working on a solution to this so this may become unnecessary in a couple of months.

Copyright and License Information

Unless otherwise specified, all content, including all source code files and documentation files in this repository are:

Copyright (c) 2012-2017 LG Electronics

Unless otherwise specified or set forth in the NOTICE file, all content, including all source code files and documentation files in this repository are: Licensed under the BSD License (the "License"); you may not use this content except in compliance with the License. You may obtain a copy of the License at

https://opensource.org/licenses/BSD-3-Clause

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

Portions of this project are based upon create-react-app, Copyright (C) 2016-present Facebook, Inc.

Changelog

0.9.0 (August 21, 2017)

Dependencies updated to latest release, including support for Webpack 3.x. Codebase updated for ES6 syntax and the minimum version is NodeJS is now 6.4.0.

create

• Template updated for Enact 1.7.0 and React 15.6.1

pack

• Upgraded to Webpack 3 and associated loaders/config layout.
• Removed url-loader usage in favour of strictly file-loader only.
• Switched from implicit string loader names to explicit relative loader filepath resolving.
• Prevent removal of outdated CSS properties by autoprefixer in postcss
• Prerenders moonstone font-face declarations into HTML head to preload fonts.
• Output error messages after build and have watcher mode disable bailing to ensure webpack doesn't exit during watching.
• Properly bail on error and properly avoid bailing on --watch flag.
• Disable module traces when errors occur.
• Show any warnings successful pack executions (not just when there are errors).
• Uses the react-dev-utils eslint formatter for displaying eslint warnings and errors.
• Limited autoprefixer flexbox prefixing to final and IE versions of flexbox implementation.
• Added support for postcss-flexbugs-fixes to automatically fix known platform-specific flexbox issues with workarounds.
• Disabled webpack performance output.

serve

• Support greater dev server functionality and UI from react-dev-utils.
• Integrated support for react-error-overlay.
• Fixed module access failure when rebuilding after editing LESS/CSS.

test

• Activity timeout extended for larger testbases to 60 seconds.
• Removed unneeded extract-text-webpack-plugin usage.
• Carried over url-loader and postcss changes from pack configuration.