Some web browsers, and the Java 8 Nashorn JavaScript engine, do not support ES6 without a transpiler like Babel. The purpose of this starter kit is to enable the use of ES6 and/or JSX in XP applications. This starter kit contains a webjar dependency that will download the React files when the app is built. It also contains the required folder structure for creating an app to run on Enonic XP.
This project's build.gradle file contains a task that will transpile JS files with extension, different from the default .js, e.g. .es6 or .jsx. For example, if a part is named "my-part" then the controller should be named my-part.es6 and it will be transpiled into my-part.js. The transpiled files can be found in the project's build folder.
All references to .es6 and .jsx files should use the .js extension. For example, a client side file named utilities.es6 would be included in a script element like this: src="utilities.js".
To use React in the project, include the react.min.js and react-dom.min.js files with a <script> element in your page. These files are included by the webjar dependency. You won't see these files in your project's assets folder, but they will be accessible at /src/main/resources/assets/react/0.14.7/.
If React and JSX will not be used in your project, simply make the following edits to the build.gradle file: remove the reference to the React webjar dependency and remove references to .jsx and react in the babelJs task. Also remove the line with babel-preset-react in the package.json file.
The target environment is set to ES5 (that is supported by node.js v0.12.0). If you want to transpile the client side files only, you can change the target environment in .browserslistrc. For more information, read the official Browserslist documentation. Enviroment list can be tested here.
Even when XP is started in dev-mode, transpiling does not occur upon changes to .es6 or .jsx files. But these files can be watched so that the babelJs task will be run automatically. Open the terminal and enter ./gradlew babelJs -Pwatch. There should be at least one change in a watched file before running the task with -Pwatch or else the task may complete and stop watching as expected.
You first need to install Enonic CLI and choose starter-babel from the list of starters when asked. Then run the following commands to build and deploy it:
~ $ enonic project create
... Answer wizard question
~ $ cd <project-folder>
~/new-project $ enonic project deployYour brand new app should now be up and running on http://localhost:8080
To get started, use the toolbox script to initiate your project:
~ $ mkdir new-project
~ $ cd new-project
~/new-project $ [$XP_INSTALL]/toolbox/toolbox.sh init-project -n com.example.name -r starter-babel| Version | XP version |
|---|---|
| 1.0.0 | 6.4.0 - 6.11.1 |
| 1.1.0 | 6.4.0 - |
| 1.2.0 | 6.12.0+ |
| 1.3.0 | 6.12.0+ |
| 1.4.0 | 6.15.0+ |
| 1.5.0 | 7.0.0 |
The React files are added with a WebJar dependency in build.gradle and will be downloaded the first time the app is built. They can be viewed in the project's /build/webjars/META-INF/resources/react folder, but they are accessed as if they were in the project's assets/react/<version>/ folder. To use a different version of React, just update the version number in build.gradle (make sure that it is listed on the WebJar site). To add React manually, just remove this WebJar dependency in build.gradle. React files can then be manually added to /src/main/resources/assets.
webjar "org.webjars:react:0.14.7"
This software is licensed under Apache License, Version 2.0.
Babel Code released under the MIT license.
React is released under the BSD license.