ScriptRunner Connect External Coding Series #1: Your IDE, Your Rules

The Great Enhancement: Combine Cloud Power with Local Comfort

ScriptRunner Connect's web interface is already powerful – you can build sophisticated automations, test them, and deploy them seamlessly. But External Coding takes this to the next level by letting you develop locally while keeping all that cloud functionality. It's not about replacing the web interface; it's about giving you choice and flexibility.

Why This Matters (Especially for Accessibility)

Here's something beautiful about having options: different developers have different needs, and that's perfectly okay. While ScriptRunner Connect's web interface works great for many developers, some of us have specific accessibility requirements or workflow preferences that are best served by local development tools.

External Coding means:

• Your screen reader works optimally with your carefully configured desktop IDE
• Your custom accessibility settings remain exactly as you've set them up
• Your workflow stays consistent across all your development projects
• You get choice – use the web interface when it makes sense, use your local IDE when that's better
  
  

The Magic Behind the Scenes

ScriptRunner Connect's External Coding uses SFTP (think of it as a secure bridge) to connect your local IDE with the cloud execution environment. It's like having your cake and eating it too – you get professional local development with cloud-powered deployment.

Here's what makes it special:

Pre-configured Project Structure

No more staring at a blank project wondering where to start. ScriptRunner Connect provides a complete project template with:

• TypeScript configurations that actually make sense
• ESLint and Prettier already set up (because life's too short for arguing about semicolons)
• Jest testing framework ready to go
• All the ScriptRunner Connect type definitions included

Professional IDE Support

Whether you're using WebStorm, Visual Studio Code, or any other professional IDE:

• Full TypeScript IntelliSense and auto-completion
• Advanced debugging capabilities
• Integrated version control (Git, anyone?)
• Your favourite extensions and plugins work perfectly

Secure Development Environment

• Encrypted SFTP connections keep your code safe
• Private key authentication (no passwords floating around)
• Proper credential management patterns
  
  

Setting Up Your Development Paradise

Let's walk through setting up WebStorm with ScriptRunner Connect, but first – here's a workflow tip that'll save you headaches later. Before enabling External Coding, spend a few minutes in your workspace setting up Connectors, API Connections, Event Listeners, and any Scheduled Triggers you'll need (even as empty scripts' placeholders). This way, when you download the project structure, all the dependencies are already baked into your package.json – no more switching back and forth to add missing packages.

Don't worry if you use a different IDE – the principles are universal, and the accessibility benefits apply everywhere.

Step 1: The Great Enablement

First, head to your ScriptRunner Connect workspace:

1. Navigate to Workspace Settings
2. Select Remote File System
3. Click Enable SFTP Server

Pro tip: This is where you'll get your connection details. Write them down or take a screenshot – you'll need them in a moment.

Step 2: Generate Your Secret Credentials

Click Generate SFTP Credentials and you'll receive:

• A unique username per workspace (like having personalised VIP passes - each workspace gets its own username that's unique to you, but you only need one private key that works across all your workspaces)
• A private key download (think of it as your digital house key)
• Connection details (the address of your new coding paradise)

Security reminder: Treat these credentials like your Netflix password – keep them safe and don't share them with that colleague who still uses "password123" for everything.

Step 3: WebStorm Magic Configuration

Open WebStorm and create a new project in your preferred local directory. Then:

1. Go to Tools > Deployment > Configuration
2. Add a new SFTP server with your ScriptRunner Connect details
3. Test the connection (there's nothing quite like that green "Connection successful" message)
4. Set up path mappings so WebStorm knows where everything goes

Step 4: Download Your Pre-built Paradise

Here's where it gets exciting. ScriptRunner Connect has already prepared a complete project structure for you:

/
├── .vscode/               # VS Code configurations
├── node/                  # Local development files
│   ├── tests/             # Jest test files
│   ├── apiRegistry.ts     # Custom API clients
│   ├── global.d.ts        # Global type definitions
│   ├── jest.config.ts     # Jest configuration
│   ├── runtimeMocks.ts    # ScriptRunner Connect runtime mocks
│   └── tsconfig.json      # Node-specific TypeScript configuration
├── scripts/               # Your ScriptRunner scripts
│   └── api/               # API integration scripts
├── .gitignore             # Git ignore patterns
├── .prettierrc            # Prettier code formatting configuration
├── AI.md                  # AI development documentation
├── AI_TESTING.md          # AI testing guidelines
├── eslint.config.js       # ESLint configuration
├── ev.ts                  # Environment variables
├── package.json           # Dependencies
├── tsconfig.base.json     # TypeScript base configuration
└── tsconfig.json          # TypeScript configuration

Use WebStorm's Tools > Deployment > Browse Remote Host to see this structure, then download it all to your local machine.

Step 5: Install Dependencies and Start Coding

Open your terminal in WebStorm (or use the integrated terminal – accessibility bonus: it inherits all your system's terminal accessibility settings) and run:

npm install

Watch as all the dependencies install automatically. It's like having a personal assistant who knows exactly what you need.

Your First Script: A Victory Lap

Let's create something simple but satisfying – a Jira project creation event handler. This will involve creating two files: the API integration and the event handler itself.

Step 1: Create the API Integration

First, let's create a helper function to fetch projects. Navigate to the scripts/ directory and create the folder structure cloud/atlassian/jira/, then create Projects.ts


Step 2: Create the Event Handler

Now, in the scripts/ directory, create your main event handler OnJiraCloudProjectCreated.ts:

Your project structure should now look like this:

scripts/
├── OnJiraCloudProjectCreated.ts          # Main event handler
├── cloud/atlassian/jira/
│   └── Projects.ts                       # API integration helper
└── api/                                  # API connections (auto-generated)
    └── jira/cloud/
        └── index.ts                      # Jira Cloud API client

Step 3: Upload Your Scripts to ScriptRunner Connect

Before you can use your scripts with connectors and event listeners, you need to upload them to ScriptRunner Connect via SFTP:

Method 1: Manual Upload (Recommended for First Time)

1. In WebStorm, right-click on the scripts/ folder in your Project view
2. Select Deployment > Upload to ScriptRunner Connect
3. WebStorm will upload both your new files to the cloud environment
4. Monitor the Event Log at the bottom of WebStorm to see upload progress

Method 2: Upload Individual Files

1. Right-click on OnJiraCloudProjectCreated.ts
2. Select Deployment > Upload to ScriptRunner Connect
3. Repeat for the cloud/atlassian/jira/Projects.ts file

Important: Auto-Upload Considerations

We recommend disabling WebStorm's auto-upload feature while learning ScriptRunner Connect External Coding. WebStorm can automatically upload files whenever you save them, but this can lead to unintended deployments during development.

To check your auto-upload settings:

1. Go to Tools > Deployment > Options
2. Look for Upload changed files automatically
3. Keep this disabled until you're comfortable with the workflow
4. When you're ready to enable it later, use it cautiously in team environments to avoid overwriting others' changes

Verify Upload Success

1. Go to your ScriptRunner Connect workspace
2. Navigate to the Scripts section
3. You should see your uploaded files:
   1. OnJiraCloudProjectCreated.ts in the root scripts directory
   2. Projects.ts in the cloud/atlassian/jira/ subdirectory
4. Click on each file to verify the content uploaded correctly

Accessibility tip: The Scripts section in ScriptRunner Connect displays your file structure in a clear, navigable format that works well with screen readers.

The Accessibility Advantage

Let's pause and appreciate what just happened. You:

• Used your familiar IDE with all its accessibility features
• Leveraged your screen reader's desktop application support
• Maintained your custom keyboard shortcuts and workflows
• Got full IntelliSense and code completion (which works beautifully with screen readers)
• Can use your favourite accessibility extensions and plugins
• Seamlessly deployed to the cloud while staying in your accessible environment

This isn't just about convenience – it's about inclusive development. When tools work with your existing accessibility setup, you can focus on building amazing automations instead of fighting with unfamiliar interfaces.

Setting Up Connectors: Bringing It All Together

Your script is just the beginning. To make it work with actual Jira events, you need to set up connectors and event listeners in ScriptRunner Connect:

Creating Your Jira Cloud Connector

1. Navigate to Connectors in your workspace
2. Create a new Atlassian Jira Cloud connector
3. Follow the setup wizard (it's surprisingly painless)

Setting Up Event Listeners

1. Go to Event Listeners
2. Create a new listener for Project Created events
3. Link it to your uploaded script: /scripts/OnJiraCloudProjectCreated.ts
4. Configure the webhook in your Jira Cloud instance

The beauty? You developed locally with full accessibility support, then deployed to the cloud with a few clicks.

Pro Tips for Success

For Screen Reader Users

• WebStorm's screen reader support is excellent – make sure to enable Settings > Appearance & Behaviour > Accessibility
• The SFTP file browser reads file structures clearly
• Code completion announcements work perfectly with most screen readers

For Everyone

• Use auto-upload cautiously in team environments
• Keep your SFTP credentials secure (add them to your password manager)
• Take advantage of WebStorm's built-in Git integration for version control
  
  

What's Next?

You've just set up a professional development environment that respects your accessibility needs and workflow preferences. In our next post, we'll explore "Testing Without Tears: Mocking APIs Like a Pro" – because nobody should have to debug in production (we're looking at you, person who deployed on Friday afternoon).

We'll cover:

• Local testing strategies that work with screen readers
• Mocking ScriptRunner Connect APIs for offline development
• Creating test suites that actually help instead of hindrance
  
  

The Bottom Line

ScriptRunner Connect's External Coding isn't just a feature – it's a statement that professional development should be accessible to everyone, regardless of their tools, accessibility needs, or preferences. You shouldn't have to choose between building powerful Atlassian automations and using the development environment that works best for you.

Your IDE, your accessibility tools, your workflow, your rules. Now go build something amazing.