Take advantage of Firebase Studios IDE and VM features! Rody, a Developer Relations Engineer for Firebase Studio shares how you can customize code and use Gemini to make edits.
Firebase Studio → https://goo.gle/firebasestudio
#Firebase #NixOS
Speaker: Rody Davis Products Mentioned:, Firebase,
0:00 · SPEAKER: If you’re new to Firebase Studio, you may not realize that you have a full IDE and VM at your fingertips.
0:07 · To take advantage of this, we can just go up here to the top right and click Switch to Code.
0:13 · This allows us to have full access to the code that the prototyper generates and lets you customize it any way you see fit, including custom integrations or working with external data sources.
0:25 · The file that the prototyper uses for editing is the page.tsx inside the App Directory.
0:31 · And you can see that we have the code for React here.
0:34 · We can go to the preview and see the same preview that I was showing in the prototyper, but now we have it inside of the IDE.
0:41 · We can also still take full advantage of Gemini in Firebase to make changes and edits to our files.
0:47 · For example, we can add a table under the calculator to show a list of possible tip options.
0:54 · We can see that Gemini picked up the file that we are currently editing, and we’ll soon suggest an edit which we can then commit and save.
1:03 · Next, we can hit Reload if it hasn’t already.
1:06 · And now we’ll see the table at the bottom of our web preview.
1:10 · We can verify it’s working by entering an amount, updating some values— and awesome!
1:16 · We can see that the table is functional.
1:19 · Gemini inside of Firebase has full control of your project, so it can read and write files that you give it access to and run terminal commands.