React Plugin Template

Overview

The React Plugin Template offers a modern approach to developing Jenkins plugins by leveraging React for its user interface. Traditionally, the Jelly-based UI rendering system served its purpose, but it often felt cumbersome when developers aimed for a more custom and responsive UI experience. This template was crafted during the Google Summer of Code 2019 initiative to enhance the Working Hours Plugin's UI, making use of React's capabilities to create a cleaner, more efficient development process for Jenkins plugins.

This project not only simplifies UI customization with React but also integrates various essential features that enhance the overall development experience. Whether you're an experienced Jenkins developer or just getting started, this template serves as a valuable resource for streamlining your plugin creation.

Features

• React Integrated: Fully integrated React allows for seamless control over the user interface, making it easier to create dynamic and engaging UIs.
• Using Iframe: The use of iframes creates a new JavaScript environment, minimizing the impact of globally added polyfills, like Prototype.js, enhancing performance.
• Maven Lifecycle: npm commands are integrated into the Maven lifecycle via the Frontend Maven Plugin, simplifying dependency management.
• Webpack: This tool reduces bundle size and avoids global namespace pollution, ensuring a cleaner application architecture.
• Free to make requests: The setup includes an Axios client that automatically attaches a Crumb, streamlining AJAX requests in a manner similar to standard React practices.
• Express as devserver: By running the React app in a standalone page with hot reload support, development becomes more efficient, while still being accessible to the Jenkins dev server thanks to webpack proxy.
• Axios as http client: Axios dramatically simplifies the process of making HTTP requests, offering a user-friendly API for developers.