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
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.
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.
entry - the file that webpack reads to build
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.
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.