-
Notifications
You must be signed in to change notification settings - Fork 185
Frontend Development Environment
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.107.0
yarn install
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://)
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.
We use storybooks to document our React reusable components. This can be useful either to find which components can be reused while implementing a new feature or to understand the impact of changing a component. The development of the react reusable components ideally should be styleguide first.
Instructions to run the styleguide (this assumes you have the frontend proxy server running):
cd web/html/src
yarn run storybook
After this all the files "<component_name<.stories.js" will be loaded as documentation inside the styleguide. You can consult the official docs storybooks for more information.
All the frontend dependencies are tracked inside the module "susemanager-frontend/susemanager-nodejs-sdk-devel". Inside OBS these are the only dependencies that will be available.
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" on web/html/src, add a new entry to the file "susemanager-frontend/susemanager-nodejs-sdk-devel/susemanager-nodejs-sdk-devel.changes" and commit all the generated files
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. Each page there will have their own bundle automatically created and asynchronously fetched by webpack.
For the 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 renderer function to render the page. This function can be obtained from anywhere using the global function: spaImportReactPage('dashboard/dashboard').then(function(module) {module.renderer('id')}
For an example take a look at the content-management feature.
Bear in mind if the 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"
Conflicts on this file can be hard to solve manually. I suggest to solve it like this:
- solve conflicts with theirs
- run
yarn addagain with the new dependencies you added
cd $PROJECT_ROOT/web/html/src
yarn lint
Blogpost about frontend work on UYUNI until October 2019. In the comments, there might be some useful ideas for the future. https://medium.com/better-programming/dont-be-afraid-of-legacy-how-to-gradually-introduce-react-js-in-a-really-old-application-79876c0dfa42?source=friends_link&sk=5499d4c809b8ccd6af121f61fd7bacd4
Only the libraries present in this module will be upload to OBS. Yarn install will download all the needed libraries in jenkins and uploaded to OBS as a zip to be used to build our rpms.