If you've been building WebResources for Dataverse using React, TypeScript, and Fluent UI, you've probably already stumbled upon my previous posts on this topic, and probably right now you rely on @_neronotte/cra-template-dataverse-webresources and @_neronotte/cra-template-dataverse-webresources-forms, my scaffolding templates for Create React App (CRA).
Well, times are changing: CRA has officially been deprecated! 😱
If you try to start creating a new react app with CRA, since Feb 14th the installer shows you the following deprecation warning:
But don't worry—I’ve got you covered. After some serious hands-on work, I’ve migrated my templates to Vite, the community-suggested replacement for CRA. Say hello to vite-template-dataverse-webresources! 🎉
👉 GitHub Repo: https://github.com/neronotte/vite-template-dataverse-webresources
Why Vite? ⚡
Vite is faster, leaner, and just better than CRA in so many ways:
- Instant server startup ⏩
- Faster hot module replacement 🔥
- Optimized build process 🏗️
- Native ESM support 📦
If you're still on CRA, now’s the perfect time to migrate!
What’s in the Box? 📦
The repository now contains two branches:
- 🌍 Main Branch (for Sitemap & Modal WebResources)
- Use this template to create WebResources that are accessed from the Dataverse sitemap, or open as modal dialog or side panes in model-driven apps.
- 📝 Forms Branch (for WebResources inside Forms)
- Use this template to create WebResources that integrate directly into Dataverse forms, and need to interact with form data and context
How to Get Started 🚀
Getting up and running is easier than ever. You can use degit to clone the repo templates. If you don't have it already installed, you can do it via:
npm install -g degit
then just type:
npx degit neronotte/vite-template-dataverse-webresources#main my-webresource
cd my-webresource
npm install
(replace #main with #forms if you want to use the template for form-based WebResources)
And follow the instructions on the README.md file to have everything properly set-up and ready to use. 💥
To run your WebResource and debug it locally you can simply type:
npm run dev
It will launch Vite local server, tipically on port 5173. You can just open a browser on http://localhost:5173 and you're ready to go!
To build your WebResource in production mode, ready to be deployed in your Dataverse, just type:
npm run build
Then you can use PACX as described here to upload the generated HTML/JS/CSS files into Dataverse.
Migration Made Easy 🎯
If you've been using CRA for your Dataverse WebResources, moving to Vite is effortless with this template. The structure remains familiar, and the setup process is straightforward—so you can transition smoothly without hassle.
Check out the repo, give it a try, and let me know if you have any feedback! Contributions are always welcome. 🚀💡
Happy coding! 😃
Top comments (1)
This was very useful. It helped me conceptually to achieve what I was looking for and the pacx deployment option is fantastic for automation. I was able to do something very similar using parcel + react, then I use Fiddler with auto-responder rules that allows me to live debug as a I develop, then only deploy once I am ready. I was also able to eliminate the need to wire up Javascript events, but still get the same experience of the OnLoad context, and lastly I built a little router that lets me route my web resources to components, so I can deploy the html + js file once, but support as many web resources, forms, etc. as I want to. Let me know if you want to connect to see how I completed this, and thank you again for providing the base and the inspiration! -Chris