How to Integrate Mage Pro with VS Code: Step-by-Step Guide

Link to original article written by Mage DevRel, Cole Freeman: https://www.mage.ai/blog/how-to-integrate-mage-pro-with-vs-code-step-by-step-guide

TLDR

This guide demonstrates how to integrate your Mage Pro environment with Visual Studio Code and Cursor. By implementing Tailscale VPN and Remote SSH connections, you'll gain the ability to develop and manage your data pipelines directly within your preferred code editor, enhancing your development workflow and productivity. The integration provides a coding experience with full access to your Mage Pro features while leveraging the advanced editing capabilities of modern code editors.

Table of Contents

• Introduction to Mage Pro and VS Code integration
• Downloading Tailscale VPN
• Installing and configuring Tailscale
• Creating an Auth Key in Tailscale
• Adding the Auth Key in Mage Pro
• Restarting the cluster
• Verifying the connection to Tailscale
• Setting up VS Code
• Navigating to your user code path
• Finalizing the integration
• Real-time code synchronization
• Conclusion

Introduction to Mage Pro and VS Code integration

Mage Pro’s integration with VS Code and Cursor enable developers to enhance their coding experience while accessing the powerful data pipeline features of Mage Pro. With this integration you can manage your projects from a familiar coding environment and collaborate across teams.

Benefits of integration

• Enhanced development experience: Utilize the robust features of VS Code or Cursor while managing your Mage Pro projects.
• Streamlined workflow: Access all your tools in one place, reducing the need to switch between different applications.
• Improved collaboration: Share your code and collaborate with team members more effectively through integrated tools.

Downloading Tailscale VPN

To connect Mage Pro with VS Code or Cursor, the first step is to download Tailscale VPN. Tailscale provides a secure connection to your environment, ensuring that your data remains protected while you work.

Navigate to the Tailscale website, and hit the download button. Make sure to select the appropriate version for your operating system. Once the download is complete, proceed with the installation.

Installing and configuring Tailscale

Follow the in-app instructions to install Tailscale. The installation process is straightforward, and it will guide you through the necessary steps to get Tailscale running on your system. Once installed, you will need to configure the application to connect to your Mage Pro environment.

Creating an Auth Key in Tailscale

After Tailscale is installed, navigate to the admin console from the main page of their website. Log in to access the settings where you can create an Auth Key.

To generate the Auth Key, follow these steps:

1. Navigate to the Settings tab.
2. Click on Keys.
3. Select Generate Auth Key.
4. Click Generate Key.

Adding the Auth Key to Mage Pro

Once you have your Auth Key, the next step is to integrate it into your Mage Pro setup. Navigate back to your Mage Pro management cluster and follow these steps:

1. Select Edit to add variables.
2. Input your Auth Key into the TS_AUTH_KEY environment variable.

After entering the Auth Key, hit Save Changes. This step is crucial as it allows Mage Pro to authenticate with Tailscale.

Verifying connection to Tailscale

To apply the changes made to the environment variables, you will need to restart your Mage Pro cluster. This ensures that the new Auth Key is recognized and that your connection to Tailscale is established.

Once the cluster restarts, navigate back to your Tailscale admin panel. Here, you should see your cluster environment listed, typically label contains the name of your Mage Pro cluster. Retrieve the address from the address column and open a local terminal to run a command that verifies your connection. Use the following command, replacing PRIVATE_IP_ADDRESS with the actual private IP address from the Tailscale admin panel:

curl <PRIVATE_IP_ADDRESS>:6789/api/status

After executing this command, you should see a return indicating you are connected to your environment.

Setting up VS Code

With Tailscale configured and your connection verified, it's time to set up Visual Studio Code for integration with Mage Pro. First, ensure you have the Remote - SSH extension installed in VS Code. This extension is essential for connecting to your remote environment.

To install the extension, navigate to the Extensions view in VS Code, search for "Remote - SSH," and click Install. Once installed, you can start connecting to your Mage Pro environment.

Connecting to your host via SSH

Open the Command Palette in Visual Studio Code by pressing Ctrl+Shift+P (or Cmd+Shift+P on macOS). Type "Remote-SSH: Connect to Host" and select it.

You will need to enter your full username followed by the private IP address of your Mage Pro environment in the format username@PRIVATE_IP_ADDRESS, and then enter your password. The initial login details can be obtained from the team at Mage. After entering the details, click Connect.

Navigating to your user code path

Once connected, you will need to navigate to your user code path. The default path is typically set to /home/src/default/repo. If you've customized this path, use your specific directory.

In the dialog that appears, simply enter the path and click OK. Your Mage Pro files will begin to download into Visual Studio Code, providing you with immediate access to your project.

Finalizing the integration

At this point, your integration between Mage Pro and Visual Studio Code is nearly complete. Review your project files to ensure everything has downloaded correctly. This step is vital, as it confirms you have access to all necessary components of your Data Pipeline.

To ensure smooth operation, take a moment to familiarize yourself with the folder structure and files available in your workspace. This knowledge will enhance your development experience and streamline your workflow.

Real-time code synchronization

One of the key benefits of connecting Mage Pro with VS Code is the automatic synchronization between environments. When you edit code in VS Code, changes are reflected in your Mage Pro blocks without manual updates.

As you save changes in VS Code, they instantly propagate to your Mage Pro environment through the SSH connection. This two-way sync allows you to:

• Make changes in VS Code and see them immediately in the Mage interface
• Run and test your code immediately from Mage Pro
• Collaborate with team members as changes made in the Mage UI appear in your VS Code editor

The SSH connection creates a unified development experience that combines VS Code's IDE capabilities with Mage Pro's pipeline orchestration features, speeding up development and reducing context-switching.

Conclusion

Congratulations! You have successfully connected your Mage Pro environment with VS Code, enhancing your development capabilities. The combination of VS Code's powerful editing features with Mage Pro's orchestration capabilities gives you the best of both worlds. You'll notice increased productivity as you transition between coding and data pipeline management within a unified workflow. Plus, your team members will appreciate the consistent development environment that makes collaboration straightforward and reduces onboarding time for new projects.

Want to learn more about Mage Pro? Book a demo today!