Developing with Visual Studio Code

Debugging

First, install the following extension:

• Debugger for Firefox

Note: Debugger for Chrome has been deprecated. You can safely delete it as Visual Studio Code now has a bundled JavaScript Debugger that covers the same functionality.

Before starting the debugging session, make sure that Metabase is built and running. Choose menu View, Command Palette, search for and choose Tasks: Run Build Task. Alternatively, use the corresponding shortcut Ctrl+Shift+B. The built-in terminal will appear to show the progress, wait a few moment until webpack indicates a complete (100%) bundling.

To begin debugging Metabase, switch to the Debug view (shortcut: Ctrl+Shift+D) and then select one of the two launch configurations from the drop-down at the top:

• Debug with Firefox, or
• Debug with Chrome

After that, begin the debugging session by choosing menu Run, Start Debugging (shortcut: F5).

For more details, please refer to the complete VS Code documentation on Debugging.

Docker-based Workflow

These instructions allow you to work on Metabase codebase on Windows, Linux, or macOS using Visual Studio Code, without manually installing the necessary dependencies. This is possible by leveraging Docker container and the Remote Containers extension from VS Code.

For more details, please follow the complete VS Code guide on Developing inside a Container.

Requirements:

• Visual Studio Code (obviously)
• Docker
• Remote - Containers extension for VS Code

Important: Ensure that Docker is running properly and it can be used to download an image and launch a container, e.g. by running:

$ docker run hello-world

If everything goes well, you should see the following message:

Hello from Docker!
This message shows that your installation appears to be working correctly.

Steps:

1. Clone Metabase repository

2. Launch VS Code and open your cloned Metabase repository

3. From the View menu, choose Command Palette… and then find Remote-Container: Reopen in Container. (VS Code may also prompt you to do this with an “Open in container” popup). Note: VS Code will create the container for the first time and it may take some time. Subsequent loads should be much faster.

4. Use the menu View, Command Palette, search for and choose Tasks: Run Build Task (alternatively, use the shortcut Ctrl+Shift+B).

5. After a while (after all JavaScript and Clojure dependencies are completely downloaded), open localhost:3000 with your web browser.

See here for more on running development branches of Metabase using Docker.