Before we get started with the creation of our Tableau Extensions, we will need to install our tools and set up our environment to make sure things are as streamlined as possible; in the rest of this section, we are going to go through setting up our tools.
The following is a written walkthrough for downloading and installing the various required technologies, however, if you prefer we also have video tutorials on installing each of our required tools.
Note: I am going to show you how to install everything on Windows, and keep in mind, these are my chosen tools, however, the world of Web development is progressing at a very rapid pace, so please feel free to use whichever tools suits you best.
Microsoft VS Code
Microsoft Visual Studio (VS) Code is a source code editor developed by Microsoft for Windows, Linux and macOS. It includes support for debugging, embedded Git control, syntax highlighting, intelligent code completion, snippets, and code refactoring. It is also customizable, so users can change the editor’s theme, keyboard shortcuts, and preferences. It is free and open-source, although the official download is under a proprietary license.
Visual Studio Code is based on Electron, a framework which is used to deploy Node.js applications for the desktop running on the Blink layout engine. Although it uses the Electron framework, the software does not use Atom and instead employs the same editor component (codenamed “Monaco”) used in Visual Studio Team Services (formerly called Visual Studio Online).
In the Stack Overflow 2018 Developer Survey, Visual Studio Code was ranked the most popular development environment tool, with 34.9% of 75,398 respondents claiming to use it.
Installing Microsoft VS Code
- Go to https://code.visualstudio.com and click on Download for Windows; this will download the VSCodeUserSetup-x64-x.x.x.exe executable file. Once downloaded, double-click on this executable file to start the installation
- In License Agreement, read through the license agreement and click I accept the agreement (if you agree)
- In Select Destination Location, choose your installation directory and click Next (I keep this as the default)
- In Select Start Menu Folder, choose your Start Menu Folder and click Next
- In Select Additional Tasks, make sure that Add to PATH is selected. I also select Create a desktop icon, Add “Open with Code” action to Windows explorer file context menu and Add “Open with Code” action to Windows Explorer directory context menu
- In Ready to Install, review the installation settings and click Install
- Once the installation is complete, click Finish
Congrats, we have now installed Microsoft VS Code. Feel free to open Microsoft VS Code (I will call this VS Code from now on) and have a look, we will be going through the required elements throughout the course.
Node.js (and NPM)
Node.js is an open-source, cross-platform JavaScript run-time environment that executes JavaScript code outside of a browser. Historically, JavaScript was used primarily for client-side scripting, in which scripts written in JavaScript are embedded in a webpage’s HTML and run client-side by a JavaScript engine in the user’s web browser. Node.js lets developers use JavaScript to write Command Line tools and for server-side scripting—running scripts server-side to produce dynamic web page content before the page is sent to the user’s web browser. Consequently, Node.js represents a “JavaScript everywhere” paradigm, unifying web application development around a single programming language, rather than different languages for server-side and client-side scripts.
Node Package Manager (NPM) is a package manager for the JavaScript programming language. It is the default package manager for the JavaScript runtime environment Node.js. It consists of a command-line client, also called npm, and an online database of public and paid-for private packages called the npm registry. The registry is accessed via the client, and the available packages can be browsed and searched via the npm website. The package manager and the registry are managed by npm, Inc.
Installing Node.js (and NPM)
- Go to https://nodejs.org and select the version Recommended for most users; this will be the most stable version, and for this course, we do not require the latest build. This should download the node-vXX.X.X-x64.exe executable file. Once downloaded, double-click on this executable file to start the installation
- Once the executable starts up, it will perform several checks on your machine, once the checks are completed, the Setup Wizard is ready to install Node.js on your machine. Click on Next
- In End-User License Agreement, read through the license agreement and click I accept the terms in the License Agreement (if you agree). and click Next
- In Destination Folder, choose your installation directory and click Next; I leave this as the default
- In Custom Setup, make sure everything is select and click on Next
- In Tools for Native Modules, you may check the Automatically install the necessary tools and click Next; this is not essential
- In Ready to install Node.js, click Install; you may be prompted by Windows to allow the installation
- In Completed the Node.js Setup Wizard, click on Finish; if you selected Automatically install the necessary tools, tools will start installing
Congrats, you have now installed Node.js as well as NPM. for now, we will test that everything is working as planned.
- Click on the Windows Icon and type Command Prompt and open this application
- In the Command Prompt, type node and click enter to start up Node.js command line.
- You should see Welcome to Node.js followed by the version number. Underneath this, you should see a > sign, type .exit to exit the Node.js command line.
If this works, Node.js has been installed and is working as expected
In the Command Prompt, type npm and click enter. You should see the usage options for the npm command. Again, if you are seeing this, it means that NPM is installed and working
GIT
Git (/ɡɪt/) is a version control system for tracking changes in computer files and coordinating work on those files among multiple people. It is primarily used for source code management in software development, but it can be used to keep track of changes in any set of files. As a distributed revision control system, it is aimed at speed, data integrity, and support for distributed, non-linear workflows.
Installing GIT
- Go to https://git-scm.com and select Download X.X.X for Windows; get the latest version; this should download the Git-2.25.0-64-bit.exe executable file. Once downloaded, double click on this executable file to start the installation
- Read through the GNU General Public License and click Next
- In Select Destination Location, choose your directory and click next (I leave this as the default)
- In Select Components, leave the default selected and click Next
- In Select Start Menu Folder, leave the default selected and click NextIn Choosing the default editor used by Git, select Use Visual Studio Code as Git’s default editor and click Next
- In Adjusting your PATH environment, select Git from the command line and also from 3rd-party software and click Next
- In Choosing HTTPS transport backend, select Use the OpenSSL library and click Next
- In Configuring the line ending conversations, select Checkout Windows-style, commit Unix-style line endings and click Next
- In Configure the terminal emulator to use with Git Bash, select Use MinTTY (the default terminal of MSYS2) and click Next
- In Configure extra options, select Enable file system caching and Enable Git Credential Manager and click Install; once the installation is completed click Finish
Congrats, you have not installed Git. Let us do a quick test to ensure that Git has been installed
- Open up a new Command Prompt, type git –version and you should see the version of Git that you have just installed
GitHub
GitHub Inc. is a web-based hosting service for version control using Git. It is mostly used for computer code. It offers all of the distributed version control and source code management (SCM) functionality of Git as well as adding its own features. It provides access control and several collaboration features such as bug tracking, feature requests, task management, and wikis for every project.
GitHub offers plans for both private repositories and free accounts which are commonly used to host open-source software projects. As of June 2018, GitHub reports having over 28 million users and 57 million repositories (including 28 million public repositories.), making it the largest host of source code in the world.
On June 4, 2018, Microsoft announced it had reached an agreement to acquire GitHub for US$7.5 billion. The purchase is expected to close by the end of the year.
Signing up for GitHub
- Go to https://github.com, enter a username (must be unique on the GitHub platform), Email and Password (Make sure it’s at least 15 characters OR at least 8 characters including a number and a lowercase letter) and click Signup for GitHub. You will then be prompted to verify your account before you can click on Next: Select a plan
- Choose the Individual Plan (which is Free) and go through the welcome to GitHub Survey before clicking on Complete Setup
- The final step is to verify your email address
Do not worry about creating a repository, we will do this later, but you should now see the following:
YARN
Yarn is a package manager for your code. It allows you to use and share code with other developers from around the world. Yarn does this quickly, securely, and reliably so you don’t ever have to worry.
Yarn allows you to use other developers’ solutions to different problems, making it easier for you to develop your software. If you have problems, you can report issues or contribute back, and when the problem is fixed, you can use Yarn to keep it all up to date.
Code is shared through something called a package (sometimes referred to as a module). A package contains all the code being shared as well as a package.json file which describes the package.
We will use Yarn to get a hold of various Javascript packages.
Installing YARN
- In Command Prompt, type in npm install -g yarn@berry; yep, that is why we love npm
- In Command Prompt, type in yarn –version to see if YARN has been correctly installed
You can read more about YARN here: https://legacy.yarnpkg.com/en/docs/getting-started
Gulp
Gulp is an open-source JavaScript toolkit used as a streaming build system in front-end web development. We will leverage Gulp to automate our various build tasks such as Obfuscation, Minifying our files, SCSS to CSS compilation.
Installing Gulp
- In Command Prompt, type in npm install -g gulp-cli; again, as easy as that
- In Command Prompt, type in gulp –version to see if Gulp has been correctly installed
Prettier
Prettier is an opinionated code formatter; Prettier enforces a consistent code style (i.e. code formatting) across your entire codebase because it disregards the original styling. This is a great time saver and does make your source code easier to read and understand.
Installing Prettier
- In Command Prompt, type in npm install -g prettier to install the packed using npm
- In VS Code, go to Extensions, and in Search Extensions in Marketplace search for Prettier. Click in install to enable this Extension.
In the VS Code File Menu, go to Preferences and select Settings
Search for Format On Save and enable this option; this now means that every time you save, Prettier will automatically format your code
ESLint
ESLint is a static code analysis tool for identifying problematic patterns found in JavaScript code. Rules in ESLint are configurable, and customized rules can be defined and loaded. ESLint covers both code quality and coding style issues.
In a nutshell, Prettier and ESLint make a great combination, as Prettier takes care of the look and feel of your code, and ESLint takes care of the style of your code to make sure your code is in good shape.
Installing ESLint
- In Command Prompt, type in npm install -g eslint to install ESLint using npm
- In Command Prompt, type in npm install -g eslint-config-prettier eslint-plugin-prettier to install two additional packages that combine Prettier with ESLint
- In VS Code, go to Extensions, and in Search Extensions in Marketplace search for ESLint. Click in install to enable this Extension.
Combining Prettier and ESLint will really save you a lot of time and headaches in the future.
Note: we will still need to enable Prettier and ESLint for each of our projects.
HTTP-SERVER
http-server is a simple, zero-configuration command-line http server. It is powerful enough for production usage, but it’s simple and hackable enough to be used for testing, local development, and learning.
Install Http-Server
- In Command Prompt, type in npm install -g http-server to install an easy-to-use webserver
- You can launch the server by going to the project directory and typing in http-server; we will use this later when putting together our first project and testing.
You can also use lite-server or live-server, it is really up to you as all three are popular and are adequate for what we are doing.
Google Chrome
Google Chrome is a cross-platform web browser developed by Google. It was first released in 2008 for Microsoft Windows and was later ported to Linux, macOS, iOS, and Android. The browser is also the main component of Chrome OS, where it serves as the platform for web apps.
We will be using Google Chrome to debug our Extensions, plus, I would be quite surprised if Google Chrome is not already your default web browser.
You can download and install Google Chrome here: https://www.google.com/chrome