Keyboard short for uploading two files in PhpStorm

Question

The problem

In PhpStorm I have a style.css- and a app.js-file that I have to upload to a server over and over again. I'm trying to automate it.

They're compiled by Webpack, so they are generated/compiled. Which means that I can't simply use the 'Tools' >> 'Deployment' >> 'Upload to...' (since that file isn't and won't every be open).

What I currently do

At the moment, every time I want to see the changed I've done, then I do this (for each file):

Navigate to the files in the file-tree (using the mouse)
Select it
The I've set up a shortcut for Main menu >> Tools >> Deployment >> Upload to..., where-after I select the server I want to upload to.

I do this approximately 100+ times per day.

The ideal solution

The ideal solution would be, that if I pressed a shortcut like CMD + Option + Shift + G That it then uploaded a selection of files (a scope?) to a predefined remote server.

Solution attempts

Open and upload.

Changing to those files (using CMD + p) and then uploading them (once they're open). But the files are generated, which means that it takes PhpStorm a couple of seconds to render the content (which is necessary before I can do anything with the file) - so that's not faster.

Macro.

Recording a macro, uploading the two files, looking like this:

If I go to the menu and trigger the Macro, then it works. So far so good.

But if I assign a shortcut key and trigger that shortcut while in a file, then it shows me this:

And if I press '1' (for it to upload to number 1 on the list), then it uploads the file that I'm currently in(!?), and not the two files from my macro.

I've tried several different shortcuts (to rule out some kind of keyboard-shortcut-clash):

CMD + Option + CTRL + 0
CMD + Shift 0
CMD + ;

... Same result.

And the PhpStorm Macro's doesn't seem to give me that many options anyways.

Keyboard Maestro.

I've tried doing it using Keyboard Maestro. But I can't get it setup right. Because if it can't find the folders (if they're off-screen or if I'm in a different project and forgot to adjust they shortcuts), then it blasts through the rest of the recorded actions, resulting in chaos. Ideally it should stop, if it can't find the file on the screen.

Update1 - External program

Even if it's not possible to do in PhpStorm, - are there then another program that I could achieve this with?

Update2 - Automatic Deployment in PhpStorm

I've previously used this, - but I've had happen a few times that I started sync'ing waaaay to many files, overwriting critical core files. It seems smart, but can possibly tear down walls if I've forgotten to define an ignore properly.

I wish there was an 'Automatic Deployment for theses files'-function.

Update3 - File Watchers

I looked into file-watchers ( recommendation from @LazyOne ). Based on this forum thread, then file watchers cannot be used to upload files.

1) Upload will be initiated for the currently selected files (if no selection is made then the current context will be used). 2) You may be seeing the "Choose Server to Upload to" because you have not selected the Default deployment server (even if you have just one defined for this project). 3) I do not know how to upload more than 1 file at random moment of time without selecting them first. — LazyOne
4) Have you checked automatic deployment? It will upload modified files after IDE detects change in them (e.g. after saving them). 5) Because of webpack compilation/processing .. IDE may not detect changes in externally modified files (as it does not check them for changes all the time, only on "File | Synchronize" or when leaving/entering (focusing) the app. Checkout File Watchers -- if configured correctly IDE will be aware what files to check after it's finished running. — LazyOne
Hi @LazyOne. I updated the question with answers to your comments. — Zeth
The idea with File Watcher & combined with Automatic Upload: 1) Create File Watcher that will compile your files (will watch specific files for modification in IDE and call your webpack to do the needed compilation on file save). 2) If you specify paths to those expected files in "Output paths to refresh" field, once File Watcher will finish running IDE will check those files for external modification. 3) IDE will tell "hey, I got modified file here" and If "automatic upload" is enabled, it will initiate an upload for those modified files. — LazyOne
That's how it normally works. Now, the tool that you call in File Watcher must be finishing its job and not keep sitting in the background (in other words, something like webpack --watch (or alike command, that will launch it and it will do compilation in background) is not good for this. It shoudl be more like "webpack execute-that-task" kind of command... — LazyOne

Bedilbek Bedilbek · Accepted Answer · 2020-03-03T13:45:36

It is possible to accomplish it using external program scp (Secure Copy Protocol):

Steps:
1. Create a Scope (for compiled files app.js and style.css)
2. Create a Custom File Watcher with scp over that Scope

Start with Scope:
Create a Local Scope with name scp files for your compiled files directory (I will assume that your webpack compiles into dist directory): Then, to add dist directory into Scope, select that folder and click on Include Recursively. Apply and Move to File Watchers
Create a custom template for File Watcher:
- Choose a Name
- Choose File type as Any
- Choose Scope as scp files(created earlier)
- Choose Program as scp
- Choose Arguments as $FileName$ REMOTE_USER@REMOTE_HOST:/REMOTE_DIR_PATH/$FileName$
- Choose Working directory as $FileDir$

That's it, basically what we have done is every time when a file in that scope changes, that file is copied with scp to the remote server to the corresponding path.

Voila. Apply Everything and recompile your project and you will see that everything is uploaded to the server.

(I assumed that you have already set up your ssh client; Generated public/private keys; Added a public key in your remote server; And, know ssh credentials to connect to your remote server)