Google's new in-browser IDE for full-stack development
Project IDX
I have been using Project IDX for a month now, And It has been a great exprience, I have always felt the need for having my development environment wherever I go and whatever machine I use. And IDX solves this problem with their new inbrowser development solution using IDX. Now you no longer need to carry your laptop with you, you can continue your work exactly where you left it off on any machine. You can run large projects right in the browser and have the the same development experience as you would when running locally on your machine anytime, anywhere on the go with IDX. For those who are not aware
Project IDX is an experimental initiative from Google to do full-stack development in a browser-based workspace. It is powered by virtual machines running in Google Cloud.
Getting Started
Project IDX is currently in development and is not publicly available at this time However you can join the waitlist by enrolling here https://idx.dev/. Once you get access to it you will be notified via email. As of today It comes with a bunch of workspace templates for different frameworks for building web apps and It also supports building apps with Flutter (more on that ahead) or you can also import your existing project from a repository. A total of two workspaces can be created as of today.
IDX for web apps
Let's take a closer look to experience all the cool features IDX offers firsthand. Once we choose to create a web app, IDX offers starter project templates of the most popular web frameworks like React, Angular, Svelte, and more.
Once the project is created, you will find a familiar interface, because IDX uses Monaco Editor, the same code editor that powers VS Code. This means you get access to all extensions and customizations VSCode provides out of the box right in your browser. The editor experience is extremely smooth and hard to distinguish whether you are developing locally on your machine or in the browser.
To quickly run a demo app I took the very popular matrix animation art from codepen for a quick test and you can see how smoothly it renders the output also the response time for the preview to update is instant when you change the code.
Every project in the IDX workspace requires a monospace.json (created by default for a new project) file at the root of your project in order to launch a virtual device. Here's a sample monospace.json file with running android/ios/web previews. One you create that file with the previews configuration you need to hard reset IDX (ctrl/cmd + shift + p -> IDX: hard reset)to start the preview with the new configuration
All commands of IDX can be accessed from the command palette by pressing ctrl/cmd + shift + p and by typing "IDX"
IDX AI Assistant
Now that AI has become part of our lives, AI code assistant is crucial to any modern IDE, IDX Workspace also has an AI to assist you with your code powered by codey and palm 2. It can do a lot of things for you like adding comments to a selected piece of code, generating code, explaining code, and much more.
It also has this small yet sweet feature where it inserts the generated code in your file at the position of the cursor.
IDX for Flutter
One of the most important things when developing mobile apps is having a virtual device this is what separates IDX from other cloud IDEs, the ability to run virtual devices for Android and IOS right in your browser. This is a huge deal, considering the complexities involved in getting the virtual devices running and the amount of resources these devices consume.
Development is not merely a code editor it also requires Devtools to debug and inspect your code. But I couldn;t get the Devtools working It just opens a new tab but with a blank screen.
One of the cool things with flutter development is hot reload, IDX does support hot reload but hot reload doesn't seem to take effect on file change, I had to manually click the button to hot restart however it works, most of the time.
Final thoughts
Overall I had a great experience using IDX, It's a great initiative from Google to bring the development environment to the browser. I would definitely recommend it to anyone who wants to try it out. Theres definitely a lot of room for improvement and I am sure Tean IDX will only make it better with time. Some of the improvements/issues that I think are missing or require a fix
- Android emulator should be resizable to have more space for the editor
- Loading the IOS simulator sometimes takes a couple of tries
- Configuration for existing projects should either add a monospace.json file or the user should be prompted to add one
- Devtools for flutter is not working
- Code autocomplete suggestions does not work most of the time, hopefully it gets more responsive and accurate similar to copilot.
- Perhaps integration of Gemini would be a great addition to the IDX assistant
- And definitiely there should be a comprehensive documentation for IDX
Hopefully Google continues to invest into this project and does not kill it like they did with many other projects. The future of development is definitely in the cloud and I am excited to see how IDX evolves in the future. I would love to hear your thoughts on IDX and what you think about the future of cloud development.
Thanks for reading.