Skip to content

Frontend Development Environment

Jump to bottom
Karl Tarvas edited this page Feb 23, 2023 · 26 revisions

Prerequisites

Node and npm have to be installed, the minimum supported Node version is the oldest LTS version still in maintenance.

zypper in nodejs-default

Note: multiple node versions can be managed with nvm.

npm install -g yarn
yarn install
# Do not run yarn upgrade

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.

# Don't forget about the https://
yarn proxy https://server.tf.local

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.

React style guide of reusable components

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):

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.

Adding a new dependency

To add a new dependency:

yarn add <depency_name> # For run-time or build-time dependencies
yarn add --dev <depency_name> # For development-only dependencies

After running this command run yarn build to update any relevant license files and update spacewalk-web.changes.

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. Each page there will have their own bundle automatically created and asynchronously fetched by webpack.

Folders Structure

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"

Adding a new Component

All shared components are living in the components folder. Ideally for each component the following files should be created withing a sub-folder:

  • <ComponentName>.ts: contains the ComponentName code
  • <ComponentName>.stories.ts: holds some demo code to showcase the component in storybook. New story files should be written using the Component Story Format (CSF).
  • <ComponentName>.test.ts: holds the Jest tests for the component.

When writing a component, ensure that every property flow type and component has a JSDoc comment: those will be rendered by the storybook in the Docs tab. The downside of this is that all the property types of the component need to be defined in the component's file. Default property values are also displayed by Storybook.

yarn.lock conflicts - What should I do

Conflicts on this file can be hard to solve manually, luckily Yarn has an internal tool to figure out conflicts.

  • run Yarn with no arguments: yarn

If this doesn't resolve all of the conflicts, you can try the following:

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

Blogpost

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

Clone this wiki locally