|
[[js-getting-started]]
|
|
|
|
# Getting started with frontend development
|
|
:toc: right
|
|
:toclevels: 5
|
|
|
|
## Development setup
|
|
|
|
Following steps are required to setup a webpack development environment:
|
|
|
|
1. **Dependencies**
|
|
Make sure you have all npm dependencies up to date:
|
|
`npm install`
|
|
Alternatively you can run the install command with option `--no-optional` which skips packages that aren't required and can save you some space.
|
|
|
|
2. **Running webpack**
|
|
There are several ways of executing webpack:
|
|
|
|
- using [foreman runner](https://github.com/ddollar/foreman): `foreman start` (starts both rails and webpack server)
|
|
- using `script/foreman-start-dev` (starts rails and webpack server)
|
|
- executing rails and webpack processes "manually"
|
|
```bash
|
|
npx webpack \
|
|
--config config/webpack.config.js
|
|
```
|
|
|
|
3. **Additional config**
|
|
Both `foreman start` and `foreman-start-dev` support `WEBPACK_OPTS` environment variable for passing additional options. The webpack build is done for Foreman core and plugins at the same time but seperatly, so options like `--anaylze` that start a server for each build will not work.
|
|
An example of such setup:
|
|
+
|
|
[source,bash]
|
|
----
|
|
WEBPACK_OPTS='--progress' foreman start webpack
|
|
----
|
|
+
|
|
Additionally you can set `NOTIFICATIONS_POLLING` variable to extend the notification polling interval that is 10s by default and can clutter the console.
|
|
+
|
|
[source,bash]
|
|
----
|
|
NOTIFICATIONS_POLLING=${polling_interval_in_ms}
|
|
|
|
----
|
|
+
|
|
Webpack stats can be changed by `WEBPACK_STATS`. Default value is `minimal`.
|
|
+
|
|
[source,bash]
|
|
----
|
|
WEBPACK_STATS=${verbose}
|
|
|
|
----
|
|
|
|
## Directory structure
|
|
|
|
The webpack processed code is placed in the following folder structure:
|
|
|
|
```
|
|
─ webpack/ ┈ all webpack processed code
|
|
│
|
|
╰─ assets/javascripts/ ┈ es6 code for erb pages, some still contain jQuery
|
|
│
|
|
╰─ react_app/ ┈ react components and related code
|
|
```
|
|
|
|
More detailed description of a folder structure for components is in chapter https://github.com/theforeman/foreman/blob/develop/developer_docs/adding-new-components.asciidoc[Adding new component].
|
|
There are still obsolete `redux` folders at some places. They used to be a place for files containing Redux actions and reducers before a standardized folder structure was introduced. We're migrating away from them. Please don't put additional code there.
|
|
|
|
## Useful tools
|
|
|
|
There are some useful extensions that can be used on top of the standard browser's developer tools. Their Firefox mutations are available too.
|
|
|
|
- [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)
|
|
- [Redux DevTools](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd)
|
