Let's Make a Tableau Extension - P2

Let's Make a Tableau Extension - P2

Introduction

In Let’s Make a Tableau Extension - P1 we created our first locally hosted Tableau Extension. In this tutorial, we are going to go from a locally hosted extension to an externally hosted extension.

This way others can make use of your hard work without the need to install and run their own web-servers. Send them the .trex file and they are good to go.

There are a couple steps in this tutorial that will assume you’ve completed the previous part of this series. So, if you haven’t, be sure to go back and take those first steps before moving on.

Step 1

Fork (copy) and clone the Github repository of the extension we made in P1 here.

git clone https://github.com/robcrock/my-extension.git extension-p2

If you are going from one tutorial to the next you might already have that directory on your computer, which is fine too.

Once you have cloned the repo, your folder structure should look something like this.

Initial directory structure from the last tutorial

Initial directory structure from the last tutorial

Step 2

Log into Netlify to start creating your first deployment.

“A deployment represents a copy of your application hosted in our cloud platform, accessible to you and your users via HTTP/2.”

Netlify home page

Once logged simply drag the folder we just cloned onto the Netlify page to deploy.

Drag and drop deploy

You may get a couple confirmation steps if this is your first deployment, but once through those steps you’ll see a successfully deployed site.

To visit the site just click on the URL Netlify randomly generated.

Randomly generated URL

Netlify provides these for free, but you can customize these with their paid plans.

Step 3

Now the last step is updating the URL in our .trex file. Replace the URL reference the localhost with that randomly generated URL from Netlify and you’re good to go.

Update URL

Let’s try out our new extension in Tableau.

Tableau test run

How cool is that! You just deployed your first Tableau extension 🍾🎉🙌

Optional - Github Integration

As fun as drag-n-drops for us Tableau users this approach can be easily automated by integrating your repository with Github.

To do this we first navigate to our extension-p2 directory via the command line. Here you can either choose to remove the manifest file or push everything up to Github.

Remove manifest

If you do opt to remove the manifest you’ll need to run git rm manifest.trex so your git branch is clean. Any of your other changes should be staged by running git add . Once your git branch is clean with can make our commit and push our changes.

Now, while logged in, let’s hope back to the Netlify home page. In the top right corner, you’ll see a new site from git button.

Since my remote repository name is still the my-extension that’s what will show up in the list of git repositories Netlify presents.

my-extension repo

Of course, there are more setting you and your dev team can play with here, but let’s click deploy for the sake of simplicity.

github deployment

That will generate a new URL we can continue to reference in our manifest file as we make modifications and git commits. Every time a new git push is made Netlify will deploy our site again without changing the URL.

Below you can see a couple deployments Netlify carried out as I was making commits to the integrated git repo.

Deployment history

Conclusion

There are several different options (Now, Apache, other) to choose from when deploying your site. In this tutorial, we walked through deployment with one of the fastest and most user-friendly options I’ve found to demonstrate just how easy deployment can be.

If you’d like to have a little more fun and practice with deploying extensions try deploying some of the code I wrote last month in the 30 Days of JS Challenge and share your work. There are a lot of interesting examples I made last month, from a photo booth to and text to speech simulator. Heck, you could even bring Wack-a-mole into Tableau!

In Let’s Make an Extension - P3, I’ll be walking through the process of getting your extension into the Tableau gallery. Now I just need to go make an extension for the gallery myself ;)

As always, I thank thank thank you for reading. Please let me know if you have any questions by pinging me at any of the socials below 👇

#KnowledgeGaps | 30 Days of JavaScript Challenge

#KnowledgeGaps | 30 Days of JavaScript Challenge