DataVerse WebResource/PCF-ReactFluentUI Starter Template

This package provides a custom template for creating DataVerse WebResources using React, TypeScript, and Fluent UI. It automates the setup steps required to initialize a web resource project, enabling developers to focus on building the actual functionality.

Features:

• React: Build your DataVerse WebResource UI using React.
• TypeScript: Enjoy strongly typed code for better maintainability and a more robust development experience.
• Fluent UI: Pre-installed Fluent UI components for a modern, consistent design.
• Create-React-App Template: Automates environment setup, enabling a fast project initiation.

Usage

1. Install the package globally (optional)

If you plan to use this template frequently, you can install it globally using npm or yarn:

npm install -g fluent-tsf-react-webapi

2. Create a new DataVerse WebResource project

To create a new project based on this template, run the following command in your console:

npx create-react-app <app> --template fluent-tsf-react-webapi

Replace <app> with the name of your project folder. This command will set up a new project with the DataVerse WebResource Starter Template pre-configured.

3. Navigate to the project folder

Once the project setup is complete, navigate to your project folder:

cd <app>/home

4. Run the development server

To start the development server, run the following command:

npm start

This will launch the React development server, and you can view your DataVerse WebResource in the browser at http://localhost:3000.

Template Details

The custom template includes the following features:

• React with TypeScript support, pre-configured for a seamless experience.
• Fluent UI components installed and ready for use.
• Boilerplate code for a simple DataVerse WebResource with example components.
• A basic folder structure for easy development and organization of your web resource code.

Building and Deploying the Project

Build the project

Run the following command to create an optimized production build:

npm run build

This will create an optimized version of your project in the \ava_\pages folder.

Deploy to WebResource (WR)

Change the path in your HTML to match the actual location of your JS file in your DataVerse solution.

Build to PCF

To build your project for the PowerApps Component Framework (PCF), follow these steps:

1. Initialize the solution:

   pac solution init --publisher-name developer --publisher-prefix dev

2. Add references to the solution:

   pac solution add-reference --path c:/YourFolderPath

3. Restore the project:

   msbuild /t:restore

4. Build the project:

   msbuild

Deploy to PCF

1. Navigate to the home directory of your project (where the bin/debug folder is located).
2. In Dynamics 365 CRM, go to Settings > Solutions.
3. Click Import, and upload and import your ZIP file.
4. After the solution is imported, publish it to make your custom control available in CRM.

Customization

You can easily modify and extend the template to meet your needs. For example:

• To add new Fluent UI components or change styles, simply import and use them in your React components.
• Customize the build process or adjust the configuration if needed for your specific web resource.

Debugging

To debug your React app, you can use the React Developer Tools extension for your browser. You can install it from the Chrome Web Store. Then, open your JS files in the browser console to inspect the Web API.

Conclusion

This template simplifies the initial setup of a DataVerse WebResource project by automating complex configuration steps. With this setup, you can quickly focus on building your web resource functionality without worrying about the underlying environment setup.

Note:

When publishing this package to npm, ensure you replace fluent-tsf-react-webapi with your actual package name or update the version.

Need help?

If you have any questions or need further assistance, feel free to open an issue or reach out for support.