Dear SAPLearners, in this blog post we will learn how to develop Microsoft Fluent UI React App in SAP Business Application Studio.
What is Microsoft Fluent Design System?
According to Microsoft documentation,
Fluent brings the fundamentals of principled design, innovation in technology, and customer needs together as one. It’s a collective approach to creating simplicity and coherence through a shared, open design system across platforms.
Fluent UI React
According to documentation,
Fluent UI React is the official open-source React front-end framework designed to build experiences that fit seamlessly into a broad range of Microsoft products. It provides robust, up-to-date, accessible components which are highly customizable using CSS-in-JS.
SAP Business Application Studio is the next generation IDE for developing business apps to SAP Cloud Platform Cloud Foundry environment. Cloud Foundry runtime brings different technology options to choose while building apps.
In this blog post we will develop a React App using Microsoft Fluent UI in SAP Business Application Studio.
Step-by-Step Procedure
1. Launch SAP Business Application Studio and open a new terminal.
2. Firstly, to create a React App run the following commands in the terminal.
cd projects
npx create-react-app my-reactapp
3. After couple of seconds, a new react app is created successfully.
4. Now, open the react app.
5. Navigate to terminal using menu option Terminal > New Terminal. Add Microsoft Fluent UI library by running the following command.
npm install @fluentui/react
6. Fluent UI library is added successfully.
7. Most importantly, open the package.json file to see project dependencies and you should also find Fluent UI.
8. After that, open App.js file and add below code to use Fluent UI control.
import React from 'react';
import './App.css';
import { PrimaryButton } from '@fluentui/react/lib/Button';
function App() {
return (
<div class="App">
<PrimaryButton>Hello Button from Fluent UI</PrimaryButton>
</div>
);
}
export default App;
9. Finally go back to terminal and run the react app with following command.
npm run start
10. Click on Open in New Tab to see the react app output.
11. Hurrah !!! you see the output like below.
This is just an introductory blog post and we will be writing more tutorials on Fluent UI React. In the next article, we will be deploy the react app application to SCP Cloud Foundry environment and integrate with back-end systems like S/4 HANA.
Conclusion
Congrats!! you have successfully learnt how to develop Microsoft Fluent UI React App in SAP Business Application Studio.
Continue Learning
- What is a Dev Space in SAP Business Application Studio
- How to develop Fiori App in SAP Business Application Studio
- How to build, deploy fiori app to SAP Cloud Foundry
- How to integrate Fiori apps in SAP Cloud Platform Portal
