Got it, let's walk through how to add a React frontend (using JSX) to your Niagara 4 Gradle project while sticking with the existing Jetty server and accessing Tridium resources. I've tackled this exact setup before, so here's a step-by-step breakdown that should work smoothly:

First, organize your project to keep frontend and Niagara backend code clean:

• Create a frontend/ directory at your project root (this will hold your React app)
• Keep your existing Niagara code in the standard structure (src/main/web/, src/main/java/, etc.)
• The end goal is to build React into a subdirectory of src/main/web/ (like src/main/web/react-ui/) so Jetty can serve it as static content

Since we're ditching the Node dev server for Jetty, we need to make React's build output land directly in Niagara's web resources folder:

1. Initialize your React app in the frontend/ dir with npx create-react-app . (add --template typescript if you prefer TypeScript)
2. Open frontend/package.json and update two key settings:
   • Add a homepage field to ensure asset paths are correct for Jetty:

     "homepage": "/react-ui"
     

   • Modify the build script to copy output to Niagara's web directory:

     "build": "react-scripts build && cp -r build/* ../src/main/web/react-ui/"
     

     Note: For Windows, replace cp -r with xcopy /E /I build\\* ..\\src\\main\\web\\react-ui\\

You can reference both static Niagara assets and backend APIs directly from your React code:

• Static Tridium Resources: If you have Niagara assets (like logos, CSS, or client-side JS) in src/main/web/, reference them with absolute paths in React. For example:

  import niagaraLogo from '/images/niagara-logo.png'; // Assumes src/main/web/images/niagara-logo.png exists
  
  function Header() {
    return <img src={niagaraLogo} alt="Niagara Logo" />;
  }
  

• Niagara APIs/Client-Side JS:
  • To call Niagara's REST API, use fetch with relative paths (since React and Jetty share the same domain, no CORS issues):

    async function fetchNiagaraData() {
      const response = await fetch('/api/niagara/points');
      const data = await response.json();
      // Use the data in your component
    }
    

  • If you need to use Tridium's client-side JS libraries (like niagaraClient.js), add a script tag to frontend/public/index.html:

    <script src="/js/niagara/niagaraClient.js"></script>
    

    Then access it in React via window.niagaraClient:

    function initNiagaraClient() {
      window.niagaraClient.initialize();
    }
    

Since your project uses Gradle, we'll tie the React build into the Niagara build process so everything runs in one go:
Add these tasks to your root build.gradle file:

// Install React dependencies (run once, or when package.json changes)
task installReactDeps(type: Exec) {
    workingDir "$projectDir/frontend"
    commandLine 'npm', 'install'
}

// Build React and copy output to Niagara's web directory
task buildReact(type: Exec) {
    workingDir "$projectDir/frontend"
    commandLine 'npm', 'run', 'build'
}

// Ensure React builds before assembling the Niagara project
assemble.dependsOn buildReact
buildReact.dependsOn installReactDeps

Now when you run ./gradlew assemble, Gradle will first install React dependencies (if needed), build the React app, and then package up the Niagara site.

1. Run ./gradlew build to build everything
2. Start your Niagara 4 site as usual
3. Navigate to http://your-niagara-server:8080/react-ui (adjust port if you changed it) – you should see your React app
4. Test resource references: Verify Niagara logos load, API calls return data, and any Tridium client JS functions work as expected

For faster dev cycles, use React's hot reload while proxying API requests to Jetty:

1. Add a proxy field to frontend/package.json:

   "proxy": "http://localhost:8080"
   

2. Start your Niagara site first, then run npm start in the frontend/ dir
3. React's dev server will proxy all API calls to Jetty, and you'll get instant reloads when you edit JSX files. Just remember to run the full Gradle build for production deployments.

One last thing to watch out for: Double-check your Niagara web security settings. If you get 403 errors accessing /react-ui, you may need to update your project's web.xml to add permissions for the new path.

内容的提问来源于stack exchange，提问作者Gaz