[MUSIC PLAYING]
DAVID EAST: Today, I am so excited because I'm
going to be giving you a sneak peek at a new experiment we've
been working on here at Google called Project IDX.
We have so many different development platforms
that enable developers to build websites, application,
and systems that scale in the cloud using technologies
such as Angular, Firebase, Flutter, Go, TensorFlow, Google
Cloud, Android, and Chrome--
and also including other countless libraries,
like lit-html.
So the vision with IDX is to make the multiplatform app
development workflow faster and more frictionless,
and that means no more having to manage what runtime you
need to install, or emulators, or any other dependency
for that matter.
Just click a button and get started on development.
And on top of that, we want to empower your workflow
with the latest from Google's AI capabilities.
IDX is still in an early stage, but there
is a lot to take a look at.
So let's get started.
But before we begin--
nah, I'm just kidding.
We're actually going to take a dive in.
So this is the home page for project IDX,
and you might be thinking that this looks familiar.
And that's because project IDX is based on Code OSS.
To get started with a project, you'll
see that there is a whole set of options for creating
what we call a workspace.
You can create a workspace by a platform,
like through a web app or a Flutter app.
And you can also create a blank workspace
for your own customizations.
You can import from a repo using GitHub, which
is something I do all the time.
And you can also see that we have some stuff coming soon
with Python, GO, and AI, so stay tuned.
And at the bottom, you can see any existing workspaces
you might have or any workspaces that are shared with you.
So let's start out by initializing a web
workspace using Angular.
There's more template options available as well,
such as with React, Next.js, a blank HTML project--
always a winner-- and as well as Vue and Svelte.
You might notice this Nix checkbox.
And don't worry, I'm going to get to that in just a second.
So let's create this project.
Project IDX boots up with a virtual machine,
and this can take some time.
But once it's up and running, you can start developing.
So now that everything is booted up,
I want to take a look at the integrated terminal.
So using a few different commands,
we can pop the terminal up.
So I prefer using Control-Tilde, but you
can use the command palette with Command-Shift-P
and then open up the new terminal.
So let's maximize this for full real estate.
So I can run any commands that you're
used to running on a Linux-based machine.
So if you want to check out the files on the system,
I can run ls or ls -l.
I can also do a grep search for any files
that I might want to find, or I can even
run my favorite command.
Just kidding.
So one of our biggest goals here is with performance.
We want this to feel just how it would on your local machine.
So if you're an IDX user, please give us your feedback here.
Oh, and because I know I'm going to get this question,
yes, you can use VIM.
Now, let's talk about the preview panel.
You can see that the web app is being
rendered within the panel, but how
does IDX know what to serve?
If you're using default templates in IDX,
then you don't have to worry about this.
But if you want to customize your setup,
you can configure what gets served in the preview panel.
And we have documentation on how to set that up, so check out
the link in the description.
And I also know that a lot of you
are wondering if you can open up this preview
panel into another tab for more space
and for clear use of the DevTools,
and the answer is absolutely yes.
When I click this button here, it
asked me if I want to open up this URL in a new tab.
And I'll say yes.
And then now, the entire app is loaded in another tab.
And any changes I make in the editor
are reflected in this tab as well.
So one thing I noticed with this project
is that the code formatting is a little bit different than how
I usually have it in my projects,
so I want to set up this workspace with Prettier,
an awesome library for formatting.
I can install Prettier with the command line-- using npm--
but I want to install it as an extension.
And since this, again, is based on Code OSS,
you can install all sorts of extensions, like Prettier.
So once I have it installed, I can run it
from the command palette.
And [SIGHS] yes.
Now my code looks exactly how I like it.
All right, so let's write some code.
I want to make a simple UI.
So let's blow away this entire template,
and I'm going to quickly build a string reverser app.
I know, it's very cutting edge.
I'm going to paste in some basic CSS and HTML,
but let's get IDX AI to help out here.
But before I get started, I do want
to enable a highly experimental but very cool
feature to enable code-based indexing so IDX
can understand my code and give me better responses.
To open up the AI chat, we can click on this little button
down here.
And this is IDX AI chat.
So let's ask it a question.
So I remember in Angular, there is a specific syntax
that you need to do two-way directional binding.
That's right.
I remember that the syntax is referred
to as the banana in a box.
Oh, and if you wonder why the code font is so large,
that's just because I have that enabled in my settings.
Now, I wonder if IDX's AI will do a bit more for me.
Let's see if it'll actually build me the whole template.
All right, this looks a lot like what I originally
wrote but with Angular.
So let's copy and paste it into my existing template.
And obviously, there's going to be some errors
because I haven't written any of the component code yet.
So I'm going to copy the template code,
and let's see if IDX will do the rest of the work for me
with a prompt.
So IDX gives me back a response with a completed component
class.
You can see that there is a spot here for a potential license.
And this code doesn't have one, but sometimes you'll
get a response with one filled in.
So now I'm going to open up the app.component.ts file,
highlight all the code, and click this Insert
button within the IDX AI chat, and it
replaces all the code I have highlighted with the response.
So let's go back and check out the template code.
You can see that there is an error in the template,
and that's a bit of a problem because I
have no idea what it means.
So let's copy the error and ask the AI.
OK, I see.
It's suggesting that I import the FormsModule
into my app.module.
And it not only understands the error,
but it also understands my code base
and suggests a specific fix with a link to the file I
need to update it in.
I'm going to open up the app.module.ts file.
And then I can either use the code insertion feature
to import the FormsModule, or I can even
prompt the import line within the editor using AI code
completion.
And what's even better is when I go to the module import
section, IDX knows that I want to add the FormsModule.
OK, great.
The error is gone, but I didn't update the original template
with all of the Angular logic embedded inside.
So, again, let's ask IDX AI to fix this for me.
You'll notice that with the prompt
that I asked it to understand the AppComponent class,
and it refactored everything for me.
Now, let's say time goes on, and I totally
forget where the reverse method is.
Well, I can ask IDX.
IDX lets me know that it's in the AppComponent class,
but where is that?
Ah, I see.
There is a link where I can open up the file.
So now we have the app complete, so let's get it to production.
IDX comes with a Firebase extension
that allows you to deploy to Firebase Hosting
by just clicking a few buttons.
The Firebase extension first needs a project connected,
and this is all done within IDX without having to go out
to the Firebase console.
IDX asks for permissions to connect
to the project which creates a service
account behind the scenes.
Now, I need to set up the deployment configuration.
And usually, this involves creating a firebase.json file,
but I can create this config with a button.
So once it's done, I can deploy, but I actually
have two options.
I can either deploy to my live channel
or create a preview channel.
So you can think of a live channel as production
and a preview channel as a temporary URL
for viewing changes before going to production.
I'm going to create a new preview channel by just giving
it a name, then click Deploy.
So behind the scenes, IDX is building the Angular app
and then deploying it out to Firebase Hosting.
And once it's done, we can use this link.
And just like that, the site is deployed to a preview channel.
Now, I'm not going to get to Flutter in this video just yet,
but stay tuned for another video soon.
The last topic I want to discuss,
though, is workspace customization.
So IDX uses a cross-platform package manager called Nix.
Nix allows you to specify what dependencies
you need to create your development environment.
So let's take a look on how it works today.
So when you create a project, you can either
select Nix enabled for a web project
or you can create a blank project.
Then when the project is created,
you'll notice that there is a folder called .idx with a file,
dev.nix.
Inside of this file contains the declarative code
that tells IDX what to include for this environment.
And you can specify Nix packages,
which are incredibly powerful.
And as you can see in the commented out examples,
they can be runtimes like Go, Python, and PHP.
There's even a place to write custom environment variables
that might be needed to interact with packages
and other libraries.
And you also can specify extensions,
and this is great for when you want to clone down
a repository into IDX, because we'll
install any extensions that are listed here
so you don't have to go in manually and find each one.
And you also can specify how the preview panel is configured,
and this is identical which you'll find
in the monospace.json file.
So while IDX doesn't officially support PHP yet,
you can still write and execute code from other languages
by using Nix.
So let's write a little PHP program.
I have PHP specified in the packages section,
so I'm going to rebuild the environment which only
takes a little bit of time.
And then now I'll create a PHP file.
So inside of here, I want to just write
a simple program that prints out the count of a loop until 10,
but I have a bit of a problem.
While I wrote a ton of PHP early in my career,
I don't really remember any of it now.
So let me ask IDX AI for some help.
Great.
Let me copy this code into the editor,
and now I can open up the terminal
and run the PHP command to execute the program.
And we can see the loop printed out.
So that's just a bit of what you can do with Project IDX today.
And I didn't cover all the things
that you can do with Flutter or even project sharing,
so subscribe if you want to see more IDX content.
It's still early on, and there is
a lot more that we're excited to show you in the future.
We're still working on adding more people
to the early program.
So if you haven't received an email yet,
hang tight because we are so excited to see
what you'll build with IDX.
[MUSIC PLAYING]