Frontend Development Environment

Prerequisites

Node and npm have to be installed:

zypper in nodejs8 

http://download.opensuse.org/repositories/devel:/languages:/nodejs/openSUSE_Leap_15.0/

npm install -g yarn
npm install -g webpack
npm install -g flow-bin@0.93.0
yarn install

Frontend Server - faster development cycle - frontend proxy server - yarn proxy

Frontend proxy server that will serve all the local javascript files and proxy the rest for a chosen backend server.

cd web/html/src
yarn proxy --server "https://server.tf.local"           (Don't forget about the https://)

Frontend Server - React hot reload

React hot reload allows us to see our react changes without refreshing the whole page. For that to work we need to have our "yarn proxy" running and make sure the entry point of the react page we are working on has the hot reloading enabled. You can find an example here: https://github.com/uyuni-project/uyuni/blob/master/web/html/src/manager/content-management/create-project/create-project.js#L59

Just be aware that this mode doesn't work for all the changes as the components aren't remounted again. If you have new code inside constructor/lifecycle methods, you might need to reload the full page.

New dependency

All the frontend dependencies are tracked inside the module "susemanager-frontend/susemanager-nodejs-sdk-devel"

To add a new dependency run the command

yarn add <depency_name>
or
yarn add --dev <depency_name> (if it's only a development/build dependency)

After running this command run "yarn build", add a new entry to the file "susemanager-frontend/susemanager-nodejs-sdk-devel/susemanager-nodejs-sdk-devel.changes" and commit all the generated files

How to add a new react page

All the routes exported on the files 'manager/<folder_name>/index.js' will be automatically registered as react pages entries. Check the file content-management/index.js for an example. Don't forget to restart webpack after these changes.

Folders Structure

For sake of organization, each new react page should be inside their own new folder. A good structure for a new React page would be:

src/manager/dashboard/dashboard.js
src/manager/dashboard/dashboard.renderer.js

The file dashboard.renderer.js will provide a global function to render the page, which can be called from anywhere.

For an example take a look in the virtualization guest feature.

Bear in mind if this new react page is expected to grow a lot, instead of creating multiple react child pages, you could consider the creation of a Mini SPA react app adding client routing with "react-router"

yarn.lock conflicts - What should I do

Conflicts on this file can be hard to solve manually. I suggest to solve it like this:

• solve conflicts with theirs
• run yarn add again with the new dependencies you added

Linting

cd $PROJECT_ROOT/web/html/src
yarn lint

Atom setup

Install plugins:

• nuclide
• linter-eslint

Note: after installing nuclide Atom will show a prompt asking if the recommended packages should be installed. Confirm to get all the other packages installed.

To make Nuclide use flow-bin from local node_modules: Edit -> Preferences -> Packages -> search for nuclide -> Settings -> Nuclide-flow -> check "Use the Flow binary included in each project's flow-bin"

To open the project, File -> Open folder: $PROJECT_ROOT/web/html/src

Flow errors will show up in the Diagnostics view (Alt + Shift + D). ESLint errors and warnings are also shown in the Diagnostics view but only for the current file.