A React App prototype using Office UI Fabric components. Just to get familiar with Office UI Fabric components for a friend.
The End Goal is to be able to create Office Add-ins.
If you like raw, unrefined sugar, check out the Long Form Recipe for what seems like step-by-step thought process and the birth of this prototype.
# install dependencies
npm install
# serve the app from localhost:3000
npm start
# build application for production
npm run build
# run unit & end-to-end tests
npm test
Well, thats it folks. We are done! We can all go home now.
This section contains step by step of how this prototype came to be (as its being built). If a blog is written, then the link would be here and contain a more user-friendly documentation and descriptions.
Starting with ...
https://github.com/OfficeDev/office-ui-fabric-react/blob/master/ghdocs/OnBoarding/SampleApp.md
It is presumed that NodeJS is installed already. Then from command prompt:
# Install tool needed to generate a react app scaffolding
npm install -g create-react-app
# Create a scaffolded React App
create-react-app prototype_office-ui-fabric-react
Following are the settings used when generating the project scaffolding:
Readme generated by create-react-app is here
Then ...
# Install Office UI Fabric
cd prototype_office-ui-fabric-react
npm install office-ui-fabric-react --save
Following the instrunctions here we now have the following:
We need to serve this page somehwere! Going to follow the docs/recommendations here and going to try GitHub Pages
# Install tool needed to generate and publish to GitHub Pages
yarn add --dev gh-pages
# Update packages.json with deploy script command:
# "deploy": "gh-pages -d build"
# Now deploy the app to GitHub Pages
yarn run deploy
Yeeeeepy! deployed to GitHub Pages (see the URL woooo!)
https://docs.microsoft.com/en-us/office/dev/add-ins/overview/office-add-ins
hmm... looks like Office has Yeoman generators to create a Office Add-ins!
# Install Yeoman and the Office Add-ins generator
npm install -g yo generator-office
# Now scaffold the project :-(
yo office
Following is what I went through. The choices made for Yeoman generator!
_-----_ ╭──────────────────────────╮
| | │ Welcome to the Office │
|--(o)--| │ Add-in generator, by │
`---------´ │ @OfficeDev! Let's create │
( _´U`_ ) │ a project together! │
/___A___\ /╰──────────────────────────╯
| ~ |
__'.___.'__
´ ` |° ´ Y `
? Would you like to create a new subfolder for your project? No
? What do you want to name your add-in? prototype_office-ui-fabric-react Office Add-in
? Which Office client application would you like to support? Excel
? Would you like to create a new add-in? No, I already have a web app and only need a manifest file for my add-in.
For more information and resources on your next steps, we have created a resource.html file in your project.
? Would you like to open it now while we finish creating your project? Yes
----------------------------------------------------------------------------------
Creating manifest for prototype_office-ui-fabric-react Office Add-in add-in
----------------------------------------------------------------------------------
conflict package.json
? Overwrite package.json? overwrite this and all others
So turns out that running yeoman in an existing project is messy, removed whole bunch of stuff! Most likely not going to work. But lets try it aye!
The generated code is checkin (minus the package.json because its definitely messedup) Code changes are here.
Here are the changes added for the Office Add-in stuff in packages.json. The Office Add-in Generator should have modified existing package.json correctly or said what needed to be changed!
Move Office Add-in generated files to fit the React App structure. Here are the changes
Remove the resource.html generated help file by Office Add-in generator that were a bit wrong when trying to side-load the add-in on Office for Mac. Instead follow instructions here to side-load an Office Add-in on Office for Mac.
Now update Office Add-in manifest file and deploy.
Yes!!! now we are talking ...
Great 8( found a better doc! Here it is ... and its better than the fragmented documentation from folks at a big company.
Using the instructions here got the Excel Add-in to work, and the code changes are here and the result:
The icon was missing in the Office Ribbon to show the TaskPane. Just need to add the relevant icons and voila:
Now change the button label and Add-in description is done in by chaning the manifest file and the results speak for themselves:
How about the tooltip with Add-in description?
Tada!
Added a separate manifest file that loads this add-in from http://localhost:3000 so that when developing, the add-in can be live previewed and tested in Excel. Ideally the build process would make sure the right server is used when in development vs. publishing. Code changes