Part 0. Setting up the project — Building Outlook Add-in with React

Setting up Outlook add-in from scratch including guide to use HTTPS for your local react app

May Chen

Follow

Published in

NEXL Engineering

3 min readJul 23, 2021

--

More posts on buiding Outlook add-in with React:

At NEXL, we are building an Outlook Add-in for our service, which you can see below. And in this post, We will go through how to set up a project like this.

create-react-app

Outlook add-in is just a web app with access to data within office so first thing we use create-react-app to set up a react app. Super simple.

npx create-react-app my-app --template typescript# oryarn create react-app my-app --template typescript

Using HTTPS on your local

The only thing is Office will not be happy with the add-in running on HTTP so we will make it HTTPS. That’s easy too as create-react-app has an environment variable HTTPS, so we can simply do

HTTPS=true yarn start

(Note: all the commands here are for macOS, but you can look up Windows commands in the links.)

Read more on using HTTPS in development.

Now we can go to https://localhost:3000/ , but you might notice there’s a warning on your browser and unfortunately Office is not happy with the warning either so we have to set up our own certificate to get rid of the warning.

To set up local certificate, we use mkcert.

Firstly, we install mkcert on our machine:

brew install mkcert

Then in our project root, we run:

mkcert -install
mkcert localhost
mkdir -p .cert
mkcert -key-file ./.cert/key.pem -cert-file ./.cert/cert.pem "localhost"

You should see now there’s a .cert folder with certificate file in it.

And we change “start” script in our package.json to:

"HTTPS=true SSL_CRT_FILE=./.cert/cert.pem SSL_KEY_FILE=./.cert/key.pem react-scripts start"

Now run yarn start, you shall see your app running on HTTPS without any warning.

manifest.xml

With the react app running on HTTPS, we just need to let Office know where to load our app and find the assets. So what we want is a button on the top bar in Outlook and when someone click on it, our app opens up on the side.

We can configure all these in manifest.xml, here is mine. I’m not exactly sure how each thing works but it works, so here it is.

Try copy this one for your project and you might tweak a little bit if it doesn’t work for you. The main things to look for is line 5–11, 89–111, 140–156.

Install your add-in

Follow this documentation to install your add-in on the web, and then if you go to your Outlook desktop, you should see your add-in there too.

This is basically how you set up an Outlook add-in, see if you add-in loads, I hope it does. If it doesn’t, leave a message and I’m happy to figure it out with you =) And in the next post, we will go through how to make authentication work.