React development with webpack explained

This document goes into the details of the project structure - setup and configuration.

src and mod

In the previous learning module, you were told to change files in the src folder. You may have noticed that the reactComponent gets built into the mod folder.

It is a requirment that source files be outside the mod folder, since webpack is already building them into a single JavaScript file to be used by AFL. Having them all in the same mod folder can potentially cause problems as there would be two copies of the same code, one in the actual source and another in reactComponent.

portlet and app

AFL components built with React go into the portlets folder, and the AMD definition of the portlet goes into the app folder. Once webpack runs, all React development goes into these two folders.

webpack

package.json

The build:afldev script runs the webpack cli with the webpack config located in config/webpack.js. The --watch switch monitors the project's files for changes and auto builds reactComponent, so that you don't have to manually invoke a webpack build.

webpack.config

module.exports
entry - the file that webpack reads to build reactComponent

output
path: the directory of the output
filename: the build filename
library: build reactComponent as a library
libraryTarget: build the library as an AMD

externals: even though react and react-dom are not in the react-components project, we don't want webpack to include it in reactComponent.js since it is being provided by AFL from the React project. This is why it is excluded from the build.

rules
An important configuration in rules for this project are those of babel. There is a babel-loader and a babel-react preset, which automatically does the JSX to JS compiling.