Dynamics 365 Business Central: Developing with AL in a browser

Hi, Readers.
Today I would like to talk about how to develop with AL in a browser.
As you may recall, I tried a few times for this, but none were perfect for Business Central.
More details:

Last week, I saw the tweet AJ shared and decided to give it another try.

Developing with AL in a browser. 😊

The latest version of VS Code supports Remote Tunnels.https://t.co/Qf676gEbAa

You need a server running a VS Code remote tunnel and then you can connect to it from everywhere just using a browser.#MSDyn365BC https://t.co/wtn1nBLSuH pic.twitter.com/tWZjyyI2Qe
— Arend-Jan Kauffmann (@ajkauffmann) December 8, 2022

Let’s get started.

Developing with Remote Tunnels:

The Visual Studio Code Remote – Tunnels extension lets you connect to a remote machine, like a desktop PC or virtual machine (VM), via a secure tunnel. You can connect to that machine from a VS Code client anywhere, without the requirement of SSH.

Tunneling securely transmits data from one network to another.

This can eliminate the need for source code to be on your VS Code client machine since the extension runs commands and other extensions directly on the remote machine.

VS Code can provide a local-quality development experience – including full IntelliSense (completions), code navigation, and debugging – regardless of where your code is hosted.

You have two paths to work with tunnels:

Run the tunnel command of the code command-line interface (CLI).
Enable tunneling through the VS Code Desktop UI.

Both of these paths result in the same tunneling functionality – you can use whichever tooling works best for you. The CLI is a great option if you can’t install the full VS Code Desktop on your remote machine. Using the VS Code Desktop UI is convenient if you’re already doing some work in VS Code and would then like to enable tunneling for your current machine.

I this post, I will try the second way.

Using the VS Code UI:

1. Open VS Code on the remote machine where you’d like to turn on tunnel access.

2. In the VS Code Account menu, select the option to Turn on Remote Tunnel Access, as demonstrated in the image below. You may also open the Command Palette (F1) in VS Code and run the command Remote Tunnels: Turn on Remote Tunnel Access….

Choose Enable.

Remote Tunnels is currently in preview. Please report any problems using the “Help: Report Issue” command.

3. You’ll be prompted to log into GitHub. Once you’re logged in, a tunnel will start up on your current machine, and you’ll be able to connect to this machine remotely.

Choose Sign in with Github.

Choose Authorize Visual-Studio-Code.

Then you can choose Open Visual Studio Code to go back to VS Code.

Choose Open in VS Code.

All an extension to open this URl?

Starting remote tunnel……

Remote tunnel access is enabled for ZYNAV. To access from a different machine, open vscode.dev or use the Remote – Tunnels extension. Use the Account menu to configure or turn off.

4. In a client of your choice, you may open the vscode.dev link from the notification above and start coding!

Browser Link: https://vscode.dev/tunnel/ZYNAV/c:/Users/Administrator

Connecting to the remote machine.

After success, you can read the folder on the remote machine.

Then we can install AL Language and we can see that it will show Install in ZYNAV.

The installation was successful.

Then we can open the folder on the remote machine.

Please note that this is not the local folder, but the remote machine (server).

Then we can develop the BC project from the browser.👏👏🎊🎉

Note that if you try to Publish, it will open a browser on the remote machine by default.

Test Video:

This time it finally reached the usable level. Give it a try!!!😁

Note: The remote machine will only be reachable through a tunnel while VS Code remains running there. Once you exit VS Code it will no longer be possible to tunnel to it until you start VS Code there again or run the code tunnel CLI command.

END

Hope this will help.

Thanks.

ZHU