Build and deploy a Tableau Extension with React, Git, and Netlify

In this first technical blog post, I’ll do my best to take you through the steps to create, build and deploy a Tableau Extension using Git, React, and Netlify.

Before we start, you should know that Javascript, React and, in general, web development is not my main skill. I’m a Data Visualization Engineer, and I spend much more time building dashboard rather than web applications.

However, I was encouraged to write this article to help other beginners. Indeed, if I was able to do it, you can surely do it too! Let’s start!

Our goal and why this tutorial

The goal of this tutorial is to set up a very basic Extension, that just says « Hello » plus the name of the current dashboard:

Yes, I agree, it’s not very useful. However, we’re going to use three of the current most exciting technology:

  • React: a component-based and feature-oriented JavaScript library for building user interfaces
  • GitHub: the leading version control management tool
  • Netlify: a free and super easy hosting and deployment service that you can link to GitHub

With those technologies, you’ll be able to

  • Develop powerful extensions (and use the Tableau UI API)
  • Have your code safe, secured, and versioned
  • Be able to work with other developers easily
  • Make the extensions available to the world
  • Have continuous deployement (meaning that you just have to push new features, and everyone will see the modifications)

If that sounds good, let’s start!

Initialize your React App

As we’ll build our Extension using React, the first step is to initialize a React application.

To do that, you need to first install Node. You can download and install it here: https://nodejs.org/en/.

Then, open a Terminal, navigate to a folder where you want to initialize your React app, and write the following command:

npx create-react-app hello_world_extensions_tutorial

This will install and initialize a default React application name hello_world_extensions_tutorial.
Navigate to the newly created folder and start the application:

cd hello_world_extensions_tutorial
yarn start

Once all the scripts have loaded, a web browser page will automatically open and display the default React init page:

Our React app is working, the next step is to publish and synchronize it with GitHub.

Sync with Github

The React application already is already initialized to use git. The only thing we have to do is create the repository on GitHub and link it to our React app.

Go to https://github.com/, log in (or create an account if you don’t have one) and create a new repository. Name the new repository hello_world_extensions_tutorial.

On the quick setup, we’ll use the « push an existing repository » command lines. In a terminal, navigate to the react app folder create earlier, and copy-paste the two lines (Note: your command lines will be a bit different):

After pushing your code, you should see your entire React app folder in GitHub:

Our default app is on GitHub. The next step is to develop the Extension.

Create our first Extension

Using your favorite code editor (I’m using VS Code) open your hello_world_extensions_tutorial folder.

There are four main steps to build our Extension.

  • Add the Extensions API library in the public folder

You can download the library here:

Unzip the downloaded file and add tableau.extensions.1.3.0.min.js in the public folder.

  • Reference the library in the index.html

In the public folder, open index.html and add the reference of the script under the title:

<script src= »tableau.extensions.1.3.0.min.js »></script>

  • Write the application

The next step is to actually develop the application. To do that, in the src folder, we’ll modify the App.js file.

Note: As the official Tableau tutorial uses class and componentDidMount I choose to use them, but if you are familiar with React Hooks, you can also replace the following code with the one here: https://github.com/ladataviz/hello_world_extensions_tutorial/blob/master/src/AppWithHooks.js.,

Here’s the code that returns « Hello  » + the dashboard name:

import React from "react";
require("./App.css");

//Needed to use the library
const { tableau } = window;

//Initialize the class and state
class AppComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { dashboardName: "" };
  }

  //Update the state by passing the dashboard name
  componentDidMount() {
    tableau.extensions.initializeAsync().then(() => {
      const dashboardName = tableau.extensions.dashboardContent.dashboard.name;
      this.setState({
        dashboardName
      });
    });
  }

  //Render the Title
  render() {
    return <h1> Hello {this.state.dashboardName}</h1>;
  }
}

export default AppComponent;

You can copy-paste the code in the App.js file. I won’t go into the details of building an Extension in this post. You can find tutorials, get started, and API reference here: https://tableau.github.io/extensions-api/

  • Create the .trex manifest

The .trex manifest is the description of the Extension. The most important part is the url in the source-location where we define where the code is running. To test our application, the URL we need to specify is our local environment:
http://localhost:3000/index.html

At the root of the application folder, create a new file, Tutorial Local.trex, and write the following code:

<?xml version="1.0" encoding="utf-8"?> 
<manifest manifest-version="0.1" xmlns="http://www.tableau.com/xml/extension_manifest">
  <dashboard-extension id="com.ladataviz.tutorial" extension-version="0.1.0">
    <default-locale>en_US</default-locale>
    <name resource-id="name"/>
    <description>Tutorial (React)</description>
    <author name="Tristan Guillevin" email="contact@ladataviz.com" organization="/" website="https://ladataviz.com"/>
    <min-api-version>1.0</min-api-version>
    <source-location>
      <url>http://localhost:3000/index.html</url> 
    </source-location>
        <icon></icon>
  </dashboard-extension>
  <resources>
    <resource id="name">
      <text locale="en_US">Tutorial</text>
    </resource>
  </resources>
</manifest>

You can modify the author and dashboard-extensions id fields.

The code of the Extensions is done, let’s see if it is working.

Test your app!

Run the application. Like before, open a terminal, navigate to the folder of the React app and start it:

cd hello_world_extensions_tutorial
yarn start

Open Tableau, create a simple Dashboard, name it Test, add an Extension and select the Tutorial Local .trex file. You should see this:

If you don’t, make that your React app is running in a terminal on http://localhost:3000/index.html (open this URL in a browser, you should see « Hello ») and that the code is similar to the one in my Git repository: https://github.com/ladataviz/hello_world_extensions_tutorial

If your Extension is working fine, let’s update the GitHub repository.

Push your changes

The first step is to push our modifications on GitHub. But first, you can check what modifications are ready to be pushed. To do that type git status on a terminal, in the application folder:

As you can see, there are two modified files (public/index.html and src/App.js) and two new files (the .trex manifest and the API library).

To push our changes we first need to add the changes in git, then commit them and finally push them in our master branch. Run the three following commands:

Git add . 
Git commit -m « Hello World Tutorial »
Git push 

On GitHub, you should see the description « Hello World Tutorial » next to the public, src folders and the .trex manifest:

Our GitHub repository is up to date. The next step is to deploy our application online so everyone can use it.

Deploy your application

To deploy the application, we’re using Netlify.

Start by logging in to app.netlify.com with your GitHub account. Then, click on New Site from Git to start configuring the deployment. The first step is to select the Git provider, we’re using GitHub:

The second step is to give Netlify access to your GitHub repository. First, you need to authorize the Netlify application on your GitHub account. This should be easy. Then, you need to authorize Netlify to access your repository hello_world_extensions_tutorial:

Finally, you can select in from the Netlify app:

The last step is to configure the build settings. Normally you have nothing to change, but make sure that the build command is yarn build and the publish directly is build/. Finally, you can click on Deploy:

Wait for the deployment of the site, and when all is green in the Overview, your site is deployed and ready. You can copy-paste the link of your site in a new web page to test it, it should say « Hello ».

Of course, you may want to modify the name of your site for something friendlier (nostalgic-einstein sounds good but not really representative of what the extensions do!). To do that, click on Site Settings and then Change site name:

Our site should be ready, I named mine helloworldtutorial.netlify.com (you can test it, it says « Hello »). Of course, you’ll need to name it differently!

Our Extension is deployed and available online. The last step is to create a new .trex manifest so you can start sharing your extension to the world.

A new .trex to share

As you know, the .trex manifest is where you describe the extension and reference the URL of the application. If we want to share your extensions, we need to create a new .trex file, referencing our deployed application.

Create a new file, Tutorial.trex and copy-paste the code from Tutorial local.trex in it. Then, you just need to update the url field in source-location to the URL of the deployed application on Netlify. In my case https://helloworldtutorial.netlify.com/index.html:

To make sure it’s working, you can open Tableau and, on a dashboard, select your new Extensions, Tutorial.trex, everything should be working as with the local file.

Anyone who possesses the Tutorial.trex file is now able to use your Extensions.

Your application folder now contains two .trex files. That’s fine as you can use the local one to test the ongoing new features you develop and keep the other one to test the features deployed online.

You can finally push the new .trex file on GitHub so you’ll have a link to share with people (https://github.com/ladataviz/hello_world_extensions_tutorial)

Wrap up

I hope you found this tutorial helpful. Sorry for the mistakes! Don’t hesitate to add comments so I can improve it!

Tristan