What is Project IDX?

According to the project documentation: The Project IDX is an experimental web-based Integrated Development Environment (IDE). IDX can assist in creating and deploying applications across various technology stacks without the hassle of configuring development environments for yourself and other team members. IDX runs on fully configurable VMs on Google Cloud to maintain your development environment reliable, secure, and entirely customizable, just like a local development environment.

The new project templates in IDX aid in the development of web apps using frameworks such as Angular, Next.js, React, Svelte, and Vue. IDX also includes templates for developing cross-platform apps using Flutter through the browser.

I signed up for the waiting list to test the project, and after a few months, the email finally arrived with a preview available, albeit limited due to certain factors. Well, in this article, I'll share my impressions as a software developer. I started programming with a computer that was terrible in terms of processing power and memory. As a student at the time, I always sought out tools that could overcome these limitations, and online compilers were essential for learning. I believe that cloud development technologies such as Codespaces and Amazon Cloud9 are very beneficial for those who struggle with environment configurations and building robust web applications due to the limitations of local machine memory and processing power.

Steup a Project

In this tool, there's a functionality to set up a web project without the need to configure environment variables, install dependencies, or create folders. You simply select the framework, and it configures the entire development environment for you. The downside is that it takes quite a while, but the upside is that if you don't want to spend too much time doing this on your local machine or using up its memory, it's excellent. There are several configuration templates available, but since it's a test version, it's normal for it to be limited to some technologies, which are organized into categories: web (front-back), mobile, AI, machine learning. The list of frameworks for the preview is quite limited, including Flask, Angular, React, Vue, Svelte, and all other technologies such as mobile and AI are maintained by Google, as is the case with Flutter for mobile.After creating it, you have the option to share the environment created with other people.

IDE in Cloud

The IDX is built upon the well-known Code OSS project and runs on a complete virtual machine (VM) powered by Google Cloud technology. You can bring your own web and Flutter mobile apps to IDX. You can also start integrating with public or private repositories on GitHub.IDX comes with pre-installed extensions to help you set up your workspace and start coding. You also have access to several other extensions available on OpenVSX.

A workspace in IDX is a development environment that contains everything you need to develop your application. It includes the code, a code editor (with relevant plugins for your project), and toolsets compatible with app development. The process is similar to creating a new project in your local computer development environment, except that you have a fully pre-configured and dedicated computer and operating system solely for building an application.

Project IDX workspaces are optimized to contain one codebase at a time. This allows for keeping environments and dependencies at the system level of different applications isolated from each other.

If you're creating a new application, use managed workspace templates in IDX to get started quickly. Another option is to import application codebases into IDX.

In this case, I created a project based on Flask, and after a few clicks, everything was ready to use.

NIX

IDX uses Nix to define the environment configuration for each workspace. Nix is a purely functional package manager that assigns unique identifiers to each dependency, meaning your environment can contain multiple versions of the same dependency seamlessly. It is also reproducible and declarative. In the context of IDX, this means you can share your Nix configuration file across multiple workspaces to load the same environment configuration. Learn more about Nix + IDX.

Create or edit the .idx/dev.nix file
The environment configuration is defined in the .idx/dev.nix file in your code repository. This file allows you to specify installed packages, environment variables, and Code OSS extensions.

Check out the example .idx/dev.nix file below for a basic workspace environment configuration that enables app previews in IDX:

{ pkgs, ... }: {

# Which nixpkgs channel to use.

  channel = "stable-23.11"; # or "unstable"

# Use https://search.nixos.org/packages to find packages

  packages = [

    pkgs.nodejs_18

  ];

# Sets environment variables in the workspace

  env = {

    SOME_ENV_VAR = "hello";

  };

# Search for the extensions you want on https://open-vsx.org/ and use "publisher.id"

  idx.extensions = [

    "angular.ng-template"

  ];

# Enable previews and customize configuration

  idx.previews = {

    enable = true;

    previews = [

      {

        command = [

          "npm"

          "run"

          "start"

          "--"

          "--port"

          "$PORT"

          "--host"

          "0.0.0.0"

          "--disable-host-check"

        ];

        manager = "web";

        id = "web";

      }

    ];

  };

}

Point to IDX

A positive aspect is that if you haven't had any experience with mobile development and want to program something in Flutter, or if you don't want to go through the hassle of setting up the entire Android environment, IDX is perfect for you. When we select a Flutter template, we have the entire Android emulation environment ready, right in the browser. This is incredible!

Conclusion - My Humble Opinion

Well, lately I've been using Codespaces quite a bit for various types of projects. When I know I'll be using a lot of resources from my machine for development in artificial intelligence or augmented reality, for example, I always opt to create a repository on GitHub and start a Codespace. Especially when it comes to JavaScript technologies that have several modules that need to be installed. IDX has a lot of potential, especially in terms of an IDE for applications that will primarily use Google technologies. Of course, there are many positives and negatives. For example, the mobile interface isn't as good, and the artificial intelligence is far from what we have in Co-Pilot.

For those who just want to learn a language or something similar, especially to experiment, it's great. You can create a template and play around with that framework you promised to learn but always felt too lazy to go through the entire installation process.