cra-template-dataverse-webresource

If you want to create a DataVerse WebResource that leverages React, Typescript and Fluent UI, the activities and skils needed to setup the project are often much more complicated that the actual implementation of the webresource.

The aim of this package is to automate the activities needed to startup a simple DataVerse WebResource project, allowing developers to focus on the actual webresource content.

Usage

The package content is a custom template for create-react-app.

To start, open a console and type:

npx create-react-app <your-webresource-name> --template @_neronotte/cra-template-dataverse-webresource

Replace <your-webresource-name> with the name of your webresource.

Once the template has been installed, move in the .\<your-webresource-name> folder and:

1. Change the value of the title tag of the ./public/index.html page to provide a meaningful title for your webresource.
2. If needed, in the same ./public/index.html page change the relative url of ./ClientGlobalContext.js.aspx page.
3. Update ./src/App.tsx file, the entry point of your custom webresource.
4. Calculate the path of the folder where you want to save the build outputs, relative to the one of the current package, search for all the occurrence of the <output path> string and replace it with the calculated path (there should be 3 occurrences, one in the config-overrides.js file, 3 in the scripts section of package.json file)

References

Webpage (HTML) web resources GetGlobalContext function and ClientGlobalContext.js.aspx (Client API reference) Goodbye HTML Web Resources...