Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Make supports writing custom apps in Visual Studio Code (VS Code) with the Make Apps Editor extension.
You can get the VS Code extension from the VS Code Marketplace or install it in the Extensions tab in VS Code.
Write and edit the custom app configuration with the VS Code extension as you would edit a JSON of JavaScript file on your PC. The custom app configuration is downloaded to your PC when you open it from VS Code and uploaded to Make when you save it. The custom app configuration is stored on your PC as temporary files. The temporary files are deleted after you close the configuration.
The custom app configuration is associated with your account in Make. Communication with the VS Code extension and your Make account is authorized with an API key.
To set up the VS Code extension you must provide an API key with the appropriate API key scopes. Generate a new Make API key if you don't have one.
If you notice any bugs in the Make Apps Editor, please don't hesitate to contact our support team.
You can build a custom app in Make in a variety of ways.
Here we show two methods: through the Make web interface or with vibe coding.
The Make web interface lets you create and manage the custom app configuration directly within the Make platform. It offers a graphical interface, allowing you to easily build the app by setting up connections, modules, and parameters and personalizing the app behavior.
You can get the extension from the or install it in the Extensions tab in VS Code.
Coming soon.
Please be advised that this feature is in beta so it may encounter occasional bugs or inconsistencies.
The Compare with Make tool allows you to compare the code in your local app with the code in your Make app.
With this feature you can easily identify differences, track changes, and ensure consistency between the local and Make apps.
To compare the code of a local component with a remote component, right-click the local component block and select Compare with Make (beta).
The local code is on the right side and the remote code is on the left.
In the left navigation, click Custom Apps.
You may need to first click More to see this option.
The Custom Apps dashboard is where you can create a new app, see your existing apps, and see the status of your app (public or private).
See the Create your first app section to get started.
After completing the initial set up of your app, you can use the web code editor to build your app.
The following are helpful features of the editor:
Hints with links to documentation for more information.
A format code button with a label showing the data format. The available data formats are:
jsonc
json
javascript
markdown
Context-aware code suggestions for the jsonc data format. The web code editor gives you hints about parameters or properties you can add to the custom app code. The code suggestions even work for RPCs.
Hints displayed when hovering over the custom app configuration.
Custom app code validation for the jsonc data format. If you misspell a code property name or if you place a property in an invalid code section, the web code editor highlights the error.
A Save changes button to save changes in all editor boxes on the page.
Hovering over built-in IML functions shows detailed information.
Hovering over custom IML functions provides a link to the function definition.
Controls to expand and collapse the code. To view the controls, hover over the space between your code and editor line numbers.
The editor highlights the IML syntax so it's distinct from the rest of the code.
The web code editor is built on the same backend as the Visual Studio Code. If you know VS Code, you will find that some shortcuts also work in the web code editor. Some of the most useful web code editor shortcuts are:
For Windows users:
Ctrl + Shift + H
Show a cheat sheet with selected shortcuts
Ctrl + S
Save changes to all of the editor boxes on the page
Ctrl + F
Search in the editor box content
Ctrl + H
For MacOS users:
Ctrl + Shift + H
Show a cheat sheet with selected shortcuts
Cmd + S
Save changes to all of the editor boxes on the page
Cmd + F
Search in the editor box content
Opt + Cmd + F
For a full reference of the web code editor shortcuts check the official VSCode documentation and the official VSCode shortcuts cards:
Your browser might interpret some keyboard shortcuts differently. For example, the shortcut Ctrl + N creates a new file in VSCode, but in Google Chrome the shortcut creates a new browser window instead.
Search and replace in the editor box content
Ctrl + Space
Show a list of code suggestions valid in the current cursor context
Shift + Alt + F
Format code
Ctrl + /
Toggle line comments
F1
Display web code editor command and shortcut reference
Search and replace in the editor box content
Ctrl + Space
Show a list of code suggestions valid in the current cursor context
Shift + Opt + F
Format code
F1
Display web code editor command and shortcut reference
You can write tests for your custom IML functions. Use the it function and asserts.
function formatUsername(user) {
if (
it("should format full name correctly", () => {
The it function accepts exactly two parameters, the name of the test and the code to run. In this code, we can verify expected outputs using assert.ok() function.
When using IML functions that work with date and time, remember to set the correct timezone in extension settings. The accepted format is the .
For example "Europe/Prague"
To run a test on a specific function, right-click the function name in the tree and select Run IML test.
The test starts and the output is in the IML tests output channel.
Once you finish the development of new changes and components in Make, you can push the changes to the local app.
In Visual Studio Code, open the local directory with the local app file.
Locate the makecomapp.json file and right-click. Select Pull All Components from Make (beta) option.
Select the testing app origin.
All changes in the existing components will be pulled into the local components. If there is a new component, a dialog will appear. Either confirm the creation of the component by pressing Enter or click Ignore permanently/do not map with the remote option.
Collaborative development is facilitated by the Git for apps feature in the VS Code extension. The supported operations are documented in this section.
To start collaborative development, make sure that you have set up the testing and production app versions.
Each collaborating developer should have their testing app in Make, connected to the local app from the Git repository.
Owner of the production app: Every app in Make can be owned by a single Make account. The owner of the production app manages the deployment of the new local app version to the Make app.
Developers of the testing apps: Each developer manages their own testing app in Make, which is connected to the local app from the Git repository.
Below is a diagram explaining how developers can collaborate on app development.
To configure VS Code, first .
Then install the Make Apps Editor. You can get the Make Apps Editor from the or install it in the Extensions tab in VS Code.
Click the Make icon on the VS code sidebar. This activates the Map Apps Editor.
If you haven't set up a development environment, you will see a message in a pop-up window.
Now that you have and , you can now create your app.
To create an app in VS Code:
Click the + icon in the header of the My apps section or call the >New app command directly from the command palette.
assert.throws(fn, [error])
Passes if the function throws an error.
assert.doesNotThrow(fn)
Passes if the function does not throw an error.
assert.match(string, regex)
Passes if the string matches the regex.
assert.doesNotMatch(string, regex)
Passes if the string does not match the regex.
assert.ok(value)
Passes if value is truthy.
assert.strictEqual(actual, expected)
Passes if actual === expected.
assert.deepStrictEqual(actual, expected)
Passes if objects or arrays are deeply equal.
assert.notStrictEqual(actual, expected)
Passes if values are not strictly equal.
Click the Add environment button to launch the environment setup or execute the command: >Make Apps: Add SDK Environment from the command palette.
Fill in the API URL in the next pop-up window. The API URL depends on your Make zone.
For example, the US1 Make zone has the API URL: us1.make.com/api.
If the app you want to access originates from a different zone than your account, enter the app's zone.
Fill in the label for the environment in the next pop-up window. Press Enter to confirm the environment label.
Enter your Make API key that you previously created in Make.
The Make Apps Editor extension restarts with the environment configuration.
A new sidebar appears in VS code with a list of your custom apps and Make open-source apps. If you previously created any, your custom apps are listed in the block My apps. The Make open-source apps are listed in the Open source apps field at the bottom of the VS code sidebar.
The open-source apps code is only available in the EU1 zone.
If your zone is different and you want to access their code, create a new environment with the eu1.make.com/api environment URL.
In the Make Apps Editor, you can work across multiple environments.
To identify the active environment, check the indicator in the bottom status bar. Click the environment indicator to switch between environments.
Add another environment by executing the >Add SDK environment command again, as described in Step 2 above.
Navigate to Extensions > Make Apps Editor > Extension Settings > Edit in settings.json to add more settings.
Here are some settings for better performance and experience:
Set editor.formatOnSave to true in VS Code settings. Source codes will be formatted automatically when you save them.
Set editor.quickSuggetions.strings to true in VS Code settings. Keyword recommendations will automatically show up while you're typing in IML strings too.
You can log out using the >Logout command and log back in with the >Login command.
When you log out, the API key is removed from the settings.json file.
To log in again, you will need to enter your API key.
You can use this flow to change your API key in an environment.
Enter a label. This is the app name that users will see in the Scenario builder.
A placeholder app ID is generated for you. It will be used in the URL paths and in the scenario blueprint. It should be clear to which app it leads and it has to match (^[a-z][0-9a-z-]+[0-9a-z]$) regular expression.
This value can't be changed.
Enter the app version. Currently, you can only create apps in version 1.
Enter a description of your app.
Enter a color theme for your app. This is the color of the app's modules as seen in scenarios. The theme is in hexadecimal format. For example, the Make app's color is #6e21cc.
Enter the language of the app's interface. Most aps in Make are in English.
Enter countries where the app will be available. If you do not select any countries, Make will consider the app to be global.
Confirm the last dialog.
Your app is in the My Apps view and you can start coding.
Please be advised that this feature is in beta so it may encounter occasional bugs or inconsistencies.
To start the development of an app in a local directory or git repository, or start tracking changes in your app, you need to clone the Make app to the local workspace.
Open the folder where you intend to store the app in Visual Studio Code.
Select the section that corresponds to your development setup:
'Local Directory' if you are working directly on your computer's file system
'Git Repository' if you are using version control with Git
The 'Git Repository' section describes the development in the Git repository using the app. However, any preferred or CLI can be used.
Open Visual Studio Code and navigate to File > Open Folder.
In the file manager, select the folder where the app should be cloned.
Navigate to the GitHub Desktop app and open the repository where you intend to store the app.
Click Open in Visual Studio Code.
Once the repository in Visual Studio is set, you can proceed to cloning the app to the local folder.
In the opened window of Visual Studio Code, go to the Make Apps Editor and right-click the app you wish to save to your repository. Select Clone to Local Folder (beta).
Read the text in the dialog window and confirm reading by clicking Continue.
The app is now cloned to the local folder.
Versioning is only available if you are using version control with Git.
The following steps describe the development in the Git repository using the app as an example.
The .secrets file with your Make API keys is only stored in the local folder. By default, the file is excluded from the git versioning.
To properly start the versioning of your app in the Git repository:
Go to the GitHub Desktop app and open the repository where you deployed the current version of your app. You will see a list of new files.
Enter the Summary of the commit and click Commit to main. Or optionally, click Publish branch.
The first version of your app is logged. Every new change or a new component in the app will be considered a new change.
When developing an application, to manage the production and test versions:
the developer writes and tests the code with the test application in Make.
the developer tracks changes in the local git repository, pulling changes from the test application.
the developer pushes the changes to the production application from the local testing app when they finish the development and testing.
This process improves the maintenance and stability of the application because the development does not influence the production version of the application. In addition, all changes can be tracked in a git repository, providing a clear and organized development workflow.
To start the development of testing and production app versions, the following is needed:
The production version of an app in Make. If you already have an app that is in use, use it as the production app.
The cloned production version in a local workspace. , if you haven't done so already.
The testing version of an app in Make. Create a new app in Make, with no content, that will function as the testing version of the app.
Below is a diagram explaining how a developer can develop testing and production app versions.
First, .
Once the origin for the testing app is successfully created, you need to deploy the current code from the app that already exists, which we can call "Production".
Right-click on the makecomapp.json file and select Deploy to Make (beta).
Select the app origin that represents the testing app.
The app is deployed to Make.
Now, you can start developing new components or editing the current components in the Testing app in Make, and thoroughly test the app in the Scenario Builder.
Once you finish the development of new changes and components in the testing app, you can .
To synchronize the changes made to the testing app with the production app,
Unlike online development within the Make web interface, local development doesn't provide access to advanced features such as prefilled code templates, IML object suggestions, and seamless integration with the Scenario Builder for continuous testing.
Instead, it offers a self-contained environment for app creation and modification, ideal for situations where internet connectivity is unreliable or where comprehensive testing within the Scenario Builder isn't required.
Additionally, local development allows synchronization with Git repositories and provides full search capabilities across the entire codebase.
Each group of components, such as RPCs, modules, or custom IML functions, contains the component directories with corresponding code files.
If you need to edit the current code, click the file you want to edit and develop your changes in the opened tab. Save the changes.
If you need to create a new component:
Right-click the corresponding components' folder and select New Local Component: <component's name> (beta). For example, New Local Component: Module (beta).
Enter the component's name, label, and other corresponding parameters.
Next, you will commit the changes in the
To set up the VS Code extension you must provide an API key with the appropriate API key scopes.
To generate your API key:
Navigate to your profile settings in Make.
Click API access in the left navigation.
Click + Add token.
Set the API scopes for the API key.
The required scopes for the Make Apps Editor are:
sdk-apps:read
Click Save to confirm the selected permissions.
Copy your new API key to your clipboard and store it in a safe place. This is the only time you can see the whole API key. The API key is required to set up the VS code extension.
You have created a new Make API key. All your Make API keys are listed in your Make profile in the API access section. You can view permissions for all your keys and delete unused Make API keys.
You can partially deploy changes in components or new components to Make or the whole app can be deployed.
To deploy only a specific code file in a component to Make, right-click the code file and select Deploy to Make (beta).
To deploy a component to Make, right-click the component directory and select Deploy to Make (beta).
To deploy the whole app to Make, right-click the makecomapp.json file and select Deploy to Make (beta).
In the dialog, select the origin where the changes should be deployed.
The changes or new components are now available in the Make app.
The new app version can be tested in Scenario Builder. If you use testing and production apps, you can deploy the changes or new components to the production after the testing app passes the testing phase.
Before setting the app icon in VS Code, make sure that your icon meets .
To set the app icon:
Right-click the app name and select Edit icon.
You will see a preview of the current app's icon inside the app module.
Whenever you create a new package of changes, you can commit them to create a new version in the Git repository.
In the GitHub Desktop app, open the repository with the latest version of your app. You should see a list of new changes.
Enter the Summary and Description of the commit, and click Commit to main.
In the pop-up window, click "Yes, I trust the authors" option.
The current local directory in Visual Studio is set.
In the pop-up window, click "Yes, I trust the authors" option.
The current repository in Visual Studio is set.
Enter the workspace subdirectory name where the app should be cloned to.
If the subdirectory doesn't exist yet, it will be created. The default subdirectory is set to src. Click Enter.
If you are going to store more than one app in the repository, you can create a subfolder by using the src/app-name path, where the app-name is the name of the app folder.
A dialog window asking whether should be included or not will pop up.
Exclude (more secure) - Select, if your app contains sensitive data, such as Client ID and Secret. Common data will not be stored in your local workspace or a repository.
Include (for advanced users only) - Select, if you want to store the common data in your local workspace or a repository. Be aware that storing common data outside of Make could potentially expose the app to vulnerabilities.
If you don't want to create the component, click Ignore permanently/do not map with remote option.
A new component with the corresponding files is created.
Write the code in the corresponding files and save the changes.
sdk-apps:writeAdd more API scopes to your API key as needed. You can find descriptions of the API scopes in the .
Click Change icon.
In the file upload dialog box, select your icon to upload to Make.
The change icon view closes and the new icon appears in the left tree.
The new version of your app is logged.
Next, you will .
The following are basic controls in VS Code.
To add a new item such as a module, connection, or webhook, right-click the corresponding folder and click the New <item> option.
Each time the prompt appears, you are asked to fill in information about the newly created item. Follow the indicated prompts to create an item. Your new item appears under the corresponding folder.
To start editing the source code, find the item to edit in the left menu and click it.
A new editor will appear and the current source will be downloaded from Make.
You can edit it as a normal file. If your app contains some RPCs or IML functions, you will see auto-complete suggestions for them.
Use the shortcut CTRL+S to upload the source code back to Make.
To edit metadata (for example, to change the label of a module), right-click the desired item and select the Edit metadata option from the menu.
In the prompt, change allowed values. If you don't want to change a value, skip the field by pressing the Enter key.
To change the attached connection or webhook of an item, right-click the item and select the Change connection (or webhook) option from the menu.
In the prompt, change the connection or webhook. If possible, there will also be an option to unassign the current connection without assigning a new one.
You will also see a prompt to assign an alternative (secondary) connection. The alternative connection should not be the same as the main connection. You can leave it empty.
To delete an item, right-click it and select Delete.
You will be asked to confirm the deletion. If you answer Yes, the item will be deleted from the app.
Deleting items is only possible in private apps. Once an app is published, the capability to delete items within the app is disabled. Learn more about and the deletion of items.
Use the to generate an interface.
In the app development process, there are situations where it can be highly beneficial to push changes to multiple app origins. This is especially useful when managing different versions of an app, such as maintaining both a testing and a production app.
To create a new app origin:
Clone the production app to a local workspace.
Create a testing app in Make and name it <App Label> Testing.
Go to the makecomapp.json file in the local app repository. Locate the origins array of the collection and enter a new item by copying the code below and editing the values as instructed under the code.
label - the label of the local origin
Save the changes in the makecomapp.json file.
You have created a new app origin.
baseUrl - the URL to the origin's zoneappId - the name of the app
If the local app is shared among multiple developers, the originsarray will contain records for each connection between their local and Make (remote) app. Do not edit the current records to prevent breaking the connections.
"origins": [
{ /* --- Existing origin --- */ },
{
"label": "Testing",
"baseUrl": "https://eu1.make.com/api",
"appId": "my-first-app-test",
"appVersion": 1,
"apikeyFile": "../.secrets/apikey"
}
]
