How To deploy Tableau Dashboard Extensions Web App locally with Docker

0 votes

Tableau dashboard extensions (https://developer.tableau.com/extensions) are html/css/js web applications that may be utilised within Tableau. I've made one, and now I'm being requested to "dockerize" it locally so that it can be run on an AWS EC2 instance or a Google Cloud Platform server. I understand the benefits of Docker and that I need to construct a Dockerfile for this, but I'm having trouble putting it into practise. Docker is now installed on my machine. Here's what my terminal (on a Mac) said:

> docker --version
Docker version 19.03.5, build 633a0ea
> npm --version
6.13.4
> node --version
v12.15.0

Tableau dashboards extensions (https://www.tableau.com/developer/extensions) are essentially html/css/js web apps that are used for within Tableau. I have created one, and now I have been asked to "dockerize" the app locally, so that it can then be run on either an AWS EC2 instance or GCP server. I understand the benefits of Docker, and that I need to create a Dockerfile for this, however I am struggling with the implementation of this. I have installed Docker on my computer. Here is some output from my terminal (on Mac):

> docker --version
Docker version 19.03.5, build 633a0ea
> npm --version
6.13.4
> node --version
v12.15.0

I have a directory for my Tableau extension, with the following files included:

  • my_web_app.html (the main JS is included as a script in the html file)
  • d3.v5.min.js (JS with d3 library, loaded into html file)
  • package.json
  • package-lock.json
  • my_web_app.trex (the .trex file is the entrypoint into the app for Tableau (i believe))
  • tableau.extensions.1.latest.js (JS with the tableau extensions API, loaded into html file)

there is no backend to this app, and in order to run my web app locally, I currently just run npm start from my command line, from within this directory.

How can I "dockerize" this web app so that I can run it locally with docker run... in terminal? Should I, for example, look into how to deploy a Node.js app with Docker (for which there are numerous examples), or a npm programme with Docker, or anything similar? Because I don't need node index.js to run this app, I don't think I need a node.js dockerfile, however I'm not sure what is required.


Any assistance, clarification, references, or other information would be greatly appreciated; thank you!

Edit1: Since there's no backend to my app, I don't (at least, I don't think) have an index.js or server.js file in my directory, which I think is causing some confusion for me with how to do this.

Edit2: Please let me know if I can send any addt'l info on this. I am actively working on this and will update the Q / post an answer if I can resolve.

Edit3: Here's my current efforts by the way. I have the following file named Dockerfile, that looks like:

FROM node:12
WORKDIR /app
COPY package.json /app
RUN npm install
COPY . /app
CMD npm start
EXPOSE 8081

I ran docker build (I am already cd'd into the directory with the app) and received the following output:

> docker build . -t shot_charts_docker_container
Sending build context to Docker daemon  119.2MB
Step 1/7 : FROM node:12
12: Pulling from library/node
c0c53f743a40: Pull complete 
66997431d390: Pull complete 
0ea865e2909f: Pull complete 
584bf23912b7: Pull complete 
3c4c73959f29: Pull complete 
63e05266fc4b: Pull complete 
b00869e1130e: Pull complete 
45b49819ba5a: Pull complete 
87465fce1a7f: Pull complete 
Digest: sha256:facc1cbde6e5aa3255092b1a1417451953c80bd31ab5a4403f8bcd90b90a8407
Status: Downloaded newer image for node:12
 ---> d834cbcf2402
Step 2/7 : WORKDIR /app
 ---> Running in a30398234870
Removing intermediate container a30398234870
 ---> da3b6160bd05
Step 3/7 : COPY package.json /app
 ---> 7459e2d070b9
Step 4/7 : RUN npm install
 ---> Running in 0f7eeae1dfde
npm WARN deprecated circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor.

> ejs@2.7.4 postinstall /app/node_modules/ejs
> node ./postinstall.js

Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)

added 698 packages from 479 contributors and audited 7147 packages in 19.527s

15 packages are looking for funding
  run `npm fund` for details

found 1 high severity vulnerability
  run `npm audit fix` to fix them, or `npm audit` for details
Removing intermediate container 0f7eeae1dfde
 ---> 8a2667e42b0a
Step 5/7 : COPY . /app
 ---> debe78f1501a
Step 6/7 : CMD npm start
 ---> Running in 58b466b8dde8
Removing intermediate container 58b466b8dde8
 ---> 7b26023a3b1b
Step 7/7 : EXPOSE 8081
 ---> Running in 6c5d2c9d8012
Removing intermediate container 6c5d2c9d8012
 ---> fd2ef4b32da5
Successfully built fd2ef4b32da5
Successfully tagged shot_charts_docker_container:latest

I removed some warnings from the above output in order to shorten it for this post, as I didn't think the warnings we're relevant. It seems like I am on the right path, but I am not 100% sure...

Edit4: I then ran docker run -p 8080:8080 shot_charts_docker_container and received the following output:

> extensions-api-sdk@0.1.0 start /app
> node node_modules/http-server/bin/http-server -p 8765

Starting up http-server, serving ./
Available on:
  http://127.0.0.1:8765
  http://172.17.0.2:8765
Hit CTRL-C to stop the server

however when I went to visit those URLs, neither one seemed to work.

Edit5: In case this is helpful, here's what I receive from running docker image ls:

> docker image ls
REPOSITORY                     TAG                 IMAGE ID            CREATED             SIZE
shot_charts_docker_container   latest              fd2ef4b32da5        7 minutes ago       1.17GB
node                           12                  d834cbcf2402        8 days ago          916MB
hello-world                    latest              fce289e99eb9        14 months ago       1.84kB

and from docker container ls

> docker container ls
CONTAINER ID        IMAGE                          COMMAND                  CREATED             STATUS              PORTS                              NAMES
8d71818baf51        shot_charts_docker_container   "docker-entrypoint.s…"   4 minutes ago       Up 4 minutes        0.0.0.0:8080->8080/tcp, 8081/tcp   stupefied_kalam

Edit6: Not sure what else I can share to help with this, maybe info from within the package.json?

Mar 25 in Tableau by Neha
• 6,260 points
15 views

1 answer to this question.

0 votes

There is a misalignment between the ports that the server (the one within the Docker container) listens on and the ports that Docker is attempting to expose to the outside world.

Starting up http-server, serving ./
Available on:
  http://127.0.0.1:8765
  http://172.17.0.2:8765
Hit CTRL-C to stop the server

The server is shown as listening on port 8765 in this output, but your docker ls command displays 0.0.0.0:8080->8080/tcp, indicating that the wrong ports have been mapped!

Solution
EXPOSE the ports that the server listens on in your Dockerfile.

8765 EXPOSE
Map those ports to whatever port you choose when executing the image.

shot charts docker container docker run -p 8765:8765
8765:8765 instructs Docker to map port 8765 (the first number) on the HOST to port 8765 on the CONTAINER (the second number, the port we EXPOSE).

The server should now be accessible at http://localhost:8765 in most cases.

answered Mar 29 by Vaani
• 5,040 points

Related Questions In Tableau

+1 vote
1 answer
0 votes
1 answer

How to combine rows with same information in Tableau

@Ghost, Tableau has a function RANK_UNIQUE which you ...READ MORE

answered May 25, 2018 in Tableau by Atul
• 10,230 points
5,978 views
+1 vote
1 answer

How to perform top N fields with nested sort in tableau

You can use the following steps: Sort 'State' ...READ MORE

answered Aug 4, 2018 in Tableau by sdfg
• 5,550 points
2,743 views
0 votes
1 answer

How to get multiple Sets of Measure Names with different Filters on a single sheet in Tableau?

The easiest solution to your query is: 1) ...READ MORE

answered Aug 23, 2018 in Tableau by Naruto
• 710 points
10,888 views
+2 votes
1 answer
+2 votes
1 answer

Deploy Docker Containers from Docker Cloud

To solve this problem, I followed advice ...READ MORE

answered Sep 3, 2018 in AWS by Priyaj
• 58,060 points
1,553 views
0 votes
1 answer

How do i get datetime into a tableau extract with pantab?

Panda dtypes handle dates and strings as ...READ MORE

answered Mar 14 in Tableau by Vaani
• 5,040 points
31 views
0 votes
1 answer

Tableau: How to create a filter based of 3 different columns?

The case you're using for filters is ...READ MORE

answered Mar 16 in Tableau by Vaani
• 5,040 points
174 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP